enigmare/v2-crawler

1{"id":"doc-transition_svelte_docs-11c47052","source":"documentation","title":"transition: • Svelte Docs","url":"https://svelte.dev/docs/svelte/transition","text":"Example:\n```text\n<script>\n\timport { fade } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>toggle</button>\n\n{#if visible}\n\t<div transition:fade>fades in and out</div>\n{/if}\n```\n\nExample:\n```text\n{#if x}\n\t{#if y}\n\t\t<p transition:fade>fades in and out only when y changes</p>\n\n\t\t<p transition:fade|global>fades in and out when x or y change</p>\n\t{/if}\n{/if}\n```\n\nExample:\n```text\n{#if visible}\n\t<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>\n{/if}\n```\n\nExample:\n```text\ntransition = (node: HTMLElementnode: HTMLElement, params: anyparams: any, options: {\n    direction: \"in\" | \"out\" | \"both\";\n}options: { direction: \"in\" | \"out\" | \"both\"direction: 'in' | 'out' | 'both' }) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: numbert: number) => number,\n\tcss?: (t: numbert: number, u: numberu: number) => string,\n\ttick?: (t: numbert: number, u: numberu: number) => void\n}node: HTMLElementparams: anyoptions: {\n    direction: \"in\" | \"out\" | \"both\";\n}options: {\n    direction: \"in\" | \"out\" | \"both\";\n}direction: \"in\" | \"out\" | \"both\"t: numbert: numberu: numbert: numberu: number\n```\n\nExample:\n```text\noptions: {\n    direction: \"in\" | \"out\" | \"both\";\n}\n```\n\nExample:\n```text\n<script>\n\timport { elasticOut } from 'svelte/easing';\n\n\t/** @type {boolean} */\n\texport let visible;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params\n\t */\n\tfunction whoosh(node, params) {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '');\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) => `transform: ${existingTransform} scale(${t})`\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<div in:whoosh>whooshes in</div>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { elasticOut } from 'svelte/easing';\n\texport let visible: boolean;\n\n\tfunction whoosh(node: HTMLElement, params: { delay?: number, duration?: number, easing?: (t: number) => number }) {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '');\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) => `transform: ${existingTransform} scale(${t})`\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<div in:whoosh>whooshes in</div>\n{/if}\n```\n\nExample:\n```text\n<script>\n\texport let visible = false;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ speed?: number }} params\n\t */\n\tfunction typewriter(node, { speed = 1 }) {\n\t\tconst valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;\n\n\t\tif (!valid) {\n\t\t\tthrow new Error(`This transition only works on elements with a single text node child`);\n\t\t}\n\n\t\tconst text = node.textContent;\n\t\tconst duration = text.length / (speed * 0.01);\n\n\t\treturn {\n\t\t\tduration,\n\t\t\ttick: (t) => {\n\t\t\t\tconst i = ~~(text.length * t);\n\t\t\t\tnode.textContent = text.slice(0, i);\n\t\t\t}\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\texport let visible = false;\n\n\tfunction typewriter(node: HTMLElement, { speed = 1 }: { speed?: number }) {\n\t\tconst valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;\n\n\t\tif (!valid) {\n\t\t\tthrow new Error(`This transition only works on elements with a single text node child`);\n\t\t}\n\n\t\tconst text = node.textContent;\n\t\tconst duration = text.length / (speed * 0.01);\n\n\t\treturn {\n\t\t\tduration,\n\t\t\ttick: (t) => {\n\t\t\t\tconst i = ~~(text.length * t);\n\t\t\t\tnode.textContent = text.slice(0, i);\n\t\t\t}\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>\n{/if}\n```\n\nExample:\n```text\n{#if visible}\n\t<p\n\t\ttransition:fly={{ y: 200, duration: 2000 }}\n\t\tonintrostart={() => (status = 'intro started')}\n\t\tonoutrostart={() => (status = 'outro started')}\n\t\tonintroend={() => (status = 'intro ended')}\n\t\tonoutroend={() => (status = 'outro ended')}\n\t>\n\t\tFlies in and out\n\t</p>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":189,"estimatedTokens":1044}}2{"id":"doc-attach_svelte_docs-e34a4a83","source":"documentation","title":"{@attach ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/@attach","text":"Example:\n```text\n<script>\n\t/** @type {import('svelte/attachments').Attachment} */\n\tfunction myAttachment(element) {\n\t\tconsole.log(element.nodeName); // 'DIV'\n\n\t\treturn () => {\n\t\t\tconsole.log('cleaning up');\n\t\t};\n\t}\n</script>\n\n<div {@attach myAttachment}>...</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Attachment } from 'svelte/attachments';\n\n\tconst myAttachment: Attachment = (element) => {\n\t\tconsole.log(element.nodeName); // 'DIV'\n\n\t\treturn () => {\n\t\t\tconsole.log('cleaning up');\n\t\t};\n\t};\n</script>\n\n<div {@attach myAttachment}>...</div>\n```\n\nExample:\n```text\n<script>\n\timport tippy from 'tippy.js';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<button {@attach tooltip(content)}>\n\tHover me\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport tippy from 'tippy.js';\n\timport type { Attachment } from 'svelte/attachments';\n\n\tlet content = $state('Hello!');\n\n\tfunction tooltip(content: string): Attachment {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<button {@attach tooltip(content)}>\n\tHover me\n</button>\n```\n\nExample:\n```text\n<canvas\n\twidth={32}\n\theight={32}\n\t{@attach (canvas) => {\n\t\tconst context = canvas.getContext('2d');\n\n\t\t$effect(() => {\n\t\t\tcontext.fillStyle = color;\n\t\t\tcontext.fillRect(0, 0, canvas.width, canvas.height);\n\t\t});\n\t}}\n></canvas>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('svelte/elements').HTMLButtonAttributes} */\n\tlet { children, ...props } = $props();\n</script>\n\n<!-- `props` includes attachments -->\n<button {...props}>\n\t{@render children?.()}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { HTMLButtonAttributes } from 'svelte/elements';\n\n\tlet { children, ...props }: HTMLButtonAttributes = $props();\n</script>\n\n<!-- `props` includes attachments -->\n<button {...props}>\n\t{@render children?.()}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport tippy from 'tippy.js';\n\timport Button from './Button.svelte';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<Button {@attach tooltip(content)}>\n\tHover me\n</Button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport tippy from 'tippy.js';\n\timport Button from './Button.svelte';\n\timport type { Attachment } from 'svelte/attachments';\n\n\tlet content = $state('Hello!');\n\n\tfunction tooltip(content: string): Attachment {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<Button {@attach tooltip(content)}>\n\tHover me\n</Button>\n```\n\nExample:\n```text\nfunction function foo(bar: any): (node: any) => voidfoo(bar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node: anynode);\n\t\tupdate(node: anynode, bar: anybar);\n\t};\n}function foo(bar: any): (node: any) => voidnode: anynode: anybar: any\n```\n\nExample:\n```text\nfunction function foo(getBar: any): (node: any) => voidfoo(getBar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node: anynode);\n\n\t\tfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t\t\tupdate(node: anynode, getBar: anygetBar());\n\t\t});\n\t}\n}function foo(getBar: any): (node: any) => voidnode: anyfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));node: anygetBar: any\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":219,"estimatedTokens":1160}}3{"id":"doc-await_svelte_docs-51da9bad","source":"documentation","title":"await • Svelte Docs","url":"https://svelte.dev/docs/svelte/await-expressions","text":"Example:\n```text\nexport default {\n\tcompilerOptions: {\n    experimental: {\n        async: boolean;\n    };\n}compilerOptions: {\n\t\texperimental: {\n    async: boolean;\n}experimental: {\n\t\t\tasync: booleanasync: true\n\t\t}\n\t}\n};compilerOptions: {\n    experimental: {\n        async: boolean;\n    };\n}compilerOptions: {\n    experimental: {\n        async: boolean;\n    };\n}experimental: {\n    async: boolean;\n}experimental: {\n    async: boolean;\n}async: boolean\n```\n\nExample:\n```text\ncompilerOptions: {\n    experimental: {\n        async: boolean;\n    };\n}\n```\n\nExample:\n```text\nexperimental: {\n    async: boolean;\n}\n```\n\nExample:\n```text\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}>\n<input type=\"number\" bind:value={b}>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}>\n<input type=\"number\" bind:value={b}>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n```\n\nExample:\n```text\n<p>2 + 2 = 3</p>\n```\n\nExample:\n```text\n<p>{await one(x)}</p>\n<p>{await two(y)}</p>\n```\n\nExample:\n```text\n// `b` will not be created until `a` has resolved,\n// but once created they will update independently\n// even if `x` and `y` update simultaneously\nlet let a: numbera = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function one(x: number): Promise<number>@paramx one(let x: numberx));\nlet let b: numberb = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function two(y: number): Promise<number>@paramy two(let y: numbery));let a: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function one(x: number): Promise<number>let x: numberlet b: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function two(y: number): Promise<number>let y: number\n```\n\nExample:\n```text\nfunction $derived<number>(expression: number): number\nnamespace $derived\n```\n\nExample:\n```text\nlet double = $derived(count * 2);\n```\n\nExample:\n```text\nimport { function tick(): Promise<void>Returns a promise that resolves once any pending state changes have been applied.\nreferencetick, function settled(): Promise<void>Returns a promise that resolves once any state changes, and asynchronous work resulting from them,\nhave resolved and the DOM has been updated\n@since5.36referencesettled } from 'svelte';\n\nasync function function onclick(): Promise<void>onclick() {\n\tlet updating: booleanupdating = true;\n\n\t// without this, the change to `updating` will be\n\t// grouped with the other changes, meaning it\n\t// won't be reflected in the UI\n\tawait function tick(): Promise<void>Returns a promise that resolves once any pending state changes have been applied.\nreferencetick();\n\n\tlet color: stringcolor = 'octarine';\n\tlet answer: numberanswer = 42;\n\n\tawait function settled(): Promise<void>Returns a promise that resolves once any state changes, and asynchronous work resulting from them,\nhave resolved and the DOM has been updated\n@since5.36referencesettled();\n\n\t// any updates affected by `color` or `answer`\n\t// have now been applied\n\tlet updating: booleanupdating = false;\n}function tick(): Promise<void>function settled(): Promise<void>function onclick(): Promise<void>let updating: booleanfunction tick(): Promise<void>let color: stringlet answer: numberfunction settled(): Promise<void>let updating: boolean\n```\n\nExample:\n```text\nimport { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender } from 'svelte/server';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst { const head: stringHTML that goes into the <head>\nhead, const body: stringHTML that goes somewhere into the <body>\nbody } = await render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp);function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputserverbodyheadtype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst head: string<head>const body: string<body>render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentType\n```\n\nExample:\n```text\nfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutput\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutput\n```\n\nExample:\n```text\n<script>\n\timport { fork } from 'svelte';\n\timport Menu from './Menu.svelte';\n\n\tlet open = $state(false);\n\n\t/** @type {import('svelte').Fork | null} */\n\tlet pending = null;\n\n\tfunction preload() {\n\t\tpending ??= fork(() => {\n\t\t\topen = true;\n\t\t});\n\t}\n\n\tfunction discard() {\n\t\tpending?.discard();\n\t\tpending = null;\n\t}\n</script>\n\n<button\n\tonfocusin={preload}\n\tonfocusout={discard}\n\tonpointerenter={preload}\n\tonpointerleave={discard}\n\tonclick={() => {\n\t\tpending?.commit();\n\t\tpending = null;\n\n\t\t// in case `pending` didn't exist\n\t\t// (if it did, this is a no-op)\n\t\topen = true;\n\t}}\n>open menu</button>\n\n{#if open}\n\t<!-- any async work inside this component will start\n\t     as soon as the fork is created -->\n\t<Menu onclose={() => open = false} />\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.136Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":304,"estimatedTokens":2770}}4{"id":"doc-snippet_svelte_docs-4877e4cd","source":"documentation","title":"{#snippet ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/snippet","text":"Example:\n```text\n{#snippet name()}...{/snippet}\n```\n\nExample:\n```text\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\nExample:\n```text\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t<figure>\n\t\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t\t</figure>\n\t\t</a>\n\t{:else}\n\t\t<figure>\n\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t</figure>\n\t{/if}\n{/each}\n```\n\nExample:\n```text\n{#snippet figure(image)}\n\t<figure>\n\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t<figcaption>{image.caption}</figcaption>\n\t</figure>\n{/snippet}\n\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t{@render figure(image)}\n\t\t</a>\n\t{:else}\n\t\t{@render figure(image)}\n\t{/if}\n{/each}\n```\n\nExample:\n```text\n<script>\n\tlet { message = `it's great to see you!` } = $props();\n</script>\n\n{#snippet hello(name)}\n\t<p>hello {name}! {message}!</p>\n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { message = `it's great to see you!` } = $props();\n</script>\n\n{#snippet hello(name)}\n\t<p>hello {name}! {message}!</p>\n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\nExample:\n```text\n<div>\n\t{#snippet x()}\n\t\t{#snippet y()}...{/snippet}\n\n\t\t<!-- this is fine -->\n\t\t{@render y()}\n\t{/snippet}\n\n\t<!-- this will error, as `y` is not in scope -->\n\t{@render y()}\n</div>\n\n<!-- this will also error, as `x` is not in scope -->\n{@render x()}\n```\n\nExample:\n```text\n{#snippet blastoff()}\n\t<span>🚀</span>\n{/snippet}\n\n{#snippet countdown(n)}\n\t{#if n > 0}\n\t\t<span>{n}...</span>\n\t\t{@render countdown(n - 1)}\n\t{:else}\n\t\t{@render blastoff()}\n\t{/if}\n{/snippet}\n\n{@render countdown(10)}\n```\n\nExample:\n```text\n<script>\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n{#snippet header()}\n\t<th>fruit</th>\n\t<th>qty</th>\n\t<th>price</th>\n\t<th>total</th>\n{/snippet}\n\n{#snippet row(d)}\n\t<td>{d.name}</td>\n\t<td>{d.qty}</td>\n\t<td>{d.price}</td>\n\t<td>{d.qty * d.price}</td>\n{/snippet}\n\n<Table data={fruits} {header} {row} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n{#snippet header()}\n\t<th>fruit</th>\n\t<th>qty</th>\n\t<th>price</th>\n\t<th>total</th>\n{/snippet}\n\n{#snippet row(d)}\n\t<td>{d.name}</td>\n\t<td>{d.qty}</td>\n\t<td>{d.price}</td>\n\t<td>{d.qty * d.price}</td>\n{/snippet}\n\n<Table data={fruits} {header} {row} />\n```\n\nExample:\n```text\n<script>\n\tlet { data, header, row } = $props();\n</script>\n\n<table>\n\t{#if header}\n\t\t<thead>\n\t\t\t<tr>{@render header()}</tr>\n\t\t</thead>\n\t{/if}\n\n\t<tbody>\n\t\t{#each data as d}\n\t\t\t<tr>{@render row(d)}</tr>\n\t\t{/each}\n\t</tbody>\n</table>\n\n<style>\n\ttable {\n\t\ttext-align: left;\n\t\tborder-spacing: 0;\n\t}\n\n\ttbody tr:nth-child(2n+1) {\n\t\tbackground: ButtonFace;\n\t}\n\n\ttable :global(th), table :global(td) {\n\t\tpadding: 0.5em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { data, header, row } = $props();\n</script>\n\n<table>\n\t{#if header}\n\t\t<thead>\n\t\t\t<tr>{@render header()}</tr>\n\t\t</thead>\n\t{/if}\n\n\t<tbody>\n\t\t{#each data as d}\n\t\t\t<tr>{@render row(d)}</tr>\n\t\t{/each}\n\t</tbody>\n</table>\n\n<style>\n\ttable {\n\t\ttext-align: left;\n\t\tborder-spacing: 0;\n\t}\n\n\ttbody tr:nth-child(2n+1) {\n\t\tbackground: ButtonFace;\n\t}\n\n\ttable :global(th), table :global(td) {\n\t\tpadding: 0.5em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script>\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n<Table data={fruits}>\n\t{#snippet header()}\n\t\t<th>fruit</th>\n\t\t<th>qty</th>\n\t\t<th>price</th>\n\t\t<th>total</th>\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t<td>{d.name}</td>\n\t\t<td>{d.qty}</td>\n\t\t<td>{d.price}</td>\n\t\t<td>{d.qty * d.price}</td>\n\t{/snippet}\n</Table>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n<Table data={fruits}>\n\t{#snippet header()}\n\t\t<th>fruit</th>\n\t\t<th>qty</th>\n\t\t<th>price</th>\n\t\t<th>total</th>\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t<td>{d.name}</td>\n\t\t<td>{d.qty}</td>\n\t\t<td>{d.price}</td>\n\t\t<td>{d.qty * d.price}</td>\n\t{/snippet}\n</Table>\n```\n\nExample:\n```text\n<script>\n\timport Button from './Button.svelte';\n</script>\n\n<Button>click me</Button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Button from './Button.svelte';\n</script>\n\n<Button>click me</Button>\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n<!-- result will be <button>click me</button> -->\n<button>{@render children()}</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { children } = $props();\n</script>\n\n<!-- result will be <button>click me</button> -->\n<button>{@render children()}</button>\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n{@render children?.()}\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n{#if children}\n\t{@render children()}\n{:else}\n\tfallback content\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\tdata: any[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[any]>;\n\t}\n\n\tlet { data, children, row }: Props = $props();\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\" generics=\"T\">\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tdata,\n\t\tchildren,\n\t\trow\n\t}: {\n\t\tdata: T[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[T]>;\n\t} = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { add } from './snippets.svelte';\n</script>\n\n{@render add(1, 2)}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { add } from './snippets.svelte';\n</script>\n\n{@render add(1, 2)}\n```\n\nExample:\n```text\n<script module>\n\texport { add };\n</script>\n\n{#snippet add(a, b)}\n\t{a} + {b} = {a + b}\n{/snippet}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.136Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":25,"totalLines":423,"estimatedTokens":1566}}5{"id":"doc-bind_svelte_docs-d810512b","source":"documentation","title":"bind: • Svelte Docs","url":"https://svelte.dev/docs/svelte/bind","text":"Example:\n```text\n<input bind:value={value} />\n<input bind:value />\n```\n\nExample:\n```text\n<input bind:value={\n\t() => value,\n\t(v) => value = v.toLowerCase()}\n/>\n```\n\nExample:\n```text\n<script>\n\tlet message = $state('hello');\n</script>\n\n<input bind:value={message} />\n<p>{message}</p>\n```\n\nExample:\n```text\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n</script>\n\n<label>\n\t<input type=\"number\" bind:value={a} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={a} min=\"0\" max=\"10\" />\n</label>\n\n<label>\n\t<input type=\"number\" bind:value={b} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={b} min=\"0\" max=\"10\" />\n</label>\n\n<p>{a} + {b} = {a + b}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet a = $state(1);\n\tlet b = $state(2);\n</script>\n\n<label>\n\t<input type=\"number\" bind:value={a} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={a} min=\"0\" max=\"10\" />\n</label>\n\n<label>\n\t<input type=\"number\" bind:value={b} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={b} min=\"0\" max=\"10\" />\n</label>\n\n<p>{a} + {b} = {a + b}</p>\n```\n\nExample:\n```text\n<script>\n\tlet value = $state('');\n</script>\n\n<form>\n\t<input bind:value defaultValue=\"not the empty string\">\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\nExample:\n```text\n<label>\n\t<input type=\"checkbox\" bind:checked={accepted} />\n\tAccept terms and conditions\n</label>\n```\n\nExample:\n```text\n<script>\n\tlet checked = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked defaultChecked={true}>\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\nExample:\n```text\n<script>\n\tlet checked = $state(false);\n\tlet indeterminate = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked bind:indeterminate>\n\n\t{#if indeterminate}\n\t\twaiting...\n\t{:else if checked}\n\t\tchecked\n\t{:else}\n\t\tunchecked\n\t{/if}\n</form>\n```\n\nExample:\n```text\n<script>\n\tlet tortilla = $state('Plain');\n\n\t/** @type {string[]} */\n\tlet fillings = $state([]);\n</script>\n\n<h1>Customize your burrito</h1>\n\n<!-- grouped radio inputs are mutually exclusive -->\n<label><input type=\"radio\" bind:group={tortilla} value=\"Plain\" /> Plain</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Whole wheat\" /> Whole wheat</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Spinach\" /> Spinach</label>\n\n<!-- grouped checkbox inputs populate an array -->\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Rice\" /> Rice</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Beans\" /> Beans</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Cheese\" /> Cheese</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Guac (extra)\" /> Guac (extra)</label>\n\n<p>Tortilla: {tortilla}</p>\n<p>Fillings: {fillings.join(', ') || 'None'}</p>\n\n<style>\n\tlabel {\n\t\tdisplay: block;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet tortilla = $state('Plain');\n\tlet fillings: string[] = $state([]);\n</script>\n\n<h1>Customize your burrito</h1>\n\n<!-- grouped radio inputs are mutually exclusive -->\n<label><input type=\"radio\" bind:group={tortilla} value=\"Plain\" /> Plain</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Whole wheat\" /> Whole wheat</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Spinach\" /> Spinach</label>\n\n<!-- grouped checkbox inputs populate an array -->\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Rice\" /> Rice</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Beans\" /> Beans</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Cheese\" /> Cheese</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Guac (extra)\" /> Guac (extra)</label>\n\n<p>Tortilla: {tortilla}</p>\n<p>Fillings: {fillings.join(', ') || 'None'}</p>\n\n<style>\n\tlabel {\n\t\tdisplay: block;\n\t}\n</style>\n```\n\nExample:\n```text\n<script>\n\tlet files = $state();\n\n\tfunction clear() {\n\t\tfiles = new DataTransfer().files; // null or undefined does not work\n\t}\n</script>\n\n<label for=\"avatar\">Upload a picture:</label>\n<input accept=\"image/png, image/jpeg\" bind:files id=\"avatar\" name=\"avatar\" type=\"file\" />\n<button onclick={clear}>clear</button>\n```\n\nExample:\n```text\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b}>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\nExample:\n```text\n<select multiple bind:value={fillings}>\n\t<option value=\"Rice\">Rice</option>\n\t<option value=\"Beans\">Beans</option>\n\t<option value=\"Cheese\">Cheese</option>\n\t<option value=\"Guac (extra)\">Guac (extra)</option>\n</select>\n```\n\nExample:\n```text\n<select multiple bind:value={fillings}>\n\t<option>Rice</option>\n\t<option>Beans</option>\n\t<option>Cheese</option>\n\t<option>Guac (extra)</option>\n</select>\n```\n\nExample:\n```text\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b} selected>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\nExample:\n```text\n<audio src={clip} bind:duration bind:currentTime bind:paused></audio>\n```\n\nExample:\n```text\n<details bind:open={isOpen}>\n\t<summary>How do you comfort a JavaScript bug?</summary>\n\t<p>You console it.</p>\n</details>\n```\n\nExample:\n```text\nbind:this={dom_node}\n```\n\nExample:\n```text\n<script>\n\t/** @type {HTMLCanvasElement} */\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst ctx = canvas.getContext('2d');\n\t\tdrawStuff(ctx);\n\t});\n</script>\n\n<canvas bind:this={canvas}></canvas>\n```\n\nExample:\n```text\n<ShoppingCart bind:this={cart} />\n\n<button onclick={() => cart.empty()}> Empty shopping cart </button>\n```\n\nExample:\n```text\n<script>\n\t// All instance exports are available on the instance object\n\texport function empty() {\n\t\t// ...\n\t}\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\t// All instance exports are available on the instance object\n\texport function empty() {\n\t\t// ...\n\t}\n</script>\n```\n\nExample:\n```text\nbind:property={variable}\n```\n\nExample:\n```text\n<Keypad bind:value={pin} />\n```\n\nExample:\n```text\n<script>\n\tlet { readonlyProperty, bindableProperty = $bindable() } = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet { bindableProperty = $bindable('fallback value') } = $props();\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.137Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":27,"totalLines":316,"estimatedTokens":1516}}6{"id":"doc-inspect_svelte_docs-7c1c2e87","source":"documentation","title":"$inspect • Svelte Docs","url":"https://svelte.dev/docs/svelte/$inspect","text":"Example:\n```text\n<script>\n\tlet count = $state(0);\n\tlet message = $state('hello');\n\n\t$inspect(count, message); // will console.log when `count` or `message` change\n</script>\n\n<button onclick={() => count++}>Increment</button>\n<input bind:value={message} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet count = $state(0);\n\tlet message = $state('hello');\n\n\t$inspect(count, message); // will console.log when `count` or `message` change\n</script>\n\n<button onclick={() => count++}>Increment</button>\n<input bind:value={message} />\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\n\t$inspect(count).with((type, count) => {\n\t\tif (type === 'update') {\n\t\t\tdebugger; // or `console.trace`, or whatever you want\n\t\t}\n\t});\n</script>\n\n<button onclick={() => count++}>Increment</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet count = $state(0);\n\n\t$inspect(count).with((type, count) => {\n\t\tif (type === 'update') {\n\t\t\tdebugger; // or `console.trace`, or whatever you want\n\t\t}\n\t});\n</script>\n\n<button onclick={() => count++}>Increment</button>\n```\n\nExample:\n```text\n<script>\n\timport { doSomeWork } from './elsewhere';\n\n\t$effect(() => {\n\t\t// $inspect.trace must be the first statement of a function body\n\t\t$inspect.trace();\n\t\tdoSomeWork();\n\t});\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.137Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":70,"estimatedTokens":317}}7{"id":"doc-const_svelte_docs-f1886c10","source":"documentation","title":"{@const ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/@const","text":"Example:\n```text\n{#each boxes as box}\n\t{@const area = box.width * box.height}\n\t{box.width} * {box.height} = {area}\n{/each}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.137Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":35}}8{"id":"doc-bindable_svelte_docs-42cf4819","source":"documentation","title":"$bindable • Svelte Docs","url":"https://svelte.dev/docs/svelte/$bindable","text":"Example:\n```text\n<script>\n\tlet { value = $bindable(), ...props } = $props();\n</script>\n\n<input bind:value={value} {...props} />\n\n<style>\n\tinput {\n\t\tfont-family: 'Comic Sans MS';\n\t\tcolor: deeppink;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { value = $bindable(), ...props } = $props();\n</script>\n\n<input bind:value={value} {...props} />\n\n<style>\n\tinput {\n\t\tfont-family: 'Comic Sans MS';\n\t\tcolor: deeppink;\n\t}\n</style>\n```\n\nExample:\n```text\n<script>\n\timport FancyInput from './FancyInput.svelte';\n\n\tlet message = $state('hello');\n</script>\n\n<FancyInput bind:value={message} />\n<p>{message}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport FancyInput from './FancyInput.svelte';\n\n\tlet message = $state('hello');\n</script>\n\n<FancyInput bind:value={message} />\n<p>{message}</p>\n```\n\nExample:\n```text\nlet { let value: anyvalue = function $bindable<\"fallback\">(fallback?: \"fallback\" | undefined): \"fallback\"\nnamespace $bindableDeclares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.\nlet { propName = $bindable() }: { propName: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$bindable Documentation}$bindable('fallback'), ...let props: anyprops } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();let value: anyfunction $bindable<\"fallback\">(fallback?: \"fallback\" | undefined): \"fallback\"\nnamespace $bindablefunction $bindable<\"fallback\">(fallback?: \"fallback\" | undefined): \"fallback\"\nnamespace $bindablebind:propName={value}let { propName = $bindable() }: { propName: boolean } = $props();let props: anyfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nfunction $bindable<\"fallback\">(fallback?: \"fallback\" | undefined): \"fallback\"\nnamespace $bindable\n```\n\nExample:\n```text\nlet { propName = $bindable() }: { propName: boolean } = $props();\n```\n\nExample:\n```text\nfunction $props(): any\nnamespace $props\n```\n\nExample:\n```text\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.137Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":92,"estimatedTokens":636}}9{"id":"doc-each_svelte_docs-e56d20d9","source":"documentation","title":"{#each ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/each","text":"Example:\n```text\n{#each expression as name}...{/each}\n```\n\nExample:\n```text\n{#each expression as name, index}...{/each}\n```\n\nExample:\n```text\n<h1>Shopping list</h1>\n<ul>\n\t{#each items as item}\n\t\t<li>{item.name} x {item.qty}</li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\n{#each items as item, i}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\nExample:\n```text\n{#each expression as name (key)}...{/each}\n```\n\nExample:\n```text\n{#each expression as name, index (key)}...{/each}\n```\n\nExample:\n```text\n{#each items as item (item.id)}\n\t<li>{item.name} x {item.qty}</li>\n{/each}\n\n<!-- or with additional index value -->\n{#each items as item, i (item.id)}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\nExample:\n```text\n{#each items as { id, name, qty }, i (id)}\n\t<li>{i + 1}: {name} x {qty}</li>\n{/each}\n\n{#each objects as { id, ...rest }}\n\t<li><span>{id}</span><MyComponent {...rest} /></li>\n{/each}\n\n{#each items as [id, ...rest]}\n\t<li><span>{id}</span><MyComponent values={rest} /></li>\n{/each}\n```\n\nExample:\n```text\n{#each expression}...{/each}\n```\n\nExample:\n```text\n{#each expression, index}...{/each}\n```\n\nExample:\n```text\n<div class=\"chess-board\">\n\t{#each { length: 8 }, rank}\n\t\t{#each { length: 8 }, file}\n\t\t\t<div class:black={(rank + file) % 2 === 1}></div>\n\t\t{/each}\n\t{/each}\n</div>\n\n<style>\n\t.chess-board {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tgrid-template-rows: repeat(8, 1fr);\n\t\tborder: 1px solid black;\n\t\taspect-ratio: 1;\n\n\t\t.black {\n\t\t\tbackground: black;\n\t\t}\n\t}\n</style>\n```\n\nExample:\n```text\n{#each expression as name}...{:else}...{/each}\n```\n\nExample:\n```text\n{#each todos as todo}\n\t<p>{todo.text}</p>\n{:else}\n\t<p>No tasks today!</p>\n{/each}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.137Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":114,"estimatedTokens":427}}10{"id":"doc-basic_markup_svelte_docs-71e26769","source":"documentation","title":"Basic markup • Svelte Docs","url":"https://svelte.dev/docs/svelte/basic-markup","text":"Example:\n```text\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<div>\n\t<Widget />\n</div>\n```\n\nExample:\n```text\n<div class=\"foo\">\n\t<button disabled>can't touch this</button>\n</div>\n```\n\nExample:\n```text\n<input type=checkbox />\n```\n\nExample:\n```text\n<input required={false} placeholder=\"This input field is not required\" />\n<div title={null}>This div has no title attribute</div>\n```\n\nExample:\n```text\n<button {disabled}>...</button>\n<!-- equivalent to\n<button disabled={disabled}>...</button>\n-->\n```\n\nExample:\n```text\n<Widget foo={bar} answer={42} text=\"hello\" />\n```\n\nExample:\n```text\n<Widget a=\"b\" {...things} c=\"d\" />\n```\n\nExample:\n```text\n{expression}\n```\n\nExample:\n```text\n<h1>Hello {name}!</h1>\n<p>{a} + {b} = {a + b}.</p>\n\n<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>\n```\n\nExample:\n```text\n{@html potentiallyUnsafeHtmlString}\n```\n\nExample:\n```text\n<!-- this is a comment! --><h1>Hello world</h1>\n```\n\nExample:\n```text\n<!-- svelte-ignore a11y_autofocus -->\n<input bind:value={name} autofocus />\n```\n\nExample:\n```text\n<!--\n@component\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```html\n  <Main name=\"Arethra\">\n  ```\n-->\n<script>\n\tlet { name } = $props();\n</script>\n\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":99,"estimatedTokens":321}}11{"id":"doc-html_svelte_docs-7f3cd14f","source":"documentation","title":"{@html ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/@html","text":"Example:\n```text\n<article>\n\t{@html content}\n</article>\n```\n\nExample:\n```text\n{@html '<div>'}content{@html '</div>'}\n```\n\nExample:\n```text\n<article>\n\t{@html content}\n</article>\n\n<style>\n\tarticle {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```\n\nExample:\n```text\n<style>\n\tarticle :global {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":37,"estimatedTokens":94}}12{"id":"doc-in_and_out_svelte_docs-cc2194ed","source":"documentation","title":"in: and out: • Svelte Docs","url":"https://svelte.dev/docs/svelte/in-and-out","text":"Example:\n```text\n<script>\n  import { fade, fly } from 'svelte/transition';\n\n  let visible = $state(false);\n</script>\n\n<label>\n  <input type=\"checkbox\" bind:checked={visible}>\n  visible\n</label>\n\n{#if visible}\n\t<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":19,"estimatedTokens":74}}13{"id":"doc-debug_svelte_docs-23c1921e","source":"documentation","title":"{@debug ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/@debug","text":"Example:\n```text\n<script>\n\tlet user = {\n\t\tfirstname: 'Ada',\n\t\tlastname: 'Lovelace'\n\t};\n</script>\n\n{@debug user}\n\n<h1>Hello {user.firstname}!</h1>\n```\n\nExample:\n```text\n<!-- Compiles -->\n{@debug user}\n{@debug user1, user2, user3}\n\n<!-- WON'T compile -->\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":92}}14{"id":"doc-style_svelte_docs-ad12dfdc","source":"documentation","title":"style: • Svelte Docs","url":"https://svelte.dev/docs/svelte/style","text":"Example:\n```text\n<!-- These are equivalent -->\n<div style:color=\"red\">...</div>\n<div style=\"color: red;\">...</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":8,"estimatedTokens":33}}15{"id":"doc-render_svelte_docs-32432e4f","source":"documentation","title":"{@render ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/@render","text":"Example:\n```text\n{#snippet sum(a, b)}\n\t<p>{a} + {b} = {a + b}</p>\n{/snippet}\n\n{@render sum(1, 2)}\n{@render sum(3, 4)}\n{@render sum(5, 6)}\n```\n\nExample:\n```text\n{@render (cool ? coolSnippet : lameSnippet)()}\n```\n\nExample:\n```text\n{@render children?.()}\n```\n\nExample:\n```text\n{#if children}\n\t{@render children()}\n{:else}\n\t<p>fallback content</p>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":31,"estimatedTokens":92}}16{"id":"doc-props_svelte_docs-a81af3ce","source":"documentation","title":"$props • Svelte Docs","url":"https://svelte.dev/docs/svelte/$props","text":"Example:\n```text\n<script>\n\timport MyComponent from './MyComponent.svelte';\n</script>\n\n<MyComponent adjective=\"cool\" />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport MyComponent from './MyComponent.svelte';\n</script>\n\n<MyComponent adjective=\"cool\" />\n```\n\nExample:\n```text\n<script>\n\tlet props = $props();\n</script>\n\n<p>this component is {props.adjective}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet props = $props();\n</script>\n\n<p>this component is {props.adjective}</p>\n```\n\nExample:\n```text\n<script>\n\tlet { adjective } = $props();\n</script>\n\n<p>this component is {adjective}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { adjective } = $props();\n</script>\n\n<p>this component is {adjective}</p>\n```\n\nExample:\n```text\nlet { let adjective: anyadjective = 'happy' } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();let adjective: anyfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nfunction $props(): any\nnamespace $props\n```\n\nExample:\n```text\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nlet { super: let trouper: anytrouper = 'lights are gonna find me' } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();let trouper: anyfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nlet { let a: anya, let b: anyb, let c: anyc, ...let others: anyothers } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();let a: anylet b: anylet c: anylet others: anyfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (parent): {count}\n</button>\n\n<Child {count} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (parent): {count}\n</button>\n\n<Child {count} />\n```\n\nExample:\n```text\n<script>\n\tlet { count } = $props();\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (child): {count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { count } = $props();\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (child): {count}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child object={{ count: 0 }} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n</script>\n\n<Child object={{ count: 0 }} />\n```\n\nExample:\n```text\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n\n\tlet object = $state({count: 0});\n</script>\n\n<Child {object} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n\n\tlet object = $state({count: 0});\n</script>\n\n<Child {object} />\n```\n\nExample:\n```text\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// will cause the count below to update,\n\t// but with a warning. Don't mutate\n\t// objects you don't own!\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// will cause the count below to update,\n\t// but with a warning. Don't mutate\n\t// objects you don't own!\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n</script>\n\n<Child />\n```\n\nExample:\n```text\n<script>\n\tlet { object = { count: 0 } } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect if the fallback value is used\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { object = { count: 0 } } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect if the fallback value is used\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { adjective }: { adjective: string } = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\t/** @type {{ adjective: string }} */\n\tlet { adjective } = $props();\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tinterface Props {\n\t\tadjective: string;\n\t}\n\n\tlet { adjective }: Props = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\tconst uid = $props.id();\n</script>\n\n<form>\n\t<label for=\"{uid}-firstname\">First Name: </label>\n\t<input id=\"{uid}-firstname\" type=\"text\" />\n\n\t<label for=\"{uid}-lastname\">Last Name: </label>\n\t<input id=\"{uid}-lastname\" type=\"text\" />\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":31,"totalLines":332,"estimatedTokens":1569}}17{"id":"doc-derived_svelte_docs-dd81a118","source":"documentation","title":"$derived • Svelte Docs","url":"https://svelte.dev/docs/svelte/$derived","text":"Example:\n```text\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n\n<button onclick={() => count++}>\n\t{doubled}\n</button>\n\n<p>{count} doubled is {doubled}</p>\n```\n\nExample:\n```text\n<script>\n\tlet numbers = $state([1, 2, 3]);\n\tlet total = $derived.by(() => {\n\t\tlet total = 0;\n\t\tfor (const n of numbers) {\n\t\t\ttotal += n;\n\t\t}\n\t\treturn total;\n\t});\n</script>\n\n<button onclick={() => numbers.push(numbers.length + 1)}>\n\t{numbers.join(' + ')} = {total}\n</button>\n```\n\nExample:\n```text\nlet let total: numbertotal = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await let a: Promise<number>a + let b: numberb);let total: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let a: Promise<number>let b: number\n```\n\nExample:\n```text\nfunction $derived<number>(expression: number): number\nnamespace $derived\n```\n\nExample:\n```text\nlet double = $derived(count * 2);\n```\n\nExample:\n```text\n<script>\n\tlet { post, like } = $props();\n\n\tlet likes = $derived(post.likes);\n\n\tasync function onclick() {\n\t\t// increment the `likes` count immediately...\n\t\tlikes += 1;\n\n\t\t// and tell the server, which will eventually update `post`\n\t\ttry {\n\t\t\tawait like();\n\t\t} catch {\n\t\t\t// failed! roll back the change\n\t\t\tlikes -= 1;\n\t\t}\n\t}\n</script>\n\n<button {onclick}>🧡 {likes}</button>\n```\n\nExample:\n```text\nlet items = function $state<never[]>(initial: never[]): never[] (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state([ /*...*/ ]);\n\nlet let index: numberindex = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\nlet let selected: anyselected = function $derived<any>(expression: any): any\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let items: any[]items[let index: numberindex]);function $state<never[]>(initial: never[]): never[] (+1 overload)\nnamespace $statefunction $state<never[]>(initial: never[]): never[] (+1 overload)\nnamespace $statelet count = $state(0);let index: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);let selected: anyfunction $derived<any>(expression: any): any\nnamespace $derivedfunction $derived<any>(expression: any): any\nnamespace $derived$derived(...)let double = $derived(count * 2);let items: any[]let index: number\n```\n\nExample:\n```text\nfunction $state<never[]>(initial: never[]): never[] (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nfunction $derived<any>(expression: any): any\nnamespace $derived\n```\n\nExample:\n```text\nlet { let a: numbera, let b: numberb, let c: numberc } = function $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}stuff());let a: numberlet b: numberlet c: numberfunction $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derivedfunction $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derived$derived(...)let double = $derived(count * 2);function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}\n```\n\nExample:\n```text\nfunction $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derived\n```\n\nExample:\n```text\nfunction stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}\n```\n\nExample:\n```text\nlet let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}_stuff = function $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}stuff());\nlet let a: numbera = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}_stuff.a: numbera);\nlet let b: numberb = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}_stuff.b: numberb);\nlet let c: numberc = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}_stuff.c: numberc);let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}function $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derivedfunction $derived<{\n    a: number;\n    b: number;\n    c: number;\n}>(expression: {\n    a: number;\n    b: number;\n    c: number;\n}): {\n    a: number;\n    b: number;\n    c: number;\n}\nnamespace $derived$derived(...)let double = $derived(count * 2);function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}function stuff(): {\n    a: number;\n    b: number;\n    c: number;\n}let a: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}a: numberlet b: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}b: numberlet c: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}let _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}c: number\n```\n\nExample:\n```text\nlet _stuff: {\n    a: number;\n    b: number;\n    c: number;\n}\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\tlet large = $derived(count > 10);\n</script>\n\n<button onclick={() => count++}>\n\t{large}\n</button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.139Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":361,"estimatedTokens":2311}}18{"id":"doc-await_svelte_docs-667b16bc","source":"documentation","title":"{#await ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/await","text":"Example:\n```text\n{#await expression}...{:then name}...{:catch name}...{/await}\n```\n\nExample:\n```text\n{#await expression}...{:then name}...{/await}\n```\n\nExample:\n```text\n{#await expression then name}...{/await}\n```\n\nExample:\n```text\n{#await expression catch name}...{/await}\n```\n\nExample:\n```text\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled or not a Promise -->\n\t<p>The value is {value}</p>\n{:catch error}\n\t<!-- promise was rejected -->\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\nExample:\n```text\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled -->\n\t<p>The value is {value}</p>\n{/await}\n```\n\nExample:\n```text\n{#await promise then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\nExample:\n```text\n{#await promise catch error}\n\t<p>The error is {error}</p>\n{/await}\n```\n\nExample:\n```text\n{#await import('./Component.svelte') then { default: Component }}\n\t<Component />\n{/await}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.139Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":67,"estimatedTokens":272}}19{"id":"doc-svelte_element_svelte_docs-63b445b5","source":"documentation","title":"<svelte:element> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-element","text":"Example:\n```text\n<svelte:element this={expression} />\n```\n\nExample:\n```text\n<script>\n\tlet tag = $state('hr');\n</script>\n\n<svelte:element this={tag}>\n\tThis text cannot appear inside an hr element\n</svelte:element>\n```\n\nExample:\n```text\n<svelte:element this={tag} xmlns=\"http://www.w3.org/2000/svg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.139Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":22,"estimatedTokens":80}}20{"id":"doc-use_svelte_docs-bf75e1ed","source":"documentation","title":"use: • Svelte Docs","url":"https://svelte.dev/docs/svelte/use","text":"Example:\n```text\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node) {\n\t\t// the node has been mounted in the DOM\n\n\t\t$effect(() => {\n\t\t\t// setup goes here\n\n\t\t\treturn () => {\n\t\t\t\t// teardown goes here\n\t\t\t};\n\t\t});\n\t}\n</script>\n\n<div use:myaction>...</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Action } from 'svelte/action';\n\n\tconst myaction: Action = (node) => {\n\t\t// the node has been mounted in the DOM\n\n\t\t$effect(() => {\n\t\t\t// setup goes here\n\n\t\t\treturn () => {\n\t\t\t\t// teardown goes here\n\t\t\t};\n\t\t});\n\t};\n</script>\n\n<div use:myaction>...</div>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node, data) {\n\t\t// ...\n\t}\n</script>\n\n<div use:myaction={data}>...</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Action } from 'svelte/action';\n\n\tconst myaction: Action = (node, data) => {\n\t\t// ...\n\t};\n</script>\n\n<div use:myaction={data}>...</div>\n```\n\nExample:\n```text\n<script>\n\t/**\n\t * @type {import('svelte/action').Action<\n\t * \tHTMLDivElement,\n\t * \tundefined,\n\t * \t{\n\t * \t\tonswiperight: (e: CustomEvent) => void;\n\t * \t\tonswipeleft: (e: CustomEvent) => void;\n\t * \t\t// ...\n\t * \t}\n\t * >}\n\t */\n\tfunction gestures(node) {\n\t\t$effect(() => {\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swipeleft'));\n\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t}\n</script>\n\n<div\n\tuse:gestures\n\tonswipeleft={next}\n\tonswiperight={prev}\n>...</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Action } from 'svelte/action';\n\n\tconst gestures: Action<\n\t\tHTMLDivElement,\n\t\tundefined,\n\t\t{\n\t\t\tonswiperight: (e: CustomEvent) => void;\n\t\t\tonswipeleft: (e: CustomEvent) => void;\n\t\t\t// ...\n\t\t}\n\t> = (node) => {\n\t\t$effect(() => {\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swipeleft'));\n\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t};\n</script>\n\n<div\n\tuse:gestures\n\tonswipeleft={next}\n\tonswiperight={prev}\n>...</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.139Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":130,"estimatedTokens":495}}21{"id":"doc-class_svelte_docs-e599ae3c","source":"documentation","title":"class • Svelte Docs","url":"https://svelte.dev/docs/svelte/class","text":"Example:\n```text\n<div class={large ? 'large' : 'small'}>...</div>\n```\n\nExample:\n```text\n<script>\n\tlet { cool } = $props();\n</script>\n\n<!-- results in `class=\"cool\"` if `cool` is truthy,\n\t `class=\"lame\"` otherwise -->\n<div class={{ cool, lame: !cool }}>...</div>\n```\n\nExample:\n```text\n<!-- if `faded` and `large` are both truthy, results in\n\t `class=\"saturate-0 opacity-50 scale-200\"` -->\n<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>\n```\n\nExample:\n```text\n<script>\n\tlet props = $props();\n</script>\n\n<button {...props} class={['cool-button', props.class]}>\n\t{@render props.children?.()}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet props = $props();\n</script>\n\n<button {...props} class={['cool-button', props.class]}>\n\t{@render props.children?.()}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport Button from './Button.svelte';\n\tlet useTailwind = $state(false);\n</script>\n\n<Button\n\tonclick={() => useTailwind = true}\n\tclass={{ 'bg-blue-700 sm:w-1/2': useTailwind }}\n>\n\tAccept the inevitability of Tailwind\n</Button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Button from './Button.svelte';\n\tlet useTailwind = $state(false);\n</script>\n\n<Button\n\tonclick={() => useTailwind = true}\n\tclass={{ 'bg-blue-700 sm:w-1/2': useTailwind }}\n>\n\tAccept the inevitability of Tailwind\n</Button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { ClassValue } from 'svelte/elements';\n\n\tconst props: { class: ClassValue } = $props();\n</script>\n\n<div class={['original', props.class]}>...</div>\n```\n\nExample:\n```text\n<!-- These are equivalent -->\n<div class={{ cool, lame: !cool }}>...</div>\n<div class:cool={cool} class:lame={!cool}>...</div>\n```\n\nExample:\n```text\n<div class:cool class:lame={!cool}>...</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":99,"estimatedTokens":441}}22{"id":"doc-svelte_document_svelte_docs-b855ef39","source":"documentation","title":"<svelte:document> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-document","text":"Example:\n```text\n<svelte:document onevent={handler} />\n```\n\nExample:\n```text\n<svelte:document bind:prop={value} />\n```\n\nExample:\n```text\n<svelte:document onvisibilitychange={handleVisibilityChange} {@attach someAttachment} />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":61}}23{"id":"doc-svelte_options_svelte_docs-cf74fbbb","source":"documentation","title":"<svelte:options> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-options","text":"Example:\n```text\n<svelte:options option={value} />\n```\n\nExample:\n```text\n<svelte:options customElement=\"my-custom-element\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":36}}24{"id":"doc-let_const_svelte_docs-a26ce2e1","source":"documentation","title":"{let/const ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/declaration-tags","text":"Example:\n```text\n<script>\n\tlet boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];\n</script>\n\n{#each boxes as box}\n\t{const area = box.width * box.height}\n\t{const label = `${box.width} ⨉ ${box.height} = ${area}`}\n\n\t<p>{label}</p>\n{/each}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];\n</script>\n\n{#each boxes as box}\n\t{const area = box.width * box.height}\n\t{const label = `${box.width} ⨉ ${box.height} = ${area}`}\n\n\t<p>{label}</p>\n{/each}\n```\n\nExample:\n```text\n<script>\n\tlet user = $state({ name: 'Svelte' });\n\tlet editing = $state(false);\n</script>\n\n<p>Hello {user.name}</p>\n<button onclick={() => editing = true}>edit name</button>\n\n{#if editing}\n\t{let name = $state(user.name)}\n\t{const greeting = $derived(`Hello ${name}`)}\n\n\t<hr>\n\t<input bind:value={name} />\n\t<p>{greeting}</p>\n\n\t<button onclick={() => {\n\t\tuser.name = name;\n\t\tediting = false;\n\t}}>save</button>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet user = $state({ name: 'Svelte' });\n\tlet editing = $state(false);\n</script>\n\n<p>Hello {user.name}</p>\n<button onclick={() => editing = true}>edit name</button>\n\n{#if editing}\n\t{let name = $state(user.name)}\n\t{const greeting = $derived(`Hello ${name}`)}\n\n\t<hr>\n\t<input bind:value={name} />\n\t<p>{greeting}</p>\n\n\t<button onclick={() => {\n\t\tuser.name = name;\n\t\tediting = false;\n\t}}>save</button>\n{/if}\n```\n\nExample:\n```text\n{const hello = 'hello'}\n{hello} <!-- 'hello' -->\n<div>\n\t{const hello = 'hi'}\n\t{hello} <!-- 'hi' -->\n\t<div>\n\t\t{hello} <!-- 'hi' -->\n\t</div>\n</div>\n{hello} <!-- 'hello' -->\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":93,"estimatedTokens":400}}25{"id":"doc-svelte_body_svelte_docs-69c0519c","source":"documentation","title":"<svelte:body> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-body","text":"Example:\n```text\n<svelte:body onevent={handler} />\n```\n\nExample:\n```text\n<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":47}}26{"id":"doc-scoped_styles_svelte_docs-f0f295f9","source":"documentation","title":"Scoped styles • Svelte Docs","url":"https://svelte.dev/docs/svelte/scoped-styles","text":"Example:\n```text\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\nExample:\n```text\n<style>\n\t.bouncy {\n\t\tanimation: bounce 10s;\n\t}\n\n\t/* these keyframes are only accessible inside this component */\n\t@keyframes bounce {\n\t\t/* ... */\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":80}}27{"id":"doc-svelte_head_svelte_docs-04512dd5","source":"documentation","title":"<svelte:head> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-head","text":"Example:\n```text\n<svelte:head>...</svelte:head>\n```\n\nExample:\n```text\n<svelte:head>\n\t<title>Hello world!</title>\n\t<meta name=\"description\" content=\"This is where the description goes for SEO\" />\n</svelte:head>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":14,"estimatedTokens":57}}28{"id":"doc-effect_svelte_docs-9f3438e2","source":"documentation","title":"$effect • Svelte Docs","url":"https://svelte.dev/docs/svelte/$effect","text":"Example:\n```text\n<script>\n\tlet size = $state(50);\n\tlet color = $state('#ff3e00');\n\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst context = canvas.getContext('2d');\n\t\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t// this will re-run whenever `color` or `size` change\n\t\tcontext.fillStyle = color;\n\t\tcontext.fillRect(0, 0, size, size);\n\t});\n</script>\n\n<canvas bind:this={canvas} width=\"100\" height=\"100\"></canvas>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\tlet milliseconds = $state(1000);\n\n\t$effect(() => {\n\t\t// This will be recreated whenever `milliseconds` changes\n\t\tconst interval = setInterval(() => {\n\t\t\tcount += 1;\n\t\t}, milliseconds);\n\n\t\treturn () => {\n\t\t\t// if a teardown function is provided, it will run\n\t\t\t// a) immediately before the effect re-runs\n\t\t\t// b) when the component is destroyed\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<h1>{count}</h1>\n\n<button onclick={() => (milliseconds *= 2)}>slower</button>\n<button onclick={() => (milliseconds /= 2)}>faster</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet count = $state(0);\n\tlet milliseconds = $state(1000);\n\n\t$effect(() => {\n\t\t// This will be recreated whenever `milliseconds` changes\n\t\tconst interval = setInterval(() => {\n\t\t\tcount += 1;\n\t\t}, milliseconds);\n\n\t\treturn () => {\n\t\t\t// if a teardown function is provided, it will run\n\t\t\t// a) immediately before the effect re-runs\n\t\t\t// b) when the component is destroyed\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<h1>{count}</h1>\n\n<button onclick={() => (milliseconds *= 2)}>slower</button>\n<button onclick={() => (milliseconds /= 2)}>faster</button>\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\tconst const context: CanvasRenderingContext2Dcontext = let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}canvas.function getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2DgetContext('2d');\n\tconst context: CanvasRenderingContext2Dcontext.CanvasRect.clearRect(x: number, y: number, w: number, h: number): voidMDN Reference\nclearRect(0, 0, let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}canvas.width: numberwidth, let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}canvas.height: numberheight);\n\n\t// this will re-run whenever `color` changes...\n\tconst context: CanvasRenderingContext2Dcontext.CanvasFillStrokeStyles.fillStyle: string | CanvasGradient | CanvasPatternMDN Reference\nfillStyle = let color: stringcolor;\n\n\tfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules execution of a one-time callback after delay milliseconds.\nThe callback will likely not be invoked in precisely delay milliseconds.\nNode.js makes no guarantees about the exact timing of when callbacks will fire,\nnor of their ordering. The callback will be called as close as possible to the\ntime specified.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setTimeout().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearTimeout()setTimeout(() => {\n\t\t// ...but not when `size` changes\n\t\tconst context: CanvasRenderingContext2Dcontext.CanvasRect.fillRect(x: number, y: number, w: number, h: number): voidMDN Reference\nfillRect(0, 0, let size: numbersize, let size: numbersize);\n\t}, 0);\n});function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));const context: CanvasRenderingContext2Dlet canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}function getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2Dconst context: CanvasRenderingContext2DCanvasRect.clearRect(x: number, y: number, w: number, h: number): voidlet canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}width: numberlet canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}let canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}height: numberconst context: CanvasRenderingContext2DCanvasFillStrokeStyles.fillStyle: string | CanvasGradient | CanvasPatternlet color: stringfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaycallbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setTimeout()callback1callbackclearTimeout()const context: CanvasRenderingContext2DCanvasRect.fillRect(x: number, y: number, w: number, h: number): voidlet size: numberlet size: number\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\nExample:\n```text\nlet canvas: {\n    width: number;\n    height: number;\n    getContext(type: \"2d\", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n}\n```\n\nExample:\n```text\n<script>\n\tlet state = $state({ value: 0 });\n\tlet derived = $derived({ value: state.value * 2 });\n\n\t// this will run once, because `state` is never reassigned (only mutated)\n\t$effect(() => {\n\t\tstate;\n\t});\n\n\t// this will run whenever `state.value` changes...\n\t$effect(() => {\n\t\tstate.value;\n\t});\n\n\t// ...and so will this, because `derived` is a new object each time\n\t$effect(() => {\n\t\tderived;\n\t});\n</script>\n\n<button onclick={() => (state.value += 1)}>\n\t{state.value}\n</button>\n\n<p>{state.value} doubled is {derived.value}</p>\n```\n\nExample:\n```text\nimport function confetti(opts?: ConfettiOptions): voidconfetti from 'canvas-confetti';\n\nlet let condition: booleancondition = function $state<true>(initial: true): true (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(true);\nlet let color: stringcolor = function $state<\"#ff3e00\">(initial: \"#ff3e00\"): \"#ff3e00\" (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state('#ff3e00');\n\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\tif (let condition: truecondition) {\n\t\tfunction confetti(opts?: ConfettiOptions): voidconfetti({ ConfettiOptions.colors: string[]colors: [let color: stringcolor] });\n\t} else {\n\t\tfunction confetti(opts?: ConfettiOptions): voidconfetti();\n\t}\n});function confetti(opts?: ConfettiOptions): voidlet condition: booleanfunction $state<true>(initial: true): true (+1 overload)\nnamespace $statefunction $state<true>(initial: true): true (+1 overload)\nnamespace $statelet count = $state(0);let color: stringfunction $state<\"#ff3e00\">(initial: \"#ff3e00\"): \"#ff3e00\" (+1 overload)\nnamespace $statefunction $state<\"#ff3e00\">(initial: \"#ff3e00\"): \"#ff3e00\" (+1 overload)\nnamespace $statelet count = $state(0);function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let condition: truefunction confetti(opts?: ConfettiOptions): voidConfettiOptions.colors: string[]let color: stringfunction confetti(opts?: ConfettiOptions): void\n```\n\nExample:\n```text\nfunction $state<true>(initial: true): true (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<\"#ff3e00\">(initial: \"#ff3e00\"): \"#ff3e00\" (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\n<script>\n\timport { tick } from 'svelte';\n\n\tlet div = $state();\n\tlet messages = $state([]);\n\n\t// ...\n\n\t$effect.pre(() => {\n\t\tif (!div) return; // not yet mounted\n\n\t\t// reference `messages` array length so that this code re-runs whenever it changes\n\t\tmessages.length;\n\n\t\t// autoscroll when new messages are added\n\t\tif (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {\n\t\t\ttick().then(() => {\n\t\t\t\tdiv.scrollTo(0, div.scrollHeight);\n\t\t\t});\n\t\t}\n\t});\n</script>\n\n<div bind:this={div}>\n\t{#each messages as message}\n\t\t<p>{message}</p>\n\t{/each}\n</div>\n```\n\nExample:\n```text\n<script>\n\tconsole.log('in component setup:', $effect.tracking()); // false\n\n\t$effect(() => {\n\t\tconsole.log('in effect:', $effect.tracking()); // true\n\t});\n</script>\n\n<p>in template: {$effect.tracking()}</p> <!-- true -->\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tconsole.log('in component setup:', $effect.tracking()); // false\n\n\t$effect(() => {\n\t\tconsole.log('in effect:', $effect.tracking()); // true\n\t});\n</script>\n\n<p>in template: {$effect.tracking()}</p> <!-- true -->\n```\n\nExample:\n```text\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<button onclick={() => a++}>a++</button>\n<button onclick={() => b++}>b++</button>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n\n{#if $effect.pending()}\n\t<p>pending promises: {$effect.pending()}</p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<button onclick={() => a++}>a++</button>\n<button onclick={() => b++}>b++</button>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n\n{#if $effect.pending()}\n\t<p>pending promises: {$effect.pending()}</p>\n{/if}\n```\n\nExample:\n```text\nconst const destroy: () => voiddestroy = namespace $effect\nfunction $effect(fn: () => void | (() => void)): voidRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect.function $effect.root(fn: () => void | (() => void)): () => voidThe $effect.root rune is an advanced feature that creates a non-tracked scope that doesn’t auto-cleanup. This is useful for\nnested effects that you want to manually control. This rune also allows for creation of effects outside of the component\ninitialisation phase.\nExample:\n<script>\n  let count = $state(0);\n\n  const cleanup = $effect.root(() => {\n\t$effect(() => {\n\t  console.log(count);\n\t})\n\n\treturn () => {\n\t  console.log('effect root cleanup');\n\t}\n  });\n</script>\n\n<button onclick={() => cleanup()}>cleanup</button>@see{@link https://svelte.dev/docs/svelte/$effect#$effect.root Documentation}root(() => {\n\tfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t\t// setup\n\t});\n\n\treturn () => {\n\t\t// cleanup\n\t};\n});\n\n// later...\nconst destroy: () => voiddestroy();const destroy: () => voidnamespace $effect\nfunction $effect(fn: () => void | (() => void)): voidnamespace $effect\nfunction $effect(fn: () => void | (() => void)): void$state$derived$effect(() => console.log('The count is now ' + count));function $effect.root(fn: () => void | (() => void)): () => void$effect.root<script>\n  let count = $state(0);\n\n  const cleanup = $effect.root(() => {\n\t$effect(() => {\n\t  console.log(count);\n\t})\n\n\treturn () => {\n\t  console.log('effect root cleanup');\n\t}\n  });\n</script>\n\n<button onclick={() => cleanup()}>cleanup</button>function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));const destroy: () => void\n```\n\nExample:\n```text\nnamespace $effect\nfunction $effect(fn: () => void | (() => void)): void\n```\n\nExample:\n```text\n<script>\n  let count = $state(0);\n\n  const cleanup = $effect.root(() => {\n\t$effect(() => {\n\t  console.log(count);\n\t})\n\n\treturn () => {\n\t  console.log('effect root cleanup');\n\t}\n  });\n</script>\n\n<button onclick={() => cleanup()}>cleanup</button>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\tlet doubled = $state();\n\n\t// don't do this!\n\t$effect(() => {\n\t\tdoubled = count * 2;\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n```\n\nExample:\n```text\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $state(total);\n\n\t$effect(() => {\n\t\tleft = total - spent;\n\t});\n\n\t$effect(() => {\n\t\tspent = total - left;\n\t});\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={left} max={total} />\n\t{left}/{total} left\n</label>\n\n<style>\n\tlabel {\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $state(total);\n\n\t$effect(() => {\n\t\tleft = total - spent;\n\t});\n\n\t$effect(() => {\n\t\tspent = total - left;\n\t});\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={left} max={total} />\n\t{left}/{total} left\n</label>\n\n<style>\n\tlabel {\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $derived(total - spent);\n\n\tfunction updateLeft(left) {\n\t\tspent = total - left;\n\t}\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={() => left, updateLeft} max={total} />\n\t{left}/{total} left\n</label>\n\n<style>\n\tlabel {\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $derived(total - spent);\n\n\tfunction updateLeft(left) {\n\t\tspent = total - left;\n\t}\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={() => left, updateLeft} max={total} />\n\t{left}/{total} left\n</label>\n\n<style>\n\tlabel {\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.141Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":590,"estimatedTokens":4274}}29{"id":"doc-animate_svelte_docs-685c048f","source":"documentation","title":"animate: • Svelte Docs","url":"https://svelte.dev/docs/svelte/animate","text":"Example:\n```text\n<!-- When `list` is reordered the animation will run -->\n{#each list as item, index (item)}\n\t<li animate:flip>{item}</li>\n{/each}\n```\n\nExample:\n```text\n{#each list as item, index (item)}\n\t<li animate:flip={{ delay: 500 }}>{item}</li>\n{/each}\n```\n\nExample:\n```text\nanimation = (node: HTMLElementnode: HTMLElement, { from: anyfrom: type DOMRect: anyDOMRect, to: anyto: type DOMRect: anyDOMRect } , params: anyparams: any) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: numbert: number) => number,\n\tcss?: (t: numbert: number, u: numberu: number) => string,\n\ttick?: (t: numbert: number, u: numberu: number) => void\n}node: HTMLElementfrom: anytype DOMRect: anyto: anytype DOMRect: anyparams: anyt: numbert: numberu: numbert: numberu: number\n```\n\nExample:\n```text\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\tcss: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { cubicOut } from 'svelte/easing';\n\n\tfunction whizz(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, params: any) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\tcss: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\nExample:\n```text\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\ttick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { cubicOut } from 'svelte/easing';\n\n\tfunction whizz(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, params: any) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\ttick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.141Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":137,"estimatedTokens":773}}30{"id":"doc-state_svelte_docs-a2c18b92","source":"documentation","title":"$state • Svelte Docs","url":"https://svelte.dev/docs/svelte/$state","text":"Example:\n```text\n<script>\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\nlet let todos: {\n    done: boolean;\n    text: string;\n}[]todos = function $state<{\n    done: boolean;\n    text: string;\n}[]>(initial: {\n    done: boolean;\n    text: string;\n}[]): {\n    done: boolean;\n    text: string;\n}[] (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state([\n\t{\n\t\tdone: booleandone: false,\n\t\ttext: stringtext: 'add more todos'\n\t}\n]);let todos: {\n    done: boolean;\n    text: string;\n}[]let todos: {\n    done: boolean;\n    text: string;\n}[]function $state<{\n    done: boolean;\n    text: string;\n}[]>(initial: {\n    done: boolean;\n    text: string;\n}[]): {\n    done: boolean;\n    text: string;\n}[] (+1 overload)\nnamespace $statefunction $state<{\n    done: boolean;\n    text: string;\n}[]>(initial: {\n    done: boolean;\n    text: string;\n}[]): {\n    done: boolean;\n    text: string;\n}[] (+1 overload)\nnamespace $statelet count = $state(0);done: booleantext: string\n```\n\nExample:\n```text\nlet todos: {\n    done: boolean;\n    text: string;\n}[]\n```\n\nExample:\n```text\nfunction $state<{\n    done: boolean;\n    text: string;\n}[]>(initial: {\n    done: boolean;\n    text: string;\n}[]): {\n    done: boolean;\n    text: string;\n}[] (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos[0].done: booleandone = !module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos[0].done: booleandone;module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]done: booleanmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]done: boolean\n```\n\nExample:\n```text\nmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]\n```\n\nExample:\n```text\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos.Array<{ done: boolean; text: string; }>.push(...items: {\n    done: boolean;\n    text: string;\n}[]): numberAppends new elements to the end of an array, and returns the new length of the array.\n@paramitems New elements to add to the array.push({\n\tdone: booleandone: false,\n\ttext: stringtext: 'eat lunch'\n});let todos: {\n    done: boolean;\n    text: string;\n}[]let todos: {\n    done: boolean;\n    text: string;\n}[]Array<{ done: boolean; text: string; }>.push(...items: {\n    done: boolean;\n    text: string;\n}[]): numberArray<{ done: boolean; text: string; }>.push(...items: {\n    done: boolean;\n    text: string;\n}[]): numberdone: booleantext: string\n```\n\nExample:\n```text\nArray<{ done: boolean; text: string; }>.push(...items: {\n    done: boolean;\n    text: string;\n}[]): number\n```\n\nExample:\n```text\nlet { let done: booleandone, let text: stringtext } = module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos[0];\n\n// this will not affect the value of `done`\nmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos[0].done: booleandone = !module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]todos[0].done: booleandone;let done: booleanlet text: stringmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]done: booleanmodule todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]module todos\nlet todos: {\n    done: boolean;\n    text: string;\n}[]done: boolean\n```\n\nExample:\n```text\nclass class TodoTodo {\n\tTodo.done: booleandone = function $state<false>(initial: false): false (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(false);\n\n\tconstructor(text) {\n\t\tthis.Todo.text: anytext = function $state<any>(initial: any): any (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(text: anytext);\n\t}\n\n\tTodo.reset(): voidreset() {\n\t\tthis.Todo.text: anytext = '';\n\t\tthis.Todo.done: booleandone = false;\n\t}\n}class TodoTodo.done: booleanfunction $state<false>(initial: false): false (+1 overload)\nnamespace $statefunction $state<false>(initial: false): false (+1 overload)\nnamespace $statelet count = $state(0);Todo.text: anyfunction $state<any>(initial: any): any (+1 overload)\nnamespace $statefunction $state<any>(initial: any): any (+1 overload)\nnamespace $statelet count = $state(0);text: anyTodo.reset(): voidTodo.text: anyTodo.done: boolean\n```\n\nExample:\n```text\nfunction $state<false>(initial: false): false (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nfunction $state<any>(initial: any): any (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nclass class TodoTodo {\n\tTodo.done: booleandone = function $state<false>(initial: false): false (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(false);\n\n\tconstructor(text) {\n\t\tthis.Todo.text: anytext = function $state<any>(initial: any): any (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(text: anytext);\n\t}\n\n\tTodo.reset: () => voidreset = () => {\n\t\tthis.Todo.text: anytext = '';\n\t\tthis.Todo.done: booleandone = false;\n\t}\n}class TodoTodo.done: booleanfunction $state<false>(initial: false): false (+1 overload)\nnamespace $statefunction $state<false>(initial: false): false (+1 overload)\nnamespace $statelet count = $state(0);Todo.text: anyfunction $state<any>(initial: any): any (+1 overload)\nnamespace $statefunction $state<any>(initial: any): any (+1 overload)\nnamespace $statelet count = $state(0);text: anyTodo.reset: () => voidTodo.text: anyTodo.done: boolean\n```\n\nExample:\n```text\nlet let person: {\n    name: string;\n    age: number;\n}person = namespace $state\nfunction $state<T>(initial: T): T (+1 overload)Declares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state.function $state.raw<{\n    name: string;\n    age: number;\n}>(initial: {\n    name: string;\n    age: number;\n}): {\n    name: string;\n    age: number;\n} (+1 overload)Declares state that is not made deeply reactive — instead of mutating it,\nyou must reassign it.\nExample:\n<script>\n  let items = $state.raw([0]);\n\n  const addItem = () => {\n\titems = [...items, items.length];\n  };\n</script>\n\n<button onclick={addItem}>\n  {items.join(', ')}\n</button>@see{@link https://svelte.dev/docs/svelte/$state#$state.raw Documentation}@paraminitial The initial valueraw({\n\tname: stringname: 'Heraclitus',\n\tage: numberage: 49\n});\n\n// this will have no effect\nlet person: {\n    name: string;\n    age: number;\n}person.age: numberage += 1;\n\n// this will work, because we're creating a new person\nlet person: {\n    name: string;\n    age: number;\n}person = {\n\tname: stringname: 'Heraclitus',\n\tage: numberage: 50\n};let person: {\n    name: string;\n    age: number;\n}let person: {\n    name: string;\n    age: number;\n}namespace $state\nfunction $state<T>(initial: T): T (+1 overload)namespace $state\nfunction $state<T>(initial: T): T (+1 overload)let count = $state(0);function $state.raw<{\n    name: string;\n    age: number;\n}>(initial: {\n    name: string;\n    age: number;\n}): {\n    name: string;\n    age: number;\n} (+1 overload)function $state.raw<{\n    name: string;\n    age: number;\n}>(initial: {\n    name: string;\n    age: number;\n}): {\n    name: string;\n    age: number;\n} (+1 overload)<script>\n  let items = $state.raw([0]);\n\n  const addItem = () => {\n\titems = [...items, items.length];\n  };\n</script>\n\n<button onclick={addItem}>\n  {items.join(', ')}\n</button>name: stringage: numberlet person: {\n    name: string;\n    age: number;\n}let person: {\n    name: string;\n    age: number;\n}age: numberlet person: {\n    name: string;\n    age: number;\n}let person: {\n    name: string;\n    age: number;\n}name: stringage: number\n```\n\nExample:\n```text\nlet person: {\n    name: string;\n    age: number;\n}\n```\n\nExample:\n```text\nnamespace $state\nfunction $state<T>(initial: T): T (+1 overload)\n```\n\nExample:\n```text\nfunction $state.raw<{\n    name: string;\n    age: number;\n}>(initial: {\n    name: string;\n    age: number;\n}): {\n    name: string;\n    age: number;\n} (+1 overload)\n```\n\nExample:\n```text\n<script>\n  let items = $state.raw([0]);\n\n  const addItem = () => {\n\titems = [...items, items.length];\n  };\n</script>\n\n<button onclick={addItem}>\n  {items.join(', ')}\n</button>\n```\n\nExample:\n```text\n<script>\n\tlet counter = $state({ count: 0 });\n\n\tfunction onclick() {\n\t\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\t\tconsole.log($state.snapshot(counter));\n\t}\n</script>\n```\n\nExample:\n```text\n/**\n * @param {number} a\n * @param {number} b\n */\nfunction function add(a: number, b: number): number@parama @paramb add(a: number@parama a, b: number@paramb b) {\n\treturn a: number@parama a + b: number@paramb b;\n}\n\nlet let a: numbera = 1;\nlet let b: numberb = 2;\nlet let total: numbertotal = function add(a: number, b: number): number@parama @paramb add(let a: numbera, let b: numberb);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: numbertotal); // 3\n\nlet a: numbera = 3;\nlet b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: numbertotal); // still 3!function add(a: number, b: number): numbera: numberb: numbera: numberb: numberlet a: numberlet b: numberlet total: numberfunction add(a: number, b: number): numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: number\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nfunction function add(a: number, b: number): numberadd(a: numbera: number, b: numberb: number) {\n\treturn a: numbera + b: numberb;\n}\n\nlet let a: numbera = 1;\nlet let b: numberb = 2;\nlet let total: numbertotal = function add(a: number, b: number): numberadd(let a: numbera, let b: numberb);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: numbertotal); // 3\n\nlet a: numbera = 3;\nlet b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: numbertotal); // still 3!function add(a: number, b: number): numbera: numberb: numbera: numberb: numberlet a: numberlet b: numberlet total: numberfunction add(a: number, b: number): numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: number\n```\n\nExample:\n```text\n/**\n * @param {() => number} getA\n * @param {() => number} getB\n */\nfunction function add(getA: () => number, getB: () => number): () => number@paramgetA @paramgetB add(getA: () => number@paramgetA getA, getB: () => number@paramgetB getB) {\n\treturn () => getA: () => number@paramgetA getA() + getB: () => number@paramgetB getB();\n}\n\nlet let a: numbera = 1;\nlet let b: numberb = 2;\nlet let total: () => numbertotal = function add(getA: () => number, getB: () => number): () => number@paramgetA @paramgetB add(() => let a: numbera, () => let b: numberb);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: () => numbertotal()); // 3\n\nlet a: numbera = 3;\nlet b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: () => numbertotal()); // 7function add(getA: () => number, getB: () => number): () => numbergetA: () => numbergetB: () => numbergetA: () => numbergetB: () => numberlet a: numberlet b: numberlet total: () => numberfunction add(getA: () => number, getB: () => number): () => numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: () => numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: () => number\n```\n\nExample:\n```text\nfunction function add(getA: () => number, getB: () => number): () => numberadd(getA: () => numbergetA: () => number, getB: () => numbergetB: () => number) {\n\treturn () => getA: () => numbergetA() + getB: () => numbergetB();\n}\n\nlet let a: numbera = 1;\nlet let b: numberb = 2;\nlet let total: () => numbertotal = function add(getA: () => number, getB: () => number): () => numberadd(() => let a: numbera, () => let b: numberb);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: () => numbertotal()); // 3\n\nlet a: numbera = 3;\nlet b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: () => numbertotal()); // 7function add(getA: () => number, getB: () => number): () => numbergetA: () => numbergetB: () => numbergetA: () => numbergetB: () => numberlet a: numberlet b: numberlet total: () => numberfunction add(getA: () => number, getB: () => number): () => numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: () => numberlet a: numberlet b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: () => number\n```\n\nExample:\n```text\nlet let a: numbera = function $state<1>(initial: 1): 1 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(1);\nlet let b: numberb = function $state<2>(initial: 2): 2 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(2);let a: numberfunction $state<1>(initial: 1): 1 (+1 overload)\nnamespace $statefunction $state<1>(initial: 1): 1 (+1 overload)\nnamespace $statelet count = $state(0);let b: numberfunction $state<2>(initial: 2): 2 (+1 overload)\nnamespace $statefunction $state<2>(initial: 2): 2 (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<1>(initial: 1): 1 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nfunction $state<2>(initial: 2): 2 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\n/**\n * @param {{ a: number, b: number }} input\n */\nfunction function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}@paraminput add(input: {\n    a: number;\n    b: number;\n}@paraminput input) {\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn input: {\n    a: number;\n    b: number;\n}@paraminput input.a: numbera + input: {\n    a: number;\n    b: number;\n}@paraminput input.b: numberb;\n\t\t}\n\t};\n}\n\nlet module input\nlet input: {\n    a: number;\n    b: number;\n}input = function $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ a: numbera: 1, b: numberb: 2 });\nlet let total: {\n    readonly value: number;\n}total = function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}@paraminput add(module input\nlet input: {\n    a: number;\n    b: number;\n}input);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: {\n    readonly value: number;\n}total.value: numbervalue); // 3\n\nmodule input\nlet input: {\n    a: number;\n    b: number;\n}input.a: numbera = 3;\nmodule input\nlet input: {\n    a: number;\n    b: number;\n}input.b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: {\n    readonly value: number;\n}total.value: numbervalue); // 7function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}input: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}value: numberinput: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}a: numberinput: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}b: numbermodule input\nlet input: {\n    a: number;\n    b: number;\n}module input\nlet input: {\n    a: number;\n    b: number;\n}function $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $statefunction $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $statelet count = $state(0);a: numberb: numberlet total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}module input\nlet input: {\n    a: number;\n    b: number;\n}module input\nlet input: {\n    a: number;\n    b: number;\n}var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}value: numbermodule input\nlet input: {\n    a: number;\n    b: number;\n}module input\nlet input: {\n    a: number;\n    b: number;\n}a: numbermodule input\nlet input: {\n    a: number;\n    b: number;\n}module input\nlet input: {\n    a: number;\n    b: number;\n}b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}value: number\n```\n\nExample:\n```text\nfunction add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}\n```\n\nExample:\n```text\ninput: {\n    a: number;\n    b: number;\n}\n```\n\nExample:\n```text\nmodule input\nlet input: {\n    a: number;\n    b: number;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet total: {\n    readonly value: number;\n}\n```\n\nExample:\n```text\nfunction function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}add(input: {\n    a: number;\n    b: number;\n}input: { a: numbera: number, b: numberb: number }) {\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn input: {\n    a: number;\n    b: number;\n}input.a: numbera + input: {\n    a: number;\n    b: number;\n}input.b: numberb;\n\t\t}\n\t};\n}\n\nlet let input: {\n    a: number;\n    b: number;\n}input = function $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ a: numbera: 1, b: numberb: 2 });\nlet let total: {\n    readonly value: number;\n}total = function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}add(let input: {\n    a: number;\n    b: number;\n}input);\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: {\n    readonly value: number;\n}total.value: numbervalue); // 3\n\nlet input: {\n    a: number;\n    b: number;\n}input.a: numbera = 3;\nlet input: {\n    a: number;\n    b: number;\n}input.b: numberb = 4;\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(let total: {\n    readonly value: number;\n}total.value: numbervalue); // 7function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}input: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}a: numberb: numbervalue: numberinput: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}a: numberinput: {\n    a: number;\n    b: number;\n}input: {\n    a: number;\n    b: number;\n}b: numberlet input: {\n    a: number;\n    b: number;\n}let input: {\n    a: number;\n    b: number;\n}function $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $statefunction $state<{\n    a: number;\n    b: number;\n}>(initial: {\n    a: number;\n    b: number;\n}): {\n    a: number;\n    b: number;\n} (+1 overload)\nnamespace $statelet count = $state(0);a: numberb: numberlet total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}function add(input: {\n    a: number;\n    b: number;\n}): {\n    readonly value: number;\n}let input: {\n    a: number;\n    b: number;\n}let input: {\n    a: number;\n    b: number;\n}var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}value: numberlet input: {\n    a: number;\n    b: number;\n}let input: {\n    a: number;\n    b: number;\n}a: numberlet input: {\n    a: number;\n    b: number;\n}let input: {\n    a: number;\n    b: number;\n}b: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let total: {\n    readonly value: number;\n}let total: {\n    readonly value: number;\n}value: number\n```\n\nExample:\n```text\nlet input: {\n    a: number;\n    b: number;\n}\n```\n\nExample:\n```text\nexport let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\n\nexport function function increment(): voidincrement() {\n\tlet count: numbercount += 1;\n}let count: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);function increment(): voidlet count: number\n```\n\nExample:\n```text\nfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nexport let let count: Signal<number>count = const $: Svelte$.Svelte.state<number>(value?: number | undefined): Signal<number>state(0);\n\nexport function function increment(): voidincrement() {\n\tconst $: Svelte$.Svelte.set<number>(source: Signal<number>, value: number): voidset(let count: Signal<number>count, const $: Svelte$.Svelte.get<number>(source: Signal<number>): numberget(let count: Signal<number>count) + 1);\n}let count: Signal<number>const $: SvelteSvelte.state<number>(value?: number | undefined): Signal<number>function increment(): voidconst $: SvelteSvelte.set<number>(source: Signal<number>, value: number): voidlet count: Signal<number>const $: SvelteSvelte.get<number>(source: Signal<number>): numberlet count: Signal<number>\n```\n\nExample:\n```text\nimport { let count: numbercount } from './state.svelte.js';\n\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(typeof let count: numbercount); // 'object', not 'number'let count: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()let count: number\n```\n\nExample:\n```text\n// This is allowed — since we're updating\n// `counter.count` rather than `counter`,\n// Svelte doesn't wrap it in `$.state`\nexport const const counter: {\n    count: number;\n}counter = function $state<{\n    count: number;\n}>(initial: {\n    count: number;\n}): {\n    count: number;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({\n\tcount: numbercount: 0\n});\n\nexport function function increment(): voidincrement() {\n\tconst counter: {\n    count: number;\n}counter.count: numbercount += 1;\n}const counter: {\n    count: number;\n}const counter: {\n    count: number;\n}function $state<{\n    count: number;\n}>(initial: {\n    count: number;\n}): {\n    count: number;\n} (+1 overload)\nnamespace $statefunction $state<{\n    count: number;\n}>(initial: {\n    count: number;\n}): {\n    count: number;\n} (+1 overload)\nnamespace $statelet count = $state(0);count: numberfunction increment(): voidconst counter: {\n    count: number;\n}const counter: {\n    count: number;\n}count: number\n```\n\nExample:\n```text\nconst counter: {\n    count: number;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    count: number;\n}>(initial: {\n    count: number;\n}): {\n    count: number;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\n\nexport function function getCount(): numbergetCount() {\n\treturn let count: numbercount;\n}\n\nexport function function increment(): voidincrement() {\n\tlet count: numbercount += 1;\n}let count: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);function getCount(): numberlet count: numberfunction increment(): voidlet count: number\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":46,"totalLines":2224,"estimatedTokens":19768}}31{"id":"doc-vitest_svelte_cli_docs-fab5939d","source":"documentation","title":"vitest • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/vitest","text":"Example:\n```text\nnpx sv add vitest\n```\n\nExample:\n```text\nnpx sv add vitest=\"usages:unit,component\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":29}}32{"id":"doc-playwright_svelte_cli_docs-694a9161","source":"documentation","title":"playwright • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/playwright","text":"Example:\n```text\nnpx sv add playwright\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":14}}33{"id":"doc-better_auth_svelte_cli_docs-a9953415","source":"documentation","title":"better-auth • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/better-auth","text":"Example:\n```text\nnpx sv add better-auth\n```\n\nExample:\n```text\n# Email & Password only (default)\nnpx sv add better-auth=\"demo:password\"\n\n# GitHub OAuth only\nnpx sv add better-auth=\"demo:github\"\n\n# Both Email & Password and GitHub OAuth\nnpx sv add better-auth=\"demo:password,github\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":18,"estimatedTokens":75}}34{"id":"doc-tailwindcss_svelte_cli_docs-dcf8a847","source":"documentation","title":"tailwindcss • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/tailwind","text":"Example:\n```text\nnpx sv add tailwindcss\n```\n\nExample:\n```text\nnpx sv add tailwindcss=\"plugins:typography\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":31}}35{"id":"doc-drizzle_svelte_cli_docs-c4bfb2d6","source":"documentation","title":"drizzle • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/drizzle","text":"Example:\n```text\nnpx sv add drizzle\n```\n\nExample:\n```text\nnpx sv add drizzle=\"database:postgresql\"\n```\n\nExample:\n```text\nnpx sv add drizzle=\"database:postgresql+client:postgres.js\"\n```\n\nExample:\n```text\nnpx sv add drizzle=\"database:postgresql+client:postgres.js+docker:yes\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":73}}36{"id":"doc-mdsvex_svelte_cli_docs-b685fd4b","source":"documentation","title":"mdsvex • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/mdsvex","text":"Example:\n```text\nnpx sv add mdsvex\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":13}}37{"id":"doc-storybook_svelte_cli_docs-00afd54e","source":"documentation","title":"storybook • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/storybook","text":"Example:\n```text\nnpx sv add storybook\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":14}}38{"id":"doc-prettier_svelte_cli_docs-e4b1cb3b","source":"documentation","title":"prettier • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/prettier","text":"Example:\n```text\nnpx sv add prettier\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":14}}39{"id":"doc-experimental_svelte_cli_docs-c61ee353","source":"documentation","title":"experimental • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/experimental","text":"Example:\n```text\nnpx sv add experimental\n```\n\nExample:\n```text\nnpx sv add experimental=\"versions:kit\"\n```\n\nExample:\n```text\nnpx sv add experimental=\"features:async,remoteFunctions\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":50}}40{"id":"doc-sveltekit_adapter_svelte_cli_docs-a3b55d11","source":"documentation","title":"sveltekit-adapter • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sveltekit-adapter","text":"Example:\n```text\nnpx sv add sveltekit-adapter\n```\n\nExample:\n```text\nnpx sv add sveltekit-adapter=\"adapter:node\"\n```\n\nExample:\n```text\nnpx sv add sveltekit-adapter=\"adapter:cloudflare+cfTarget:workers\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":55}}41{"id":"doc-key_svelte_docs-eda28fa3","source":"documentation","title":"{#key ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/key","text":"Example:\n```text\n{#key expression}...{/key}\n```\n\nExample:\n```text\n{#key value}\n\t<Component />\n{/key}\n```\n\nExample:\n```text\n{#key value}\n\t<div transition:fade>{value}</div>\n{/key}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":20,"estimatedTokens":49}}42{"id":"doc-what_are_runes_svelte_docs-7b6e3518","source":"documentation","title":"What are runes? • Svelte Docs","url":"https://svelte.dev/docs/svelte/what-are-runes","text":"Example:\n```text\nlet let message: stringmessage = function $state<\"hello\">(initial: \"hello\"): \"hello\" (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state('hello');let message: stringfunction $state<\"hello\">(initial: \"hello\"): \"hello\" (+1 overload)\nnamespace $statefunction $state<\"hello\">(initial: \"hello\"): \"hello\" (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<\"hello\">(initial: \"hello\"): \"hello\" (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":22,"estimatedTokens":168}}43{"id":"doc-if_svelte_docs-476bd5fa","source":"documentation","title":"{#if ...} • Svelte Docs","url":"https://svelte.dev/docs/svelte/if","text":"Example:\n```text\n{#if expression}...{/if}\n```\n\nExample:\n```text\n{#if expression}...{:else if expression}...{/if}\n```\n\nExample:\n```text\n{#if expression}...{:else}...{/if}\n```\n\nExample:\n```text\n{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}\n```\n\nExample:\n```text\n{#if porridge.temperature > 100}\n\t<p>too hot!</p>\n{:else if 80 > porridge.temperature}\n\t<p>too cold!</p>\n{:else}\n\t<p>just right!</p>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":34,"estimatedTokens":107}}44{"id":"doc-overview_svelte_docs-3f14ed56","source":"documentation","title":"Overview • Svelte Docs","url":"https://svelte.dev/docs/svelte/overview","text":"Example:\n```text\n<script>\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":35,"estimatedTokens":99}}45{"id":"doc-getting_started_svelte_docs-253fc842","source":"documentation","title":"Getting started • Svelte Docs","url":"https://svelte.dev/docs/svelte/getting-started","text":"Example:\n```text\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":22}}46{"id":"doc-svelte_files_svelte_docs-b73ee05a","source":"documentation","title":".svelte files • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-files","text":"Example:\n```text\n<script module>\n\t// module-level logic goes here\n\t// (you will rarely use this)\n</script>\n\n<script>\n\t// instance-level logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n\t/* styles go here */\n</style>\n```\n\nExample:\n```text\n<script module>\n\t// module-level logic goes here\n\t// (you will rarely use this)\n</script>\n\n<script lang=\"ts\">\n\t// instance-level logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n\t/* styles go here */\n</style>\n```\n\nExample:\n```text\n<script module>\n\tlet total = 0;\n</script>\n\n<script>\n\ttotal += 1;\n\tconsole.log(`instantiated ${total} times`);\n</script>\n```\n\nExample:\n```text\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":59,"estimatedTokens":201}}47{"id":"doc-svelte_window_svelte_docs-a87f87da","source":"documentation","title":"<svelte:window> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-window","text":"Example:\n```text\n<svelte:window onevent={handler} />\n```\n\nExample:\n```text\n<svelte:window bind:prop={value} />\n```\n\nExample:\n```text\n<script>\n\tfunction handleKeydown(event) {\n\t\talert(`pressed the ${event.key} key`);\n\t}\n</script>\n\n<svelte:window onkeydown={handleKeydown} />\n```\n\nExample:\n```text\n<svelte:window bind:scrollY={y} />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":27,"estimatedTokens":87}}48{"id":"doc-host_svelte_docs-00e8e095","source":"documentation","title":"$host • Svelte Docs","url":"https://svelte.dev/docs/svelte/$host","text":"Example:\n```text\n<svelte:options customElement=\"my-stepper\" />\n\n<script>\n\tfunction dispatch(type) {\n\t\t$host().dispatchEvent(new CustomEvent(type));\n\t}\n</script>\n\n<button onclick={() => dispatch('decrement')}>decrement</button>\n<button onclick={() => dispatch('increment')}>increment</button>\n```\n\nExample:\n```text\n<svelte:options customElement=\"my-stepper\" />\n\n<script lang=\"ts\">\n\tfunction dispatch(type) {\n\t\t$host().dispatchEvent(new CustomEvent(type));\n\t}\n</script>\n\n<button onclick={() => dispatch('decrement')}>decrement</button>\n<button onclick={() => dispatch('increment')}>increment</button>\n```\n\nExample:\n```text\n<script>\n\timport './Stepper.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<my-stepper\n\tondecrement={() => count -= 1}\n\tonincrement={() => count += 1}\n></my-stepper>\n\n<p>count: {count}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport './Stepper.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<my-stepper\n\tondecrement={() => count -= 1}\n\tonincrement={() => count += 1}\n></my-stepper>\n\n<p>count: {count}</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":61,"estimatedTokens":261}}49{"id":"doc-global_styles_svelte_docs-f0c8a7a0","source":"documentation","title":"Global styles • Svelte Docs","url":"https://svelte.dev/docs/svelte/global-styles","text":"Example:\n```text\n<style>\n\t:global(body) {\n\t\t/* applies to <body> */\n\t\tmargin: 0;\n\t}\n\n\tdiv :global(strong) {\n\t\t/* applies to all <strong> elements, in any component,\n\t\t   that are inside <div> elements belonging\n\t\t   to this component */\n\t\tcolor: goldenrod;\n\t}\n\n\tp:global(.big.red) {\n\t\t/* applies to all <p> elements belonging to this component\n\t\t   with `class=\"big red\"`, even if it is applied\n\t\t   programmatically (for example by a library) */\n\t}\n</style>\n```\n\nExample:\n```text\n<style>\n\t@keyframes -global-my-animation-name {\n\t\t/* code goes here */\n\t}\n</style>\n```\n\nExample:\n```text\n<style>\n\t:global {\n\t\t/* applies to every <div> in your application */\n\t\tdiv { ... }\n\n\t\t/* applies to every <p> in your application */\n\t\tp { ... }\n\t}\n\n\t.a :global {\n\t\t/* applies to every `.b .c .d` element, in any component,\n\t\t   that is inside an `.a` element in this component */\n\t\t.b .c .d {...}\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":229}}50{"id":"doc-custom_properties_svelte_docs-77c23364","source":"documentation","title":"Custom properties • Svelte Docs","url":"https://svelte.dev/docs/svelte/custom-properties","text":"Example:\n```text\n<Slider\n\tbind:value\n\tmin={0}\n\tmax={100}\n\t--track-color=\"black\"\n\t--thumb-color=\"rgb({r} {g} {b})\"\n/>\n```\n\nExample:\n```text\n<svelte-css-wrapper style=\"display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</svelte-css-wrapper>\n```\n\nExample:\n```text\n<g style=\"--track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</g>\n```\n\nExample:\n```text\n<style>\n\t.track {\n\t\tbackground: var(--track-color, #aaa);\n\t}\n\n\t.thumb {\n\t\tbackground: var(--thumb-color, blue);\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":47,"estimatedTokens":154}}51{"id":"doc-lifecycle_hooks_svelte_docs-b864225b","source":"documentation","title":"Lifecycle hooks • Svelte Docs","url":"https://svelte.dev/docs/svelte/lifecycle-hooks","text":"Example:\n```text\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconsole.log('the component has mounted');\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tconsole.log('beep');\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { onDestroy } from 'svelte';\n\n\tonDestroy(() => {\n\t\tconsole.log('the component is being destroyed');\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { tick } from 'svelte';\n\n\t$effect.pre(() => {\n\t\tconsole.log('the component is about to update');\n\t\ttick().then(() => {\n\t\t\t\tconsole.log('the component just updated');\n\t\t});\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { beforeUpdate, afterUpdate } from 'svelte';\n\n\tbeforeUpdate(() => {\n\t\tconsole.log('the component is about to update');\n\t});\n\n\tafterUpdate(() => {\n\t\tconsole.log('the component just updated');\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { beforeUpdate, afterUpdate, tick } from 'svelte';\n\n\tlet updatingMessages = false;\n\tlet theme = $state('dark');\n\tlet messages = $state([]);\n\n\tlet viewport;\n\n\tbeforeUpdate(() => {\n\t$effect.pre(() => {\n\t\tif (!updatingMessages) return;\n\t\tmessages;\n\t\tconst autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;\n\n\t\tif (autoscroll) {\n\t\t\ttick().then(() => {\n\t\t\t\tviewport.scrollTo(0, viewport.scrollHeight);\n\t\t\t});\n\t\t}\n\n\t\tupdatingMessages = false;\n\t});\n\n\tfunction handleKeydown(event) {\n\t\tif (event.key === 'Enter') {\n\t\t\tconst text = event.target.value;\n\t\t\tif (!text) return;\n\n\t\t\tupdatingMessages = true;\n\t\t\tmessages = [...messages, text];\n\t\t\tevent.target.value = '';\n\t\t}\n\t}\n\n\tfunction toggle() {\n\t\ttheme = theme === 'dark' ? 'light' : 'dark';\n\t}\n</script>\n\n<div class:dark={theme === 'dark'}>\n\t<div bind:this={viewport}>\n\t\t{#each messages as message}\n\t\t\t<p>{message}</p>\n\t\t{/each}\n\t</div>\n\n\t<input onkeydown={handleKeydown} />\n\n\t<button onclick={toggle}> Toggle dark mode </button>\n</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":122,"estimatedTokens":515}}52{"id":"doc-hydratable_data_svelte_docs-f4310bbb","source":"documentation","title":"Hydratable data • Svelte Docs","url":"https://svelte.dev/docs/svelte/hydratable","text":"Example:\n```text\n<script>\n  import { getUser } from 'my-database-library';\n\n  // This will get the user on the server, render the user's name into the h1,\n  // and then, during hydration on the client, it will get the user _again_,\n  // blocking hydration until it's done.\n  const user = await getUser();\n</script>\n\n<h1>{user.name}</h1>\n```\n\nExample:\n```text\n<script>\n  import { hydratable } from 'svelte';\n  import { getUser } from 'my-database-library';\n\n  // During server rendering, this will serialize and stash the result of `getUser`, associating\n  // it with the provided key and baking it into the `head` content. During hydration, it will\n  // look for the serialized version, returning it instead of running `getUser`. After hydration\n  // is done, if it's called again, it'll simply invoke `getUser`.\n  const user = await hydratable('user', () => getUser());\n</script>\n\n<h1>{user.name}</h1>\n```\n\nExample:\n```text\nimport { function hydratable<T>(key: string, fn: () => T): Treferencehydratable } from 'svelte';\nconst const rand: numberrand = hydratable<number>(key: string, fn: () => number): numberreferencehydratable('random', () => var Math: MathAn intrinsic object that provides basic mathematics functionality and constants.\nMath.Math.random(): numberReturns a pseudorandom number between 0 and 1.\nrandom());function hydratable<T>(key: string, fn: () => T): Tconst rand: numberhydratable<number>(key: string, fn: () => number): numbervar Math: MathMath.random(): number\n```\n\nExample:\n```text\n<script>\n  import { hydratable } from 'svelte';\n  const promises = hydratable('random', () => {\n\treturn {\n\t  one: Promise.resolve(1),\n\t  two: Promise.resolve(2)\n\t}\n  });\n</script>\n\n{await promises.one}\n{await promises.two}\n```\n\nExample:\n```text\nconst const nonce: `${string}-${string}-${string}-${string}-${string}`nonce = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();\n\nconst { const head: stringHTML that goes into the <head>\nhead, const body: stringHTML that goes somewhere into the <body>\nbody } = await render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp, {\n\tcsp?: Csp | undefinedcsp: { nonce?: string | undefinednonce }\n});const nonce: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()const head: string<head>const body: string<body>render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentTypecsp?: Csp | undefinednonce?: string | undefined\n```\n\nExample:\n```text\nrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutput\n```\n\nExample:\n```text\nlet response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset(\n  'Content-Security-Policy',\n  `script-src 'nonce-${let nonce: stringnonce}'`\n );let response: ResponseResponse.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()let nonce: string\n```\n\nExample:\n```text\nconst { const head: stringHTML that goes into the <head>\nhead, const body: stringHTML that goes somewhere into the <body>\nbody, const hashes: {\n    script: `sha256-${string}`[];\n}hashes } = await render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp, {\n\tcsp?: Csp | undefinedcsp: { hash?: boolean | undefinedhash: true }\n});const head: string<head>const body: string<body>const hashes: {\n    script: `sha256-${string}`[];\n}const hashes: {\n    script: `sha256-${string}`[];\n}render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentTypecsp?: Csp | undefinedhash?: boolean | undefined\n```\n\nExample:\n```text\nconst hashes: {\n    script: `sha256-${string}`[];\n}\n```\n\nExample:\n```text\nlet response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset(\n  'Content-Security-Policy',\n  `script-src ${let hashes: {\n    script: string[];\n}hashes.script: string[]script.Array<string>.map<string>(callbackfn: (value: string, index: number, array: string[]) => string, thisArg?: any): string[]Calls a defined callback function on each element of an array, and returns an array that contains the results.\n@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((hash: stringhash) => `'${hash: stringhash}'`).Array<string>.join(separator?: string): stringAdds all the elements of an array into a string, separated by the specified separator string.\n@paramseparator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma.join(' ')}`\n );let response: ResponseResponse.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()let hashes: {\n    script: string[];\n}let hashes: {\n    script: string[];\n}script: string[]Array<string>.map<string>(callbackfn: (value: string, index: number, array: string[]) => string, thisArg?: any): string[]hash: stringhash: stringArray<string>.join(separator?: string): string\n```\n\nExample:\n```text\nlet hashes: {\n    script: string[];\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":182,"estimatedTokens":2320}}53{"id":"doc-svelte_animate_svelte_docs-8254080e","source":"documentation","title":"svelte/animate • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-animate","text":"Example:\n```text\nimport { function flip(node: Element, { from, to }: {\n    from: DOMRect;\n    to: DOMRect;\n}, params?: FlipParams): AnimationConfigThe flip function calculates the start and end position of an element and animates between them, translating the x and y values.\nflip stands for First, Last, Invert, Play.\nreferenceflip } from 'svelte/animate';function flip(node: Element, { from, to }: {\n    from: DOMRect;\n    to: DOMRect;\n}, params?: FlipParams): AnimationConfigfunction flip(node: Element, { from, to }: {\n    from: DOMRect;\n    to: DOMRect;\n}, params?: FlipParams): AnimationConfigflip\n```\n\nExample:\n```text\nfunction flip(node: Element, { from, to }: {\n    from: DOMRect;\n    to: DOMRect;\n}, params?: FlipParams): AnimationConfig\n```\n\nExample:\n```text\nfunction flip(\n\tnode: Element,\n\t{\n\t\tfrom,\n\t\tto\n\t}: {\n\t\tfrom: DOMRect;\n\t\tto: DOMRect;\n\t},\n\tparams?: FlipParams\n): AnimationConfig;\n```\n\nExample:\n```text\ninterface AnimationConfig {…}\n```\n\nExample:\n```text\ndelay?: number;\n```\n\nExample:\n```text\nduration?: number;\n```\n\nExample:\n```text\neasing?: (t: number) => number;\n```\n\nExample:\n```text\ncss?: (t: number, u: number) => string;\n```\n\nExample:\n```text\ntick?: (t: number, u: number) => void;\n```\n\nExample:\n```text\ninterface FlipParams {…}\n```\n\nExample:\n```text\nduration?: number | ((len: number) => number);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":80,"estimatedTokens":336}}54{"id":"doc-svelte_events_svelte_docs-35a64e1b","source":"documentation","title":"svelte/events • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-events","text":"Example:\n```text\nimport { function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)Attaches an event handler to the window and returns a function that removes the handler. Using this\nrather than addEventListener will preserve the correct order relative to handlers added declaratively\n(with attributes like onclick), which use event delegation for performance reasons\nreferenceon } from 'svelte/events';function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)addEventListeneronclick\n```\n\nExample:\n```text\nfunction on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)\n```\n\nExample:\n```text\nfunction on<Type extends keyof WindowEventMap>(\n\twindow: Window,\n\ttype: Type,\n\thandler: (\n\t\tthis: Window,\n\t\tevent: WindowEventMap[Type] & { currentTarget: Window }\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\nExample:\n```text\nfunction on<Type extends keyof DocumentEventMap>(\n\tdocument: Document,\n\ttype: Type,\n\thandler: (\n\t\tthis: Document,\n\t\tevent: DocumentEventMap[Type] & {\n\t\t\tcurrentTarget: Document;\n\t\t}\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\nExample:\n```text\nfunction on<\n\tElement extends HTMLElement,\n\tType extends keyof HTMLElementEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: HTMLElementEventMap[Type] & {\n\t\t\tcurrentTarget: Element;\n\t\t}\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\nExample:\n```text\nfunction on<\n\tElement extends MediaQueryList,\n\tType extends keyof MediaQueryListEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: MediaQueryListEventMap[Type] & {\n\t\t\tcurrentTarget: Element;\n\t\t}\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\nExample:\n```text\nfunction on(\n\telement: EventTarget,\n\ttype: string,\n\thandler: EventListener,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":96,"estimatedTokens":677}}55{"id":"doc-frequently_asked_questions_svelte_docs-e60e1d1a","source":"documentation","title":"Frequently asked questions • Svelte Docs","url":"https://svelte.dev/docs/svelte/faq","text":"Example:\n```text\n<script>\n\t/** What should we call the user? */\n\texport let name = 'world';\n</script>\n\n<!--\n@component\nHere's some documentation for this component.\nIt will show up on hover.\n\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```svelte\n  <main name=\"Arethra\">\n  ```\n-->\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":27,"estimatedTokens":94}}56{"id":"doc-svelte_action_svelte_docs-056f22a4","source":"documentation","title":"svelte/action • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-action","text":"Example:\n```text\nexport const const myAction: Action<HTMLDivElement, {\n    someProperty: boolean;\n} | undefined>myAction: type Action = /*unresolved*/ anyAction<HTMLDivElement, { someProperty: booleansomeProperty: boolean } | undefined> = (node: anynode, param: {\n    someProperty: boolean;\n}param = { someProperty: booleansomeProperty: true }) => {\n\t// ...\n}const myAction: Action<HTMLDivElement, {\n    someProperty: boolean;\n} | undefined>const myAction: Action<HTMLDivElement, {\n    someProperty: boolean;\n} | undefined>type Action = /*unresolved*/ anysomeProperty: booleannode: anyparam: {\n    someProperty: boolean;\n}param: {\n    someProperty: boolean;\n}someProperty: boolean\n```\n\nExample:\n```text\nconst myAction: Action<HTMLDivElement, {\n    someProperty: boolean;\n} | undefined>\n```\n\nExample:\n```text\nparam: {\n    someProperty: boolean;\n}\n```\n\nExample:\n```text\ninterface Action<\n\tElement = HTMLElement,\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {…}\n```\n\nExample:\n```text\n<Node extends Element>(\n\t...args: undefined extends Parameter\n\t\t? [node: Node, parameter?: Parameter]\n\t\t: [node: Node, parameter: Parameter]\n): void | ActionReturn<Parameter, Attributes>;\n```\n\nExample:\n```text\ninterface Attributes {\n\tAttributes.newprop?: string | undefinednewprop?: string;\n\t'on:event': (e: CustomEvent<boolean>e: interface CustomEvent<T = any>The CustomEvent interface can be used to attach custom data to an event generated by an application.\nMDN Reference\nCustomEvent<boolean>) => void;\n}\n\nexport function function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>myAction(node: HTMLElementnode: HTMLElement, parameter: Parameterparameter: type Parameter = /*unresolved*/ anyParameter): type ActionReturn = /*unresolved*/ anyActionReturn<type Parameter = /*unresolved*/ anyParameter, Attributes> {\n\t// ...\n\treturn {\n\t\tupdate: (updatedParameter: any) => voidupdate: (updatedParameter: anyupdatedParameter) => {...},\n\t\tdestroy: () => {...}\n\t};\n}Attributes.newprop?: string | undefinede: CustomEvent<boolean>interface CustomEvent<T = any>CustomEventfunction myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>node: HTMLElementparameter: Parametertype Parameter = /*unresolved*/ anytype ActionReturn = /*unresolved*/ anytype Parameter = /*unresolved*/ anyupdate: (updatedParameter: any) => voidupdatedParameter: any\n```\n\nExample:\n```text\ninterface ActionReturn<\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {…}\n```\n\nExample:\n```text\nupdate?: (parameter: Parameter) => void;\n```\n\nExample:\n```text\ndestroy?: () => void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":94,"estimatedTokens":676}}57{"id":"doc-svelte_boundary_svelte_docs-4e0c08db","source":"documentation","title":"<svelte:boundary> • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-boundary","text":"Example:\n```text\n<svelte:boundary onerror={handler}>...</svelte:boundary>\n```\n\nExample:\n```text\n<svelte:boundary>\n\t<p>{await delayed('hello!')}</p>\n\n\t{#snippet pending()}\n\t\t<p>loading...</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\n<svelte:boundary>\n\t<FlakyComponent />\n\n\t{#snippet failed(error, reset)}\n\t\t<button onclick={reset}>oops! try again</button>\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\n<svelte:boundary {failed}>...</svelte:boundary>\n```\n\nExample:\n```text\n<svelte:boundary onerror={(e) => report(e)}>\n\t...\n</svelte:boundary>\n```\n\nExample:\n```text\n<script>\n\tlet error = $state(null);\n\tlet reset = $state(() => {});\n\n\tfunction onerror(e, r) {\n\t\terror = e;\n\t\treset = r;\n\t}\n</script>\n\n<svelte:boundary {onerror}>\n\t<FlakyComponent />\n</svelte:boundary>\n\n{#if error}\n\t<button onclick={() => {\n\t\terror = null;\n\t\treset();\n\t}}>\n\t\toops! try again\n\t</button>\n{/if}\n```\n\nExample:\n```text\nimport { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender } from 'svelte/server';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst { const head: stringHTML that goes into the <head>\nhead, const body: stringHTML that goes somewhere into the <body>\nbody } = await render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp, {\n\ttransformError?: ((error: unknown) => unknown | Promise<unknown>) | undefinedtransformError: (error: unknownerror) => {\n\t\t// log the original error, with the stack trace...\n\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.error(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stderr with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst code = 5;\nconsole.error('error #%d', code);\n// Prints: error #5, to stderr\nconsole.error('error', code);\n// Prints: error 5, to stderrIf formatting elements (e.g. %d) are not found in the first string then\nutil.inspect() is called on each argument and the\nresulting string values are concatenated. See util.format()\nfor more information.\n@sincev0.1.100error(error: unknownerror);\n\n\t\t// ...and return a sanitized user-friendly error\n\t\t// to display in the `failed` snippet\n\t\treturn {\n\t\t\tmessage: stringmessage: 'An error occurred!'\n\t\t};\n\t};\n});function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputserverbodyheadtype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst head: string<head>const body: string<body>render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentTypetransformError?: ((error: unknown) => unknown | Promise<unknown>) | undefinederror: unknownvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.error(message?: any, ...optionalParams: any[]): void (+1 overload)stderrprintf(3)util.format()const code = 5;\nconsole.error('error #%d', code);\n// Prints: error #5, to stderr\nconsole.error('error', code);\n// Prints: error 5, to stderr%dutil.inspect()util.format()error: unknownmessage: string\n```\n\nExample:\n```text\nfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutput\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutput\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst code = 5;\nconsole.error('error #%d', code);\n// Prints: error #5, to stderr\nconsole.error('error', code);\n// Prints: error 5, to stderr\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.153Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":321,"estimatedTokens":3230}}58{"id":"doc-imperative_component_api_svelte_docs-70d5d403","source":"documentation","title":"Imperative component API • Svelte Docs","url":"https://svelte.dev/docs/svelte/imperative-component-api","text":"Example:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, {\n\ttarget: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('#app'),\n\tprops?: Record<string, any> | undefinedComponent properties.\nprops: { some: stringsome: 'property' }\n});function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)props?: Record<string, any> | undefinedsome: string\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount, function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody });\n\n// later\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app, { outro?: boolean | undefinedoutro: true });function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>outro?: boolean | undefined\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\nimport { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender } from 'svelte/server';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const result: RenderOutputresult = render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp, {\n\tprops?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefinedprops: { some: stringsome: 'property' }\n});\nconst result: RenderOutputresult.SyncRenderOutput.body: stringHTML that goes somewhere into the <body>\nbody; // HTML for somewhere in this <body> tag\nconst result: RenderOutputresult.SyncRenderOutput.head: stringHTML that goes into the <head>\nhead; // HTML for somewhere in this <head> tagfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputserverbodyheadtype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst result: RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentTypeprops?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefinedsome: stringconst result: RenderOutputSyncRenderOutput.body: string<body>const result: RenderOutputSyncRenderOutput.head: string<head>\n```\n\nExample:\n```text\nfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutput\n```\n\nExample:\n```text\nrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutput\n```\n\nExample:\n```text\nimport { function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): ExportsHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component\nreferencehydrate } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = hydrate<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: {\n    ...;\n}): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component\nreferencehydrate(const App: LegacyComponentTypeApp, {\n\ttarget: Document | Element | ShadowRoottarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('#app'),\n\tprops?: Record<string, any> | undefinedprops: { some: stringsome: 'property' }\n});function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exportsfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exportsaccessors: truetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>hydrate<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: {\n    ...;\n}): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>hydrate<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: {\n    ...;\n}): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)props?: Record<string, any> | undefinedsome: string\n```\n\nExample:\n```text\nfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exports\n```\n\nExample:\n```text\nhydrate<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: {\n    ...;\n}): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":467,"estimatedTokens":6409}}59{"id":"doc-context_svelte_docs-df4b483c","source":"documentation","title":"Context • Svelte Docs","url":"https://svelte.dev/docs/svelte/context","text":"Example:\n```text\n<script>\n\timport Parent from './Parent.svelte';\n\timport Child from './Child.svelte';\n</script>\n\n<Parent>\n\t<Child />\n</Parent>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Parent from './Parent.svelte';\n\timport Child from './Child.svelte';\n</script>\n\n<Parent>\n\t<Child />\n</Parent>\n```\n\nExample:\n```text\n<script>\n\timport { setUserContext } from './context';\n\n\tlet { children } = $props();\n\n\tsetUserContext({ name: 'world' });\n</script>\n\n{@render children()}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setUserContext } from './context';\n\n\tlet { children } = $props();\n\n\tsetUserContext({ name: 'world' });\n</script>\n\n{@render children()}\n```\n\nExample:\n```text\n<script>\n\timport { getUserContext } from './context';\n\n\tconst user = getUserContext();\n</script>\n\n<h1>hello {user.name}, inside Child.svelte</h1>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getUserContext } from './context';\n\n\tconst user = getUserContext();\n</script>\n\n<h1>hello {user.name}, inside Child.svelte</h1>\n```\n\nExample:\n```text\nimport { function createContext<T>(): [() => T, (context: T) => T]Returns a [get, set] pair of functions for working with context in a type-safe way.\nget will throw an error if no parent component called set.\n@since5.40.0referencecreateContext } from 'svelte';\n\ninterface User {\n\tUser.name: stringname: string;\n}\n\nexport const [const getUserContext: () => UsergetUserContext, const setUserContext: (context: User) => UsersetUserContext] = createContext<User>(): [() => User, (context: User) => User]Returns a [get, set] pair of functions for working with context in a type-safe way.\nget will throw an error if no parent component called set.\n@since5.40.0referencecreateContext<User>();function createContext<T>(): [() => T, (context: T) => T][get, set]getsetUser.name: stringconst getUserContext: () => Userconst setUserContext: (context: User) => UsercreateContext<User>(): [() => User, (context: User) => User][get, set]getset\n```\n\nExample:\n```text\n<script>\n\timport { setContext } from 'svelte';\n\n\tsetContext('my-context', 'hello from Parent.svelte');\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\n\tsetContext('my-context', 'hello from Parent.svelte');\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst message = getContext('my-context');\n</script>\n\n<h1>{message}, inside Child.svelte</h1>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\n\tconst message = getContext('my-context');\n</script>\n\n<h1>{message}, inside Child.svelte</h1>\n```\n\nExample:\n```text\n<script>\n\timport { setCounter } from './context.ts';\n\timport Child from './Child.svelte';\n\n\tlet counter = $state({\n\t\tcount: 0\n\t});\n\n\tsetCounter(counter);\n</script>\n\n<button onclick={() => counter.count += 1}>\n\tincrement\n</button>\n\n<Child />\n<Child />\n<Child />\n\n<button onclick={() => counter.count = 0}>\n\treset\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setCounter } from './context.ts';\n\timport Child from './Child.svelte';\n\n\tlet counter = $state({\n\t\tcount: 0\n\t});\n\n\tsetCounter(counter);\n</script>\n\n<button onclick={() => counter.count += 1}>\n\tincrement\n</button>\n\n<Child />\n<Child />\n<Child />\n\n<button onclick={() => counter.count = 0}>\n\treset\n</button>\n```\n\nExample:\n```text\n<script>\n\timport { getCounter } from './context.ts';\n\n\tconst counter = getCounter();\n</script>\n\n<p>{counter.count}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getCounter } from './context.ts';\n\n\tconst counter = getCounter();\n</script>\n\n<p>{counter.count}</p>\n```\n\nExample:\n```text\nimport { function createContext<T>(): [() => T, (context: T) => T]Returns a [get, set] pair of functions for working with context in a type-safe way.\nget will throw an error if no parent component called set.\n@since5.40.0referencecreateContext } from 'svelte';\n\ninterface Counter {\n\tCounter.count: numbercount: number;\n}\n\nexport const [const getCounter: () => CountergetCounter, const setCounter: (context: Counter) => CountersetCounter] = createContext<Counter>(): [() => Counter, (context: Counter) => Counter]Returns a [get, set] pair of functions for working with context in a type-safe way.\nget will throw an error if no parent component called set.\n@since5.40.0referencecreateContext<Counter>();function createContext<T>(): [() => T, (context: T) => T][get, set]getsetCounter.count: numberconst getCounter: () => Counterconst setCounter: (context: Counter) => CountercreateContext<Counter>(): [() => Counter, (context: Counter) => Counter][get, set]getset\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount, function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount } from 'svelte';\nimport { const expect: ExpectStaticexpect, const test: TestAPIDefines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test } from 'vitest';\nimport { import setUserContextsetUserContext } from './context';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\ntest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)Defines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test('MyComponent', () => {\n\tfunction function (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>Wrapper(...args: any[]args) {\n\t\timport setUserContextsetUserContext({ name: stringname: 'Bob' });\n\t\treturn function MyComponent(internals: Brand<\"ComponentInternals\">, props: Record<string, any>): ReturnType<Component<Record<string, any>, Record<string, any>>>MyComponent(...args: any[]args);\n\t}\n\n\tconst const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(function (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>Wrapper, {\n\t\ttarget: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody\n\t});\n\n\texpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)expect(var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody.Element.innerHTML: stringThe innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.\nMDN Reference\ninnerHTML).JestAssertion<string>.toBe: <string>(expected: string) => voidChecks that a value is what you expect. It calls Object.is to compare values.\nDon’t use toBe with floating-point numbers.\n@exampleexpect(result).toBe(42);\nexpect(status).toBe(true);\ntoBe('<h1>Hello Bob!</h1>');\n\n\tfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component);\n});function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const expect: ExpectStaticconst test: TestAPI// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});import setUserContexttype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});function (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>function (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>args: any[]import setUserContextname: stringfunction MyComponent(internals: Brand<\"ComponentInternals\">, props: Record<string, any>): ReturnType<Component<Record<string, any>, Record<string, any>>>args: any[]const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalsefunction (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>function (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>target: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyexpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)var document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyElement.innerHTML: stringinnerHTMLJestAssertion<string>.toBe: <string>(expected: string) => voidObject.istoBefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\n// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});\n```\n\nExample:\n```text\n// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});\n```\n\nExample:\n```text\ntype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentType\n```\n\nExample:\n```text\nfunction (local function) Wrapper(...args: any[]): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nconst component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nexport const const myGlobalState: {\n    user: {};\n}myGlobalState = function $state<{\n    user: {};\n}>(initial: {\n    user: {};\n}): {\n    user: {};\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({\n\tuser: {}user: {\n\t\t// ...\n\t}\n\t// ...\n});const myGlobalState: {\n    user: {};\n}const myGlobalState: {\n    user: {};\n}function $state<{\n    user: {};\n}>(initial: {\n    user: {};\n}): {\n    user: {};\n} (+1 overload)\nnamespace $statefunction $state<{\n    user: {};\n}>(initial: {\n    user: {};\n}): {\n    user: {};\n} (+1 overload)\nnamespace $statelet count = $state(0);user: {}\n```\n\nExample:\n```text\nconst myGlobalState: {\n    user: {};\n}\n```\n\nExample:\n```text\nfunction $state<{\n    user: {};\n}>(initial: {\n    user: {};\n}): {\n    user: {};\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\n<script>\n\timport { myGlobalState } from './state.svelte.js';\n\n\tlet { data } = $props();\n\n\tif (data.user) {\n\t\tmyGlobalState.user = data.user;\n\t}\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { myGlobalState } from './state.svelte.js';\n\n\tlet { data } = $props();\n\n\tif (data.user) {\n\t\tmyGlobalState.user = data.user;\n\t}\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":31,"totalLines":552,"estimatedTokens":4879}}60{"id":"doc-sv_svelte_cli_docs-e8796636","source":"documentation","title":"sv • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv","text":"Example:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\nimport { function defineAddon<const Id extends string, Args extends OptionDefinition>(config: Addon<Args, Id>): Addon<Args, Id> (+1 overload)The entry point for your addon, It will hold every thing! (options, setup, run, nextSteps, ...)\nFor dynamic options added via addOption in setup, use the generic to get strong typing:\nconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleandefineAddon, function defineAddonOptions(): OptionBuilder<{}>Options for an addon.\nWill be prompted to the user if there are not answered by args when calling the cli.\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();To define by args, you can do\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddonOptions } from 'sv';\n\nexport default defineAddon<\"my-addon\", {}>(config: Addon<{}, \"my-addon\", Record<string, unknown>>): Addon<{}, \"my-addon\", Record<string, unknown>> (+1 overload)The entry point for your addon, It will hold every thing! (options, setup, run, nextSteps, ...)\nFor dynamic options added via addOption in setup, use the generic to get strong typing:\nconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleandefineAddon({\n\tid: \"my-addon\"id: 'my-addon',\n\toptions: {}options: function defineAddonOptions(): OptionBuilder<{}>Options for an addon.\nWill be prompted to the user if there are not answered by args when calling the cli.\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();To define by args, you can do\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddonOptions().function build(): {}build(),\n\n\t// called before run - declare dependencies, environment requirements, and dynamic options\n\tsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => void;\n}) => MaybePromise<void>) | undefinedsetup: ({ dependsOn: (name: keyof OfficialAddons) => voidOn what official addons does this addon depend on?\ndependsOn, unsupported: (reason: string) => voidWhy is this addon not supported?\nunsupported, addOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => voidaddOption, isKit: booleanisKit }) => {\n\t\tif (!isKit: booleanisKit) unsupported: (reason: string) => voidWhy is this addon not supported?\nunsupported('Requires SvelteKit');\n\t\tdependsOn: (name: keyof OfficialAddons) => voidOn what official addons does this addon depend on?\ndependsOn('eslint');\n\n\t\t// dynamically add options based on workspace state or fetched data\n\t\taddOption: <\"theme\">(key: \"theme\", question: BaseQuestion<any> & Question<any>) => voidaddOption('theme', {\n\t\t\tquestion: stringquestion: 'Which theme?',\n\t\t\ttype: \"select\"type: 'select',\n\t\t\tdefault: anydefault: 'dark',\n\t\t\toptions: {\n    value: any;\n    label?: string;\n    hint?: string;\n}[]options: [{ value: anyvalue: 'dark' }, { value: anyvalue: 'light' }]\n\t\t});\n\t},\n\n\t// the actual work — add files, edit files, declare dependencies\n\trun: (workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>run: ({ sv: SvApisv, options: OptionValues<{}> & Record<string, unknown>Add-on options (includes dynamically added options from setup)\noptions, cancel: (reason: string) => voidCancel the addon at any time!\ncancel }) => {\n\t\t// add a dependency\n\t\tsv: SvApisv.devDependency: (pkg: string, version: string) => voiddevDependency('my-lib', '^1.0.0');\n\n\t\t// create or edit files using transforms from @sveltejs/sv-utils\n\t\tsv: SvApisv.file: (path: string, edit: (content: string) => string | false) => voidEdit a file in the workspace. (will create it if it doesn’t exist)\nReturn false from the callback to abort - the original content is returned unchanged.\nfile('src/lib/foo.ts', (content: stringcontent) => {\n\t\t\treturn 'export const foo = true;';\n\t\t});\n\n\t\tsv: SvApisv.file: (path: string, edit: (content: string) => string | false) => voidEdit a file in the workspace. (will create it if it doesn’t exist)\nReturn false from the callback to abort - the original content is returned unchanged.\nfile(\n\t\t\t'src/routes/+page.svelte',\n\t\t\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a Svelte component file.\nReturn false from the callback to abort - the original content is returned unchanged.\nsvelte(({ ast: AST.Rootast, svelte: typeof index_d_exports$4svelte }) => {\n\t\t\t\tsvelte: typeof index_d_exports$4svelte.index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentaddFragment(ast: AST.Rootast, '<p>Hello!</p>');\n\t\t\t})\n\t\t);\n\n\t\t// cancel at any point if something is wrong\n\t\t// cancel('reason');\n\t},\n\n\t// displayed after the add-on runs\n\tnextSteps?: ((workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n}) => string[]) | undefinednextSteps: ({ options: OptionValues<{}> & Record<string, unknown>options }) => ['Run `npm run dev` to get started']\n});const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function defineAddon<const Id extends string, Args extends OptionDefinition>(config: Addon<Args, Id>): Addon<Args, Id> (+1 overload)addOptionconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleanfunction defineAddonOptions(): OptionBuilder<{}>const options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();npx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddon<\"my-addon\", {}>(config: Addon<{}, \"my-addon\", Record<string, unknown>>): Addon<{}, \"my-addon\", Record<string, unknown>> (+1 overload)addOptionconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleanid: \"my-addon\"options: {}function defineAddonOptions(): OptionBuilder<{}>const options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();npx sv add <addon>=<option1>:<value1>+<option2>:<value2>function build(): {}setup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => void;\n}) => MaybePromise<void>) | undefinedsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => void;\n}) => MaybePromise<void>) | undefineddependsOn: (name: keyof OfficialAddons) => voidunsupported: (reason: string) => voidaddOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => voidisKit: booleanisKit: booleanunsupported: (reason: string) => voiddependsOn: (name: keyof OfficialAddons) => voidaddOption: <\"theme\">(key: \"theme\", question: BaseQuestion<any> & Question<any>) => voidquestion: stringtype: \"select\"default: anyoptions: {\n    value: any;\n    label?: string;\n    hint?: string;\n}[]options: {\n    value: any;\n    label?: string;\n    hint?: string;\n}[]value: anyvalue: anyrun: (workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>run: (workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>sv: SvApioptions: OptionValues<{}> & Record<string, unknown>cancel: (reason: string) => voidsv: SvApidevDependency: (pkg: string, version: string) => voidsv: SvApifile: (path: string, edit: (content: string) => string | false) => voidfalsecontent: stringsv: SvApifile: (path: string, edit: (content: string) => string | false) => voidfalseconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: AST.Rootsvelte: typeof index_d_exports$4svelte: typeof index_d_exports$4index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentindex_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentast: AST.RootnextSteps?: ((workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n}) => string[]) | undefinednextSteps?: ((workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n}) => string[]) | undefinedoptions: OptionValues<{}> & Record<string, unknown>\n```\n\nExample:\n```text\nconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}\n```\n\nExample:\n```text\nimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);\n```\n\nExample:\n```text\nconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // boolean\n```\n\nExample:\n```text\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();\n```\n\nExample:\n```text\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>\n```\n\nExample:\n```text\nsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends string>(key: K, question: BaseQuestion<any> & Question<any>) => void;\n}) => MaybePromise<void>) | undefined\n```\n\nExample:\n```text\noptions: {\n    value: any;\n    label?: string;\n    hint?: string;\n}[]\n```\n\nExample:\n```text\nrun: (workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>\n```\n\nExample:\n```text\nfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => string\n```\n\nExample:\n```text\nindex_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragment\n```\n\nExample:\n```text\nnextSteps?: ((workspace: Workspace & {\n    options: OptionValues<{}> & Record<string, unknown>;\n}) => string[]) | undefined\n```\n\nExample:\n```text\nconst const addon: Addon<{} & SetupOptions<{\n    theme: string;\n}>, \"my-addon\", {\n    theme: string;\n}>addon = defineAddon<{\n    theme: string;\n}>(): <Id, Args>(config: Omit<Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}>, \"options\"> & {\n    options: Args;\n}) => Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}> (+1 overload)The entry point for your addon, It will hold every thing! (options, setup, run, nextSteps, ...)\nFor dynamic options added via addOption in setup, use the generic to get strong typing:\nconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleandefineAddon<{ theme: stringtheme: string }>()({\n\tid: \"my-addon\"id: 'my-addon',\n\toptions: {}options: function defineAddonOptions(): OptionBuilder<{}>Options for an addon.\nWill be prompted to the user if there are not answered by args when calling the cli.\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();To define by args, you can do\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddonOptions().function build(): {}build(),\n\tsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n        theme: string;\n    }>[K]) => void;\n}) => MaybePromise<void>) | undefinedsetup: ({ addOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n    theme: string;\n}>[K]) => voidaddOption }) => {\n\t\taddOption: <\"theme\">(key: \"theme\", question: BaseQuestion<any> & StringQuestion) => voidaddOption('theme', {\n\t\t\tquestion: stringquestion: 'Which theme?',\n\t\t\ttype: \"string\"type: 'string',\n\t\t\tdefault: stringdefault: 'dark'\n\t\t});\n\t},\n\trun: (workspace: Workspace & {\n    options: OptionValues<{} & SetupOptions<{\n        theme: string;\n    }>> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>run: ({ options: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>Add-on options (includes dynamically added options from setup)\noptions }) => {\n\t\toptions: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>Add-on options (includes dynamically added options from setup)\noptions.theme: stringtheme; // string\n\t}\n});const addon: Addon<{} & SetupOptions<{\n    theme: string;\n}>, \"my-addon\", {\n    theme: string;\n}>const addon: Addon<{} & SetupOptions<{\n    theme: string;\n}>, \"my-addon\", {\n    theme: string;\n}>defineAddon<{\n    theme: string;\n}>(): <Id, Args>(config: Omit<Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}>, \"options\"> & {\n    options: Args;\n}) => Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}> (+1 overload)defineAddon<{\n    theme: string;\n}>(): <Id, Args>(config: Omit<Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}>, \"options\"> & {\n    options: Args;\n}) => Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}> (+1 overload)addOptionconst addon = defineAddon<{ extra: boolean }>()({ ... });\naddon.options.extra.default // booleantheme: stringid: \"my-addon\"options: {}function defineAddonOptions(): OptionBuilder<{}>const options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();npx sv add <addon>=<option1>:<value1>+<option2>:<value2>function build(): {}setup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n        theme: string;\n    }>[K]) => void;\n}) => MaybePromise<void>) | undefinedsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n        theme: string;\n    }>[K]) => void;\n}) => MaybePromise<void>) | undefinedaddOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n    theme: string;\n}>[K]) => voidaddOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n    theme: string;\n}>[K]) => voidaddOption: <\"theme\">(key: \"theme\", question: BaseQuestion<any> & StringQuestion) => voidquestion: stringtype: \"string\"default: stringrun: (workspace: Workspace & {\n    options: OptionValues<{} & SetupOptions<{\n        theme: string;\n    }>> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>run: (workspace: Workspace & {\n    options: OptionValues<{} & SetupOptions<{\n        theme: string;\n    }>> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>options: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>options: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>options: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>options: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>theme: string\n```\n\nExample:\n```text\nconst addon: Addon<{} & SetupOptions<{\n    theme: string;\n}>, \"my-addon\", {\n    theme: string;\n}>\n```\n\nExample:\n```text\ndefineAddon<{\n    theme: string;\n}>(): <Id, Args>(config: Omit<Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}>, \"options\"> & {\n    options: Args;\n}) => Addon<Args & SetupOptions<{\n    theme: string;\n}>, Id, {\n    theme: string;\n}> (+1 overload)\n```\n\nExample:\n```text\nsetup?: ((workspace: Workspace & {\n    dependsOn: (name: keyof OfficialAddons) => void;\n    unsupported: (reason: string) => void;\n    runsAfter: (name: keyof OfficialAddons) => void;\n    addOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n        theme: string;\n    }>[K]) => void;\n}) => MaybePromise<void>) | undefined\n```\n\nExample:\n```text\naddOption: <K extends \"theme\">(key: K, question: SetupOptions<{\n    theme: string;\n}>[K]) => void\n```\n\nExample:\n```text\nrun: (workspace: Workspace & {\n    options: OptionValues<{} & SetupOptions<{\n        theme: string;\n    }>> & Record<string, unknown>;\n    sv: SvApi;\n    cancel: (reason: string) => void;\n}) => MaybePromise<void>\n```\n\nExample:\n```text\noptions: OptionValues<{} & SetupOptions<{\n    theme: string;\n}>> & Record<string, unknown>\n```\n\nExample:\n```text\nimport { function defineAddonOptions(): OptionBuilder<{}>Options for an addon.\nWill be prompted to the user if there are not answered by args when calling the cli.\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();To define by args, you can do\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddonOptions } from 'sv';\n\nconst const options: {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}options = function defineAddonOptions(): OptionBuilder<{}>Options for an addon.\nWill be prompted to the user if there are not answered by args when calling the cli.\nconst options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();To define by args, you can do\nnpx sv add <addon>=<option1>:<value1>+<option2>:<value2>defineAddonOptions()\n\t.add<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>(key: \"database\", question: {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}): OptionBuilder<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>>This type is a bit complex, but in usage, it’s quite simple!\nThe idea is to add() options one by one, with the key and the question.\n  .add('demo', {\n\tquestion: 'Do you want to add a demo?',\n\ttype: 'boolean',  // string, number, select, multiselect\n\tdefault: true,\n\t// condition: (o) => o.previousOption === 'ok',\n  })add('database', {\n\t\tquestion: \"Which database?\"question: 'Which database?',\n\t\ttype: \"select\"type: 'select',\n\t\tdefault: \"postgresql\"default: 'postgresql',\n\t\toptions: [{\n    readonly value: \"postgresql\";\n}, {\n    readonly value: \"mysql\";\n}, {\n    readonly value: \"sqlite\";\n}]options: [\n\t\t\t{ value: \"postgresql\"value: 'postgresql' },\n\t\t\t{ value: \"mysql\"value: 'mysql' },\n\t\t\t{ value: \"sqlite\"value: 'sqlite' }\n\t\t]\n\t})\n\t.add<\"docker\", {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}>(key: \"docker\", question: {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}): OptionBuilder<...>This type is a bit complex, but in usage, it’s quite simple!\nThe idea is to add() options one by one, with the key and the question.\n  .add('demo', {\n\tquestion: 'Do you want to add a demo?',\n\ttype: 'boolean',  // string, number, select, multiselect\n\tdefault: true,\n\t// condition: (o) => o.previousOption === 'ok',\n  })add('docker', {\n\t\tquestion: \"Add a docker-compose file?\"question: 'Add a docker-compose file?',\n\t\ttype: \"boolean\"type: 'boolean',\n\t\tdefault: falsedefault: false,\n\t\t// only ask when database is not sqlite\n\t\tcondition: (opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>) => booleancondition: (opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>opts) => opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>opts.database: \"postgresql\" | \"mysql\" | \"sqlite\"database !== 'sqlite'\n\t})\n\t.function build(): {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}build();function defineAddonOptions(): OptionBuilder<{}>const options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();npx sv add <addon>=<option1>:<value1>+<option2>:<value2>const options: {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}const options: {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}function defineAddonOptions(): OptionBuilder<{}>const options = defineAddonOptions()\n  .add('demo', {\n\tquestion: `demo? ${color.optional('(a cool one!)')}`\n\ttype: string | boolean | number | select | multiselect,\n\tdefault: true,\n  })\n  .build();npx sv add <addon>=<option1>:<value1>+<option2>:<value2>add<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>(key: \"database\", question: {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}): OptionBuilder<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>>add<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>(key: \"database\", question: {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}): OptionBuilder<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>>add()  .add('demo', {\n\tquestion: 'Do you want to add a demo?',\n\ttype: 'boolean',  // string, number, select, multiselect\n\tdefault: true,\n\t// condition: (o) => o.previousOption === 'ok',\n  })question: \"Which database?\"type: \"select\"default: \"postgresql\"options: [{\n    readonly value: \"postgresql\";\n}, {\n    readonly value: \"mysql\";\n}, {\n    readonly value: \"sqlite\";\n}]options: [{\n    readonly value: \"postgresql\";\n}, {\n    readonly value: \"mysql\";\n}, {\n    readonly value: \"sqlite\";\n}]value: \"postgresql\"value: \"mysql\"value: \"sqlite\"add<\"docker\", {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}>(key: \"docker\", question: {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}): OptionBuilder<...>add<\"docker\", {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}>(key: \"docker\", question: {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}): OptionBuilder<...>add()  .add('demo', {\n\tquestion: 'Do you want to add a demo?',\n\ttype: 'boolean',  // string, number, select, multiselect\n\tdefault: true,\n\t// condition: (o) => o.previousOption === 'ok',\n  })question: \"Add a docker-compose file?\"type: \"boolean\"default: falsecondition: (opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>) => booleancondition: (opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>) => booleanopts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>database: \"postgresql\" | \"mysql\" | \"sqlite\"function build(): {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}function build(): {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}\n```\n\nExample:\n```text\nconst options: {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}\n```\n\nExample:\n```text\nadd<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>(key: \"database\", question: {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}): OptionBuilder<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}>>\n```\n\nExample:\n```text\n.add('demo', {\n\tquestion: 'Do you want to add a demo?',\n\ttype: 'boolean',  // string, number, select, multiselect\n\tdefault: true,\n\t// condition: (o) => o.previousOption === 'ok',\n  })\n```\n\nExample:\n```text\noptions: [{\n    readonly value: \"postgresql\";\n}, {\n    readonly value: \"mysql\";\n}, {\n    readonly value: \"sqlite\";\n}]\n```\n\nExample:\n```text\nadd<\"docker\", {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}>(key: \"docker\", question: {\n    readonly question: \"Add a docker-compose file?\";\n    readonly type: \"boolean\";\n    readonly default: false;\n    readonly condition: (opts: OptionValues<Record<\"database\", {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    }> & Record<\"docker\", any>>) => boolean;\n}): OptionBuilder<...>\n```\n\nExample:\n```text\ncondition: (opts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>) => boolean\n```\n\nExample:\n```text\nopts: OptionValues<Record<\"database\", {\n    readonly question: \"Which database?\";\n    readonly type: \"select\";\n    readonly default: \"postgresql\";\n    readonly options: [{\n        readonly value: \"postgresql\";\n    }, {\n        readonly value: \"mysql\";\n    }, {\n        readonly value: \"sqlite\";\n    }];\n}> & Record<\"docker\", any>>\n```\n\nExample:\n```text\nfunction build(): {\n    database: {\n        readonly question: \"Which database?\";\n        readonly type: \"select\";\n        readonly default: \"postgresql\";\n        readonly options: [{\n            readonly value: \"postgresql\";\n        }, {\n            readonly value: \"mysql\";\n        }, {\n            readonly value: \"sqlite\";\n        }];\n    };\n    docker: {\n        readonly question: \"Add a docker-compose file?\";\n        readonly type: \"boolean\";\n        readonly default: false;\n        readonly condition: (opts: OptionValues<Record<\"database\", {\n            readonly question: \"Which database?\";\n            readonly type: \"select\";\n            readonly default: \"postgresql\";\n            readonly options: [{\n                readonly value: \"postgresql\";\n            }, {\n                readonly value: \"mysql\";\n            }, {\n                readonly value: \"sqlite\";\n            }];\n        }> & Record<...>>) => boolean;\n    };\n}\n```\n\nExample:\n```text\nimport { function create(options: Options): void (+1 overload)create } from 'sv';\n\nfunction create(options: Options): void (+1 overload)@deprecateduse create({ cwd, ...options }) instead.create({\n\tcwd: stringcwd: './my-app',\n\tname: stringname: 'my-app',\n\ttemplate: \"minimal\" | \"demo\" | \"library\" | \"addon\" | \"svelte\"template: 'minimal',\n\ttypes: \"typescript\" | \"checkjs\" | \"none\"types: 'typescript'\n});function create(options: Options): void (+1 overload)function create(options: Options): void (+1 overload)create({ cwd, ...options })cwd: stringname: stringtemplate: \"minimal\" | \"demo\" | \"library\" | \"addon\" | \"svelte\"types: \"typescript\" | \"checkjs\" | \"none\"\n```\n\nExample:\n```text\nimport { function add<Addons extends AddonMap>({ addons, cwd, options, packageManager }: InstallOptions<Addons>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>add, const officialAddons: OfficialAddonsofficialAddons } from 'sv';\n\nawait add<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>({ addons, cwd, options, packageManager }: InstallOptions<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>add({\n\tcwd: stringcwd: './my-app',\n\taddons: {\n    prettier: Addon<any, string, Record<string, unknown>>;\n}addons: { prettier: Addon<any, string, Record<string, unknown>>prettier: const officialAddons: OfficialAddonsofficialAddons.prettier: Addon<any, string, Record<string, unknown>>prettier },\n\toptions: OptionMap<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>options: { prettier: {}prettier: {} },\n\tpackageManager?: AgentName | undefinedpackageManager: 'npm'\n});function add<Addons extends AddonMap>({ addons, cwd, options, packageManager }: InstallOptions<Addons>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>function add<Addons extends AddonMap>({ addons, cwd, options, packageManager }: InstallOptions<Addons>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>const officialAddons: OfficialAddonsadd<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>({ addons, cwd, options, packageManager }: InstallOptions<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>add<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>({ addons, cwd, options, packageManager }: InstallOptions<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>cwd: stringaddons: {\n    prettier: Addon<any, string, Record<string, unknown>>;\n}addons: {\n    prettier: Addon<any, string, Record<string, unknown>>;\n}prettier: Addon<any, string, Record<string, unknown>>const officialAddons: OfficialAddonsprettier: Addon<any, string, Record<string, unknown>>options: OptionMap<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>options: OptionMap<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>prettier: {}packageManager?: AgentName | undefined\n```\n\nExample:\n```text\nfunction add<Addons extends AddonMap>({ addons, cwd, options, packageManager }: InstallOptions<Addons>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>\n```\n\nExample:\n```text\nadd<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>({ addons, cwd, options, packageManager }: InstallOptions<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>): Promise<ReturnType<({ loadedAddons, workspace, setupResults, options }: ApplyAddonOptions) => Promise<{\n    filesToFormat: string[];\n    status: Record<string, string[] | \"success\">;\n}>>>\n```\n\nExample:\n```text\naddons: {\n    prettier: Addon<any, string, Record<string, unknown>>;\n}\n```\n\nExample:\n```text\noptions: OptionMap<{\n    prettier: Addon<any, string, Record<string, unknown>>;\n}>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":34,"totalLines":1524,"estimatedTokens":13511}}61{"id":"doc-stores_svelte_docs-543b06ef","source":"documentation","title":"Stores • Svelte Docs","url":"https://svelte.dev/docs/svelte/stores","text":"Example:\n```text\n<script>\n\timport { writable } from 'svelte/store';\n\n\tconst count = writable(0);\n\tconsole.log($count); // logs 0\n\n\tcount.set(1);\n\tconsole.log($count); // logs 1\n\n\t$count = 2;\n\tconsole.log($count); // logs 2\n</script>\n```\n\nExample:\n```text\nexport const const userState: {\n    name: string;\n}userState = function $state<{\n    name: string;\n}>(initial: {\n    name: string;\n}): {\n    name: string;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({\n\tname: stringname: 'name',\n\t/* ... */\n});const userState: {\n    name: string;\n}const userState: {\n    name: string;\n}function $state<{\n    name: string;\n}>(initial: {\n    name: string;\n}): {\n    name: string;\n} (+1 overload)\nnamespace $statefunction $state<{\n    name: string;\n}>(initial: {\n    name: string;\n}): {\n    name: string;\n} (+1 overload)\nnamespace $statelet count = $state(0);name: string\n```\n\nExample:\n```text\nconst userState: {\n    name: string;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    name: string;\n}>(initial: {\n    name: string;\n}): {\n    name: string;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\n<script>\n\timport { userState } from './state.svelte.js';\n</script>\n\n<p>User name: {userState.name}</p>\n<button onclick={() => {\n\tuserState.name = 'new name';\n}}>\n\tchange name\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { userState } from './state.svelte.js';\n</script>\n\n<p>User name: {userState.name}</p>\n<button onclick={() => {\n\tuserState.name = 'new name';\n}}>\n\tchange name\n</button>\n```\n\nExample:\n```text\nimport { function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable } from 'svelte/store';\n\nconst const count: Writable<number>count = writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable(0);\n\nconst count: Writable<number>count.Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): UnsubscriberSubscribe on value changes.\n@paramrun subscription callback@paraminvalidate cleanup callbacksubscribe((value: numbervalue) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(value: numbervalue);\n}); // logs '0'\n\nconst count: Writable<number>count.Writable<number>.set(this: void, value: number): voidSet value and inform subscribers.\n@paramvalue to setset(1); // logs '1'\n\nconst count: Writable<number>count.Writable<number>.update(this: void, updater: Updater<number>): voidUpdate value using callback and inform subscribers.\n@paramupdater callbackupdate((n: numbern) => n: numbern + 1); // logs '2'function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Writableconst count: Writable<number>writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Writableconst count: Writable<number>Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): Unsubscribervalue: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()value: numberconst count: Writable<number>Writable<number>.set(this: void, value: number): voidconst count: Writable<number>Writable<number>.update(this: void, updater: Updater<number>): voidn: numbern: number\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nimport { function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable } from 'svelte/store';\n\nconst const count: Writable<number>count = writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable(0, () => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('got a subscriber');\n\treturn () => var console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('no more subscribers');\n});\n\nconst count: Writable<number>count.Writable<number>.set(this: void, value: number): voidSet value and inform subscribers.\n@paramvalue to setset(1); // does nothing\n\nconst const unsubscribe: Unsubscriberunsubscribe = const count: Writable<number>count.Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): UnsubscriberSubscribe on value changes.\n@paramrun subscription callback@paraminvalidate cleanup callbacksubscribe((value: numbervalue) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(value: numbervalue);\n}); // logs 'got a subscriber', then '1'\n\nconst unsubscribe: () => voidunsubscribe(); // logs 'no more subscribers'function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Writableconst count: Writable<number>writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Writablevar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const count: Writable<number>Writable<number>.set(this: void, value: number): voidconst unsubscribe: Unsubscriberconst count: Writable<number>Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): Unsubscribervalue: numbervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()value: numberconst unsubscribe: () => void\n```\n\nExample:\n```text\nimport { function readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>Creates a Readable store that allows reading by subscription.\n@paramvalue initial valuereferencereadable } from 'svelte/store';\n\nconst const time: Readable<Date>time = readable<Date>(value?: Date | undefined, start?: StartStopNotifier<Date> | undefined): Readable<Date>Creates a Readable store that allows reading by subscription.\n@paramvalue initial valuereferencereadable(new var Date: DateConstructor\nnew () => Date (+4 overloads)Date(), (set: (value: Date) => voidset) => {\n\tset: (value: Date) => voidset(new var Date: DateConstructor\nnew () => Date (+4 overloads)Date());\n\n\tconst const interval: NodeJS.Timeoutinterval = function setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules repeated execution of callback every delay milliseconds.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setInterval().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearInterval()setInterval(() => {\n\t\tset: (value: Date) => voidset(new var Date: DateConstructor\nnew () => Date (+4 overloads)Date());\n\t}, 1000);\n\n\treturn () => function clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)Cancels a Timeout object created by setInterval().\n@sincev0.0.1@paramtimeout A Timeout object as returned by setInterval()\nor the primitive of the Timeout object as a string or a number.clearInterval(const interval: NodeJS.Timeoutinterval);\n});\n\nconst const ticktock: Readable<string>ticktock = readable<string>(value?: string | undefined, start?: StartStopNotifier<string> | undefined): Readable<string>Creates a Readable store that allows reading by subscription.\n@paramvalue initial valuereferencereadable('tick', (set: (value: string) => voidset, update: (fn: Updater<string>) => voidupdate) => {\n\tconst const interval: NodeJS.Timeoutinterval = function setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules repeated execution of callback every delay milliseconds.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setInterval().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearInterval()setInterval(() => {\n\t\tupdate: (fn: Updater<string>) => voidupdate((sound: stringsound) => (sound: stringsound === 'tick' ? 'tock' : 'tick'));\n\t}, 1000);\n\n\treturn () => function clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)Cancels a Timeout object created by setInterval().\n@sincev0.0.1@paramtimeout A Timeout object as returned by setInterval()\nor the primitive of the Timeout object as a string or a number.clearInterval(const interval: NodeJS.Timeoutinterval);\n});function readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>Readableconst time: Readable<Date>readable<Date>(value?: Date | undefined, start?: StartStopNotifier<Date> | undefined): Readable<Date>Readablevar Date: DateConstructor\nnew () => Date (+4 overloads)var Date: DateConstructor\nnew () => Date (+4 overloads)set: (value: Date) => voidset: (value: Date) => voidvar Date: DateConstructor\nnew () => Date (+4 overloads)var Date: DateConstructor\nnew () => Date (+4 overloads)const interval: NodeJS.Timeoutfunction setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setInterval()callback1callbackclearInterval()set: (value: Date) => voidvar Date: DateConstructor\nnew () => Date (+4 overloads)var Date: DateConstructor\nnew () => Date (+4 overloads)function clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)TimeoutsetInterval()TimeoutsetInterval()Timeoutconst interval: NodeJS.Timeoutconst ticktock: Readable<string>readable<string>(value?: string | undefined, start?: StartStopNotifier<string> | undefined): Readable<string>Readableset: (value: string) => voidupdate: (fn: Updater<string>) => voidconst interval: NodeJS.Timeoutfunction setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setInterval()callback1callbackclearInterval()update: (fn: Updater<string>) => voidsound: stringsound: stringfunction clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)TimeoutsetInterval()TimeoutsetInterval()Timeoutconst interval: NodeJS.Timeout\n```\n\nExample:\n```text\nvar Date: DateConstructor\nnew () => Date (+4 overloads)\n```\n\nExample:\n```text\nimport { function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived } from 'svelte/store';\n\nconst const doubled: Readable<number>doubled = derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number) => number, initial_value?: number | undefined): Readable<number> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived(const a: Writable<number>a, ($a: number$a) => $a: number$a * 2);function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)const doubled: Readable<number>derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number) => number, initial_value?: number | undefined): Readable<number> (+1 overload)const a: Writable<number>$a: number$a: number\n```\n\nExample:\n```text\nimport { function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived } from 'svelte/store';\n\nconst const delayed: Readable<number>delayed = derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number, set: (value: number) => void, update: (fn: Updater<number>) => void) => Unsubscriber | void, initial_value?: number | undefined): Readable<number> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived(\n\tconst a: Writable<number>a,\n\t($a: number$a, set: (value: number) => voidset) => {\n\t\tfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules execution of a one-time callback after delay milliseconds.\nThe callback will likely not be invoked in precisely delay milliseconds.\nNode.js makes no guarantees about the exact timing of when callbacks will fire,\nnor of their ordering. The callback will be called as close as possible to the\ntime specified.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setTimeout().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearTimeout()setTimeout(() => set: (value: number) => voidset($a: number$a), 1000);\n\t},\n\t2000\n);\n\nconst const delayedIncrement: Readable<unknown>delayedIncrement = derived<Writable<number>, unknown>(stores: Writable<number>, fn: (values: number, set: (value: unknown) => void, update: (fn: Updater<unknown>) => void) => Unsubscriber | void, initial_value?: unknown): Readable<unknown> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived(const a: Writable<number>a, ($a: number$a, set: (value: unknown) => voidset, update: (fn: Updater<unknown>) => voidupdate) => {\n\tset: (value: unknown) => voidset($a: number$a);\n\tfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules execution of a one-time callback after delay milliseconds.\nThe callback will likely not be invoked in precisely delay milliseconds.\nNode.js makes no guarantees about the exact timing of when callbacks will fire,\nnor of their ordering. The callback will be called as close as possible to the\ntime specified.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setTimeout().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearTimeout()setTimeout(() => update: (fn: Updater<unknown>) => voidupdate((x: unknownx) => x + 1), 1000);\n\t// every time $a produces a value, this produces two\n\t// values, $a immediately and then $a + 1 a second later\n});function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)const delayed: Readable<number>derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number, set: (value: number) => void, update: (fn: Updater<number>) => void) => Unsubscriber | void, initial_value?: number | undefined): Readable<number> (+1 overload)const a: Writable<number>$a: numberset: (value: number) => voidfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaycallbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setTimeout()callback1callbackclearTimeout()set: (value: number) => void$a: numberconst delayedIncrement: Readable<unknown>derived<Writable<number>, unknown>(stores: Writable<number>, fn: (values: number, set: (value: unknown) => void, update: (fn: Updater<unknown>) => void) => Unsubscriber | void, initial_value?: unknown): Readable<unknown> (+1 overload)const a: Writable<number>$a: numberset: (value: unknown) => voidupdate: (fn: Updater<unknown>) => voidset: (value: unknown) => void$a: numberfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaycallbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setTimeout()callback1callbackclearTimeout()update: (fn: Updater<unknown>) => voidx: unknown\n```\n\nExample:\n```text\nimport { function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived } from 'svelte/store';\n\nconst const tick: Readable<number>tick = derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number, set: (value: number) => void, update: (fn: Updater<number>) => void) => Unsubscriber | void, initial_value?: number | undefined): Readable<number> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived(\n\tconst frequency: Writable<number>frequency,\n\t($frequency: number$frequency, set: (value: number) => voidset) => {\n\t\tconst const interval: NodeJS.Timeoutinterval = function setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules repeated execution of callback every delay milliseconds.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setInterval().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearInterval()setInterval(() => {\n\t\t\tset: (value: number) => voidset(var Date: DateConstructorEnables basic storage and retrieval of dates and times.\nDate.DateConstructor.now(): numberReturns the number of milliseconds elapsed since midnight, January 1, 1970 Universal Coordinated Time (UTC).\nnow());\n\t\t}, 1000 / $frequency: number$frequency);\n\n\t\treturn () => {\n\t\t\tfunction clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)Cancels a Timeout object created by setInterval().\n@sincev0.0.1@paramtimeout A Timeout object as returned by setInterval()\nor the primitive of the Timeout object as a string or a number.clearInterval(const interval: NodeJS.Timeoutinterval);\n\t\t};\n\t},\n\t2000\n);function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)const tick: Readable<number>derived<Writable<number>, number>(stores: Writable<number>, fn: (values: number, set: (value: number) => void, update: (fn: Updater<number>) => void) => Unsubscriber | void, initial_value?: number | undefined): Readable<number> (+1 overload)const frequency: Writable<number>$frequency: numberset: (value: number) => voidconst interval: NodeJS.Timeoutfunction setInterval<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setInterval()callback1callbackclearInterval()set: (value: number) => voidvar Date: DateConstructorDateConstructor.now(): number$frequency: numberfunction clearInterval(timeout: NodeJS.Timeout | string | number | undefined): void (+1 overload)TimeoutsetInterval()TimeoutsetInterval()Timeoutconst interval: NodeJS.Timeout\n```\n\nExample:\n```text\nimport { function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived } from 'svelte/store';\n\nconst const summed: Readable<number>summed = derived<[Writable<number>, Writable<number>], number>(stores: [Writable<number>, Writable<number>], fn: (values: [number, number]) => number, initial_value?: number | undefined): Readable<number> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived([const a: Writable<number>a, const b: Writable<number>b], ([$a: number$a, $b: number$b]) => $a: number$a + $b: number$b);\n\nconst const delayed: Readable<unknown>delayed = derived<[Writable<number>, Writable<number>], unknown>(stores: [Writable<number>, Writable<number>], fn: (values: [number, number], set: (value: unknown) => void, update: (fn: Updater<unknown>) => void) => Unsubscriber | void, initial_value?: unknown): Readable<unknown> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived([const a: Writable<number>a, const b: Writable<number>b], ([$a: number$a, $b: number$b], set: (value: unknown) => voidset) => {\n\tfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)Schedules execution of a one-time callback after delay milliseconds.\nThe callback will likely not be invoked in precisely delay milliseconds.\nNode.js makes no guarantees about the exact timing of when callbacks will fire,\nnor of their ordering. The callback will be called as close as possible to the\ntime specified.\nWhen delay is larger than 2147483647 or less than 1 or NaN, the delay\nwill be set to 1. Non-integer delays are truncated to an integer.\nIf callback is not a function, a TypeError will be thrown.\nThis method has a custom variant for promises that is available using\ntimersPromises.setTimeout().\n@sincev0.0.1@paramcallback The function to call when the timer elapses.@paramdelay The number of milliseconds to wait before calling the\ncallback. Default: 1.@paramargs Optional arguments to pass when the callback is called.@returnsfor use with clearTimeout()setTimeout(() => set: (value: unknown) => voidset($a: number$a + $b: number$b), 1000);\n});function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)const summed: Readable<number>derived<[Writable<number>, Writable<number>], number>(stores: [Writable<number>, Writable<number>], fn: (values: [number, number]) => number, initial_value?: number | undefined): Readable<number> (+1 overload)const a: Writable<number>const b: Writable<number>$a: number$b: number$a: number$b: numberconst delayed: Readable<unknown>derived<[Writable<number>, Writable<number>], unknown>(stores: [Writable<number>, Writable<number>], fn: (values: [number, number], set: (value: unknown) => void, update: (fn: Updater<unknown>) => void) => Unsubscriber | void, initial_value?: unknown): Readable<unknown> (+1 overload)const a: Writable<number>const b: Writable<number>$a: number$b: numberset: (value: unknown) => voidfunction setTimeout<[]>(callback: () => void, delay?: number): NodeJS.Timeout (+2 overloads)callbackdelaycallbackdelaydelay21474836471NaNdelay1callbackTypeErrortimersPromises.setTimeout()callback1callbackclearTimeout()set: (value: unknown) => void$a: number$b: number\n```\n\nExample:\n```text\nimport { function readonly<T>(store: Readable<T>): Readable<T>Takes a store and returns a new one derived from the old one that is readable.\n@paramstore - store to make readonlyreferencereadonly, function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable } from 'svelte/store';\n\nconst const writableStore: Writable<number>writableStore = writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable(1);\nconst const readableStore: Readable<number>readableStore = readonly<number>(store: Readable<number>): Readable<number>Takes a store and returns a new one derived from the old one that is readable.\n@paramstore - store to make readonlyreferencereadonly(const writableStore: Writable<number>writableStore);\n\nconst readableStore: Readable<number>readableStore.Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): UnsubscriberSubscribe on value changes.\n@paramrun subscription callback@paraminvalidate cleanup callbacksubscribe(var console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(...data: any[]): void (+1 overload)The console.log() static method outputs a message to the console.\nMDN Reference\nlog);\n\nconst writableStore: Writable<number>writableStore.Writable<number>.set(this: void, value: number): voidSet value and inform subscribers.\n@paramvalue to setset(2); // console: 2\nconst readableStore: Readable<number>readableStore.set(2); // ERRORfunction readonly<T>(store: Readable<T>): Readable<T>function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Writableconst writableStore: Writable<number>writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Writableconst readableStore: Readable<number>readonly<number>(store: Readable<number>): Readable<number>const writableStore: Writable<number>const readableStore: Readable<number>Readable<number>.subscribe(this: void, run: Subscriber<number>, invalidate?: () => void): Unsubscribervar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(...data: any[]): void (+1 overload)console.log()const writableStore: Writable<number>Writable<number>.set(this: void, value: number): voidconst readableStore: Readable<number>\n```\n\nExample:\n```text\nimport { function get<T>(store: Readable<T>): TGet the current value from a store by subscribing and immediately unsubscribing.\nreferenceget } from 'svelte/store';\n\nconst const value: stringvalue = get<string>(store: Readable<string>): stringGet the current value from a store by subscribing and immediately unsubscribing.\nreferenceget(const store: Writable<string>store);function get<T>(store: Readable<T>): Tconst value: stringget<string>(store: Readable<string>): stringconst store: Writable<string>\n```\n\nExample:\n```text\nstore = { subscribe: (subscription: (value: any) => void) => () => undefinedsubscribe: (subscription: (value: any) => voidsubscription: (value: anyvalue: any) => void) => (() => void), set: (value: any) => undefinedset?: (value: anyvalue: any) => void }subscribe: (subscription: (value: any) => void) => () => undefinedsubscription: (value: any) => voidvalue: anyset: (value: any) => undefinedvalue: any\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":834,"estimatedTokens":12344}}62{"id":"doc-sv_utils_svelte_cli_docs-932a982d","source":"documentation","title":"sv-utils • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv-utils","text":"Example:\n```text\nnpm install -D @sveltejs/sv-utils\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.\nReturn false from the callback to abort - the original content is returned unchanged.\nscript(/* ... */);\nconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a Svelte component file.\nReturn false from the callback to abort - the original content is returned unchanged.\nsvelte(/* ... */);\n// ...const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalse\n```\n\nExample:\n```text\nconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}\n```\n\nExample:\n```text\nimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);\n```\n\nExample:\n```text\nfunction script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => string\n```\n\nExample:\n```text\nfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => string\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\tfile.viteConfig,\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.\nReturn false from the callback to abort - the original content is returned unchanged.\nscript(({ ast: Programast, js: typeof index_d_exports$3js }) => {\n\t\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultaddDefault(ast: Programast, { as: stringas: 'foo', from: stringfrom: 'foo' });\n\t\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.vite\nexport index_d_exports$3.vitevite.vite_d_exports.addPlugin(ast: Program, options: {\n    code: string;\n    mode?: \"append\" | \"prepend\";\n}): void\nexport vite_d_exports.addPluginaddPlugin(ast: Programast, { code: stringcode: 'foo()' });\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: Programjs: typeof index_d_exports$3js: typeof index_d_exports$3namespace index_d_exports$3.imports\nexport index_d_exports$3.importsnamespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultast: Programas: stringfrom: stringjs: typeof index_d_exports$3namespace index_d_exports$3.vite\nexport index_d_exports$3.vitenamespace index_d_exports$3.vite\nexport index_d_exports$3.vitevite_d_exports.addPlugin(ast: Program, options: {\n    code: string;\n    mode?: \"append\" | \"prepend\";\n}): void\nexport vite_d_exports.addPluginvite_d_exports.addPlugin(ast: Program, options: {\n    code: string;\n    mode?: \"append\" | \"prepend\";\n}): void\nexport vite_d_exports.addPluginast: Programcode: string\n```\n\nExample:\n```text\nnamespace index_d_exports$3.imports\nexport index_d_exports$3.imports\n```\n\nExample:\n```text\nimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefault\n```\n\nExample:\n```text\nnamespace index_d_exports$3.vite\nexport index_d_exports$3.vite\n```\n\nExample:\n```text\nvite_d_exports.addPlugin(ast: Program, options: {\n    code: string;\n    mode?: \"append\" | \"prepend\";\n}): void\nexport vite_d_exports.addPlugin\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\tlayoutPath,\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a Svelte component file.\nReturn false from the callback to abort - the original content is returned unchanged.\nsvelte(({ ast: AST.Rootast, svelte: typeof index_d_exports$4svelte }) => {\n\t\tsvelte: typeof index_d_exports$4svelte.index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentaddFragment(ast: AST.Rootast, '<Foo />');\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: AST.Rootsvelte: typeof index_d_exports$4svelte: typeof index_d_exports$4index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentindex_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentast: AST.Root\n```\n\nExample:\n```text\nindex_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragment\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\tlayoutPath,\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function svelteScript(scriptOptions: {\n    language: \"ts\" | \"js\";\n}, cb: (file: {\n    ast: RootWithInstance;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): TransformFnTransform a Svelte component file with a script block guaranteed.\nCalls ensureScript before invoking your callback, so ast.instance is always non-null.\nPass { language } as the first argument to set the script language.\nReturn false from the callback to abort - the original content is returned unchanged.\nsvelteScript({ language: \"ts\" | \"js\"language: 'ts' }, ({ ast: RootWithInstanceast, svelte: typeof index_d_exports$4svelte, js: typeof index_d_exports$3js }) => {\n\t\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultaddDefault(ast: RootWithInstanceast.instance: AST.ScriptThe parsed <script> element, if exists\ninstance.AST.Script.content: Programcontent, { as: stringas: 'Foo', from: stringfrom: './Foo.svelte' });\n\t\tsvelte: typeof index_d_exports$4svelte.index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentaddFragment(ast: RootWithInstanceast, '<Foo />');\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function svelteScript(scriptOptions: {\n    language: \"ts\" | \"js\";\n}, cb: (file: {\n    ast: RootWithInstance;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): TransformFnfunction svelteScript(scriptOptions: {\n    language: \"ts\" | \"js\";\n}, cb: (file: {\n    ast: RootWithInstance;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): TransformFnensureScriptast.instance{ language }falselanguage: \"ts\" | \"js\"ast: RootWithInstancesvelte: typeof index_d_exports$4js: typeof index_d_exports$3js: typeof index_d_exports$3namespace index_d_exports$3.imports\nexport index_d_exports$3.importsnamespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultast: RootWithInstanceinstance: AST.Script<script>AST.Script.content: Programas: stringfrom: stringsvelte: typeof index_d_exports$4index_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentindex_d_exports$4.addFragment(ast: AST.Root, content: string, options?: {\n    mode?: \"append\" | \"prepend\";\n    language?: \"ts\" | \"js\";\n}): void\nexport index_d_exports$4.addFragmentast: RootWithInstance\n```\n\nExample:\n```text\nfunction svelteScript(scriptOptions: {\n    language: \"ts\" | \"js\";\n}, cb: (file: {\n    ast: RootWithInstance;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): TransformFn\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\tfile.stylesheet,\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function css(cb: (file: {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    content: string;\n    css: typeof index_d_exports$1;\n}) => void | false, options?: TransformOptions): TransformFnTransform a CSS file.\nReturn false from the callback to abort - the original content is returned unchanged.\ncss(({ ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">ast, css: typeof index_d_exports$1css }) => {\n\t\tcss: typeof index_d_exports$1css.index_d_exports$1.addAtRule(node: _CSS.StyleSheetBase, options: {\n    name: string;\n    params: string;\n    append: boolean;\n}): _CSS.Atrule\nexport index_d_exports$1.addAtRuleaddAtRule(ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">ast, { name: stringname: 'import', params: stringparams: \"'tailwindcss'\" });\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function css(cb: (file: {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    content: string;\n    css: typeof index_d_exports$1;\n}) => void | false, options?: TransformOptions): TransformFnfunction css(cb: (file: {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    content: string;\n    css: typeof index_d_exports$1;\n}) => void | false, options?: TransformOptions): TransformFnfalseast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">css: typeof index_d_exports$1css: typeof index_d_exports$1index_d_exports$1.addAtRule(node: _CSS.StyleSheetBase, options: {\n    name: string;\n    params: string;\n    append: boolean;\n}): _CSS.Atrule\nexport index_d_exports$1.addAtRuleindex_d_exports$1.addAtRule(node: _CSS.StyleSheetBase, options: {\n    name: string;\n    params: string;\n    append: boolean;\n}): _CSS.Atrule\nexport index_d_exports$1.addAtRuleast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">name: stringparams: string\n```\n\nExample:\n```text\nfunction css(cb: (file: {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    content: string;\n    css: typeof index_d_exports$1;\n}) => void | false, options?: TransformOptions): TransformFn\n```\n\nExample:\n```text\nindex_d_exports$1.addAtRule(node: _CSS.StyleSheetBase, options: {\n    name: string;\n    params: string;\n    append: boolean;\n}): _CSS.Atrule\nexport index_d_exports$1.addAtRule\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\tfile.typeConfig,\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.json<any>(cb: (file: {\n    data: any;\n    content: string;\n    json: typeof json_d_exports;\n}) => void | false, options?: TransformOptions): TransformFnTransform a JSON file.\nReturn false from the callback to abort - the original content is returned unchanged.\njson(({ data: anydata }) => {\n\t\tdata: anydata.compilerOptions ??= {};\n\t\tdata: anydata.compilerOptions.strict = true;\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);json<any>(cb: (file: {\n    data: any;\n    content: string;\n    json: typeof json_d_exports;\n}) => void | false, options?: TransformOptions): TransformFnjson<any>(cb: (file: {\n    data: any;\n    content: string;\n    json: typeof json_d_exports;\n}) => void | false, options?: TransformOptions): TransformFnfalsedata: anydata: anydata: any\n```\n\nExample:\n```text\njson<any>(cb: (file: {\n    data: any;\n    content: string;\n    json: typeof json_d_exports;\n}) => void | false, options?: TransformOptions): TransformFn\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\t'.env',\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function text(cb: (file: {\n    content: string;\n    text: typeof text_d_exports;\n}) => string | false): TransformFnTransform a plain text file (.env, .gitignore, etc.).\nUnlike other transforms there’s no AST here - just string in, string out.\nReturn the new content, or false to abort (original content is returned unchanged).\ntext(({ content: stringcontent }) => {\n\t\treturn content: stringcontent + '\\nDATABASE_URL=\"file:local.db\"';\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function text(cb: (file: {\n    content: string;\n    text: typeof text_d_exports;\n}) => string | false): TransformFnfunction text(cb: (file: {\n    content: string;\n    text: typeof text_d_exports;\n}) => string | false): TransformFnfalsecontent: stringcontent: string\n```\n\nExample:\n```text\nfunction text(cb: (file: {\n    content: string;\n    text: typeof text_d_exports;\n}) => string | false): TransformFn\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nsv.file(\n\t'eslint.config.js',\n\tconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.\nReturn false from the callback to abort - the original content is returned unchanged.\nscript(({ ast: Programast, js: typeof index_d_exports$3js }) => {\n\t\tconst { value: anyvalue: const existing: anyexisting } = js: typeof index_d_exports$3js.namespace index_d_exports$3.exports\nexport index_d_exports$3.exportsexports.exports_d_exports.createDefault<any>(node: Program, options: {\n    fallback: any;\n}): ExportDefaultResult<any>\nexport exports_d_exports.createDefaultcreateDefault(ast: Programast, { fallback: anyfallback: myConfig });\n\t\tif (const existing: anyexisting !== myConfig) {\n\t\t\t// config already exists, don't touch it\n\t\t\treturn false;\n\t\t}\n\t\t// ... continue modifying ast\n\t})\n);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: Programjs: typeof index_d_exports$3value: anyconst existing: anyjs: typeof index_d_exports$3namespace index_d_exports$3.exports\nexport index_d_exports$3.exportsnamespace index_d_exports$3.exports\nexport index_d_exports$3.exportsexports_d_exports.createDefault<any>(node: Program, options: {\n    fallback: any;\n}): ExportDefaultResult<any>\nexport exports_d_exports.createDefaultexports_d_exports.createDefault<any>(node: Program, options: {\n    fallback: any;\n}): ExportDefaultResult<any>\nexport exports_d_exports.createDefaultast: Programfallback: anyconst existing: any\n```\n\nExample:\n```text\nnamespace index_d_exports$3.exports\nexport index_d_exports$3.exports\n```\n\nExample:\n```text\nexports_d_exports.createDefault<any>(node: Program, options: {\n    fallback: any;\n}): ExportDefaultResult<any>\nexport exports_d_exports.createDefault\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\nconst const transform: (content: string) => stringtransform = const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a JavaScript/TypeScript file.\nReturn false from the callback to abort - the original content is returned unchanged.\nscript(({ ast: Programast, js: typeof index_d_exports$3js }) => {\n\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultaddDefault(ast: Programast, { as: stringas: 'foo', from: stringfrom: 'foo' });\n});\nconst const result: stringresult = const transform: (content: string) => stringtransform('export default {}');const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const transform: (content: string) => stringconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction script(cb: (file: {\n    ast: Program;\n    comments: Comments;\n    content: string;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: Programjs: typeof index_d_exports$3js: typeof index_d_exports$3namespace index_d_exports$3.imports\nexport index_d_exports$3.importsnamespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultast: Programas: stringfrom: stringconst result: stringconst transform: (content: string) => string\n```\n\nExample:\n```text\nsv.file(path, (content: anycontent) => {\n\t// curried\n\tconst const transform: anytransform = transforms.script(({ ast: anyast, js: anyjs }) => {\n\t\tjs: anyjs.imports.addDefault(ast: anyast, { as: stringas: 'foo', from: stringfrom: 'bar' });\n\t});\n\n\t// parser manipulation\n\tcontent: anycontent = const transform: anytransform(content: anycontent);\n\n\t// raw string manipulation\n\tcontent: anycontent = content: anycontent.replace('foo', 'baz');\n\n\treturn content: anycontent;\n});content: anyconst transform: anyast: anyjs: anyjs: anyast: anyas: stringfrom: stringcontent: anyconst transform: anycontent: anycontent: anycontent: anycontent: any\n```\n\nExample:\n```text\nimport { const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms } from '@sveltejs/sv-utils';\n\n// reusable - export from your package\nexport const const addFooImport: (content: string) => stringaddFooImport = const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}File transform primitives that know their format.\nsv-utils = what to do to content, sv = where and when to do it.\nEach transform wraps: parse -> callback({ast/data, utils}) -> generateCode().\nThe parser choice is baked into the transform type - you can’t accidentally\nparse a vite config as svelte because you never call a parser yourself.\nTransforms are curried: call with the callback to get a (content: string) => string\nfunction that plugs directly into sv.file().\n@exampleimport { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);transforms.function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringTransform a Svelte component file.\nReturn false from the callback to abort - the original content is returned unchanged.\nsvelte(({ ast: AST.Rootast, svelte: typeof index_d_exports$4svelte, js: typeof index_d_exports$3js }) => {\n\tsvelte: typeof index_d_exports$4svelte.index_d_exports$4.ensureScript(ast: AST.Root, options?: {\n    language?: \"ts\" | \"js\";\n}): asserts ast is RootWithInstance\nexport index_d_exports$4.ensureScriptensureScript(ast: AST.Rootast, { language?: \"js\" | \"ts\" | undefinedlanguage });\n\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultaddDefault(ast: AST.Rootast.AST.Root.instance: AST.Script | nullThe parsed <script> element, if exists\ninstance.AST.Script.content: Programcontent, { as: stringas: 'Foo', from: stringfrom: './Foo.svelte' });\n});const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);const addFooImport: (content: string) => stringconst transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}const transforms: {\n    script(cb: (file: {\n        ast: Program;\n        comments: Comments;\n        content: string;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    svelte(cb: (file: {\n        ast: AST.Root;\n        content: string;\n        svelte: typeof index_d_exports$4;\n        js: typeof index_d_exports$3;\n    }) => void | false, options?: TransformOptions): (content: string) => string;\n    ... 6 more ...;\n    text(cb: (file: {\n        content: string;\n        text: typeof text_d_exports;\n    }) => string | false): TransformFn;\n}sv-utils = what to do to content, sv = where and when to do it.(content: string) => stringsv.file()import { transforms } from '@sveltejs/sv-utils';\n\n// use with sv.file() - curried form plugs in directly\nsv.file(files.viteConfig, transforms.script(({ ast, js }) => {\n  js.vite.addPlugin(ast, { code: 'kitRoutes()' });\n}));\n\n// standalone usage / testing\nconst result = transforms.script(({ ast, js }) => {\n  js.imports.addDefault(ast, { as: 'foo', from: 'foo' });\n})(fileContent);function svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfunction svelte(cb: (file: {\n    ast: AST.Root;\n    content: string;\n    svelte: typeof index_d_exports$4;\n    js: typeof index_d_exports$3;\n}) => void | false, options?: TransformOptions): (content: string) => stringfalseast: AST.Rootsvelte: typeof index_d_exports$4js: typeof index_d_exports$3svelte: typeof index_d_exports$4index_d_exports$4.ensureScript(ast: AST.Root, options?: {\n    language?: \"ts\" | \"js\";\n}): asserts ast is RootWithInstance\nexport index_d_exports$4.ensureScriptindex_d_exports$4.ensureScript(ast: AST.Root, options?: {\n    language?: \"ts\" | \"js\";\n}): asserts ast is RootWithInstance\nexport index_d_exports$4.ensureScriptast: AST.Rootlanguage?: \"js\" | \"ts\" | undefinedjs: typeof index_d_exports$3namespace index_d_exports$3.imports\nexport index_d_exports$3.importsnamespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultast: AST.RootAST.Root.instance: AST.Script | null<script>AST.Script.content: Programas: stringfrom: string\n```\n\nExample:\n```text\nindex_d_exports$4.ensureScript(ast: AST.Root, options?: {\n    language?: \"ts\" | \"js\";\n}): asserts ast is RootWithInstance\nexport index_d_exports$4.ensureScript\n```\n\nExample:\n```text\nsv.file('+page.svelte', addFooImport);\nsv.file('index.svelte', addFooImport);\n```\n\nExample:\n```text\nimport { const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse } from '@sveltejs/sv-utils';\n\nconst { const ast: Programast, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.script: (source: string) => {\n    ast: Program;\n    comments: Comments;\n} & ParseBasescript(content);\nconst { const ast: AST.Rootast, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.svelte: (source: string) => {\n    ast: AST.Root;\n} & ParseBasesvelte(content);\nconst { const ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">ast, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.css: (source: string) => {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n} & ParseBasecss(content);\nconst { const data: anydata, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.json: (source: string) => {\n    data: any;\n} & ParseBasejson(content);\nconst { const data: YamlDocumentdata, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.yaml: (source: string) => {\n    data: YamlDocument;\n} & ParseBaseyaml(content);\nconst { const data: TomlTabledata, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.toml: (source: string) => {\n    data: TomlTable;\n} & ParseBasetoml(content);\nconst { const ast: AST.Fragmentast, const generateCode: () => stringGenerate the code after manipulating the ast.\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();generateCode } = const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}Low-level parsers. Prefer transforms for add-on file edits — it picks the\nright parser for you and handles generateCode() automatically.\nUse parse directly when you need error handling around parsing or\nconditional parser selection at runtime.\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');parse.html: (source: string) => {\n    ast: AST.Fragment;\n} & ParseBasehtml(content);const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');const ast: Programconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');script: (source: string) => {\n    ast: Program;\n    comments: Comments;\n} & ParseBasescript: (source: string) => {\n    ast: Program;\n    comments: Comments;\n} & ParseBaseconst ast: AST.Rootconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');svelte: (source: string) => {\n    ast: AST.Root;\n} & ParseBasesvelte: (source: string) => {\n    ast: AST.Root;\n} & ParseBaseconst ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">const generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');css: (source: string) => {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n} & ParseBasecss: (source: string) => {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n} & ParseBaseconst data: anyconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');json: (source: string) => {\n    data: any;\n} & ParseBasejson: (source: string) => {\n    data: any;\n} & ParseBaseconst data: YamlDocumentconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');yaml: (source: string) => {\n    data: YamlDocument;\n} & ParseBaseyaml: (source: string) => {\n    data: YamlDocument;\n} & ParseBaseconst data: TomlTableconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');toml: (source: string) => {\n    data: TomlTable;\n} & ParseBasetoml: (source: string) => {\n    data: TomlTable;\n} & ParseBaseconst ast: AST.Fragmentconst generateCode: () => stringastimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}const parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}transformsgenerateCode()parseimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');html: (source: string) => {\n    ast: AST.Fragment;\n} & ParseBasehtml: (source: string) => {\n    ast: AST.Fragment;\n} & ParseBase\n```\n\nExample:\n```text\nconst parse: {\n    css: (source: string) => {\n        ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n    } & ParseBase;\n    html: (source: string) => {\n        ast: AST.Fragment;\n    } & ParseBase;\n    json: (source: string) => {\n        data: any;\n    } & ParseBase;\n    script: (source: string) => {\n        ast: Program;\n        comments: Comments;\n    } & ParseBase;\n    svelte: (source: string) => {\n        ast: AST.Root;\n    } & ParseBase;\n    toml: (source: string) => {\n        data: TomlTable;\n    } & ParseBase;\n    yaml: (source: string) => {\n        data: YamlDocument;\n    } & ParseBase;\n}\n```\n\nExample:\n```text\nimport { parse } from '@sveltejs/sv-utils';\n\nconst { ast, generateCode } = parse.script('function add(a, b) { return a + b; }');\nconst { ast, generateCode } = parse.svelte('<div>Hello, world!</div>');\nconst { ast, generateCode } = parse.css('body { color: red; }');\nconst { data, generateCode } = parse.json('{ \"name\": \"John\", \"age\": 30 }');\nconst { data, generateCode } = parse.yaml('name: John');\nconst { data, generateCode } = parse.toml('name = \"John\"');\nconst { ast, generateCode } = parse.html('<div>Hello, world!</div>');\n```\n\nExample:\n```text\nimport { svelte } from 'sv/core';\nconst { ast, generateCode } = parse.svelte(content);\n\nsvelte.addFragment(ast, '<p>Hello World</p>');\n\nconst code = generateCode();\n```\n\nExample:\n```text\nscript: (source: string) => {\n    ast: Program;\n    comments: Comments;\n} & ParseBase\n```\n\nExample:\n```text\nsvelte: (source: string) => {\n    ast: AST.Root;\n} & ParseBase\n```\n\nExample:\n```text\ncss: (source: string) => {\n    ast: Omit<_CSS.StyleSheetBase, \"attributes\" | \"content\">;\n} & ParseBase\n```\n\nExample:\n```text\njson: (source: string) => {\n    data: any;\n} & ParseBase\n```\n\nExample:\n```text\nyaml: (source: string) => {\n    data: YamlDocument;\n} & ParseBase\n```\n\nExample:\n```text\ntoml: (source: string) => {\n    data: TomlTable;\n} & ParseBase\n```\n\nExample:\n```text\nhtml: (source: string) => {\n    ast: AST.Fragment;\n} & ParseBase\n```\n\nExample:\n```text\nimport { const svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}Helpers for the svelte/kit config, which can live either in a svelte.config.{js,ts} default\nexport or in the object passed to sveltekit() in a vite.config.{js,ts}.\nsvelteConfig } from '@sveltejs/sv-utils';\n\n// inside an add-on's `run({ sv, cwd })`:\nconst svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}Helpers for the svelte/kit config, which can live either in a svelte.config.{js,ts} default\nexport or in the object passed to sveltekit() in a vite.config.{js,ts}.\nsvelteConfig.edit: (target: {\n    sv: SvFileApi;\n    cwd: string;\n}, editFn: SvelteConfEdit) => voidEdit the config wherever it lives (creating svelte.config.js if there is none).\nedit({ sv: SvFileApisv, cwd: stringcwd }, ({ ast: Programast, property: <T extends Expression | Identifier>(name: string, opts: {\n    fallback: T;\n}) => TGet-or-create a top-level config option’s value, placed in the correct location for its name\n(kit-level options end up under kit in a svelte.config, flattened in a vite.config).\nproperty, override: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voidSet/override top-level config options, each routed to the correct location by its name.\nPass dropLeadingComments with option names whose now-stale leading comments should be removed\n(e.g. the adapter-auto note when switching adapters).\noverride, js: typeof index_d_exports$3js }) => {\n\t// svelte-level option - get-or-create its value, then mutate in place:\n\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.array\nexport index_d_exports$3.arrayarray.array_d_exports.append(node: ArrayExpression, element: string | Expression | SpreadElement): void\nexport array_d_exports.appendappend(property: <ArrayExpression>(name: string, opts: {\n    fallback: ArrayExpression;\n}) => ArrayExpressionGet-or-create a top-level config option’s value, placed in the correct location for its name\n(kit-level options end up under kit in a svelte.config, flattened in a vite.config).\nproperty('extensions', { fallback: ArrayExpressionfallback: js: typeof index_d_exports$3js.namespace index_d_exports$3.array\nexport index_d_exports$3.arrayarray.array_d_exports.create(): ArrayExpression\nexport array_d_exports.createcreate() }), '.svx');\n\n\t// kit option - routed automatically, no `kit` nesting to think about:\n\tjs: typeof index_d_exports$3js.namespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports.imports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultaddDefault(ast: Programast, { from: stringfrom: '@sveltejs/adapter-node', as: stringas: 'adapter' });\n\toverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voidSet/override top-level config options, each routed to the correct location by its name.\nPass dropLeadingComments with option names whose now-stale leading comments should be removed\n(e.g. the adapter-auto note when switching adapters).\noverride({\n\t\tadapter: CallExpressionadapter: js: typeof index_d_exports$3js.namespace index_d_exports$3.functions\nexport index_d_exports$3.functionsfunctions.function_d_exports.createCall(options: {\n    name: string;\n    args: string[];\n    useIdentifiers?: boolean;\n}): CallExpression\nexport function_d_exports.createCallcreateCall({ name: stringname: 'adapter', args: string[]args: [], useIdentifiers?: boolean | undefineduseIdentifiers: true })\n\t});\n});const svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}const svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}svelte.config.{js,ts}sveltekit()vite.config.{js,ts}const svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}const svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}svelte.config.{js,ts}sveltekit()vite.config.{js,ts}edit: (target: {\n    sv: SvFileApi;\n    cwd: string;\n}, editFn: SvelteConfEdit) => voidedit: (target: {\n    sv: SvFileApi;\n    cwd: string;\n}, editFn: SvelteConfEdit) => voidsvelte.config.jssv: SvFileApicwd: stringast: Programproperty: <T extends Expression | Identifier>(name: string, opts: {\n    fallback: T;\n}) => Tproperty: <T extends Expression | Identifier>(name: string, opts: {\n    fallback: T;\n}) => Tkitsvelte.configvite.configoverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voidoverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voiddropLeadingCommentsjs: typeof index_d_exports$3js: typeof index_d_exports$3namespace index_d_exports$3.array\nexport index_d_exports$3.arraynamespace index_d_exports$3.array\nexport index_d_exports$3.arrayarray_d_exports.append(node: ArrayExpression, element: string | Expression | SpreadElement): void\nexport array_d_exports.appendarray_d_exports.append(node: ArrayExpression, element: string | Expression | SpreadElement): void\nexport array_d_exports.appendproperty: <ArrayExpression>(name: string, opts: {\n    fallback: ArrayExpression;\n}) => ArrayExpressionproperty: <ArrayExpression>(name: string, opts: {\n    fallback: ArrayExpression;\n}) => ArrayExpressionkitsvelte.configvite.configfallback: ArrayExpressionjs: typeof index_d_exports$3namespace index_d_exports$3.array\nexport index_d_exports$3.arraynamespace index_d_exports$3.array\nexport index_d_exports$3.arrayarray_d_exports.create(): ArrayExpression\nexport array_d_exports.createarray_d_exports.create(): ArrayExpression\nexport array_d_exports.createjs: typeof index_d_exports$3namespace index_d_exports$3.imports\nexport index_d_exports$3.importsnamespace index_d_exports$3.imports\nexport index_d_exports$3.importsimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultimports_d_exports.addDefault(node: Program, options: {\n    from: string;\n    as: string;\n}): void\nexport imports_d_exports.addDefaultast: Programfrom: stringas: stringoverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voidoverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => voiddropLeadingCommentsadapter: CallExpressionjs: typeof index_d_exports$3namespace index_d_exports$3.functions\nexport index_d_exports$3.functionsnamespace index_d_exports$3.functions\nexport index_d_exports$3.functionsfunction_d_exports.createCall(options: {\n    name: string;\n    args: string[];\n    useIdentifiers?: boolean;\n}): CallExpression\nexport function_d_exports.createCallfunction_d_exports.createCall(options: {\n    name: string;\n    args: string[];\n    useIdentifiers?: boolean;\n}): CallExpression\nexport function_d_exports.createCallname: stringargs: string[]useIdentifiers?: boolean | undefined\n```\n\nExample:\n```text\nconst svelteConfig: {\n    edit: (target: {\n        sv: SvFileApi;\n        cwd: string;\n    }, editFn: SvelteConfEdit) => void;\n    find: (source: ConfigSource) => SvelteConfigLocation | null;\n    read: (source: ConfigSource) => SvelteConfigObjects | null;\n}\n```\n\nExample:\n```text\nedit: (target: {\n    sv: SvFileApi;\n    cwd: string;\n}, editFn: SvelteConfEdit) => void\n```\n\nExample:\n```text\nproperty: <T extends Expression | Identifier>(name: string, opts: {\n    fallback: T;\n}) => T\n```\n\nExample:\n```text\noverride: (props: ObjectMap$1, opts?: {\n    dropLeadingComments?: string[];\n}) => void\n```\n\nExample:\n```text\nnamespace index_d_exports$3.array\nexport index_d_exports$3.array\n```\n\nExample:\n```text\narray_d_exports.append(node: ArrayExpression, element: string | Expression | SpreadElement): void\nexport array_d_exports.append\n```\n\nExample:\n```text\nproperty: <ArrayExpression>(name: string, opts: {\n    fallback: ArrayExpression;\n}) => ArrayExpression\n```\n\nExample:\n```text\narray_d_exports.create(): ArrayExpression\nexport array_d_exports.create\n```\n\nExample:\n```text\nnamespace index_d_exports$3.functions\nexport index_d_exports$3.functions\n```\n\nExample:\n```text\nfunction_d_exports.createCall(options: {\n    name: string;\n    args: string[];\n    useIdentifiers?: boolean;\n}): CallExpression\nexport function_d_exports.createCall\n```\n\nExample:\n```text\nimport { pnpm } from '@sveltejs/sv-utils';\n\nif (packageManager === 'pnpm') {\n\tsv.file(file.findUp('pnpm-workspace.yaml'), pnpm.pnpm_d_exports.allowBuilds(...packages: string[]): TransformFn\nexport pnpm_d_exports.allowBuildsReturns a TransformFn for pnpm-workspace.yaml that adds packages to the\npnpm “allow builds” config.\nThe helper detects the installed pnpm version (via pnpm --version) and:\n\non pnpm >= 11 writes to the unified allowBuilds map ({ pkg: true }),\nmigrating any legacy onlyBuiltDependencies list into the map;\non pnpm < 11 writes to the legacy onlyBuiltDependencies list.\n\nif (packageManager === 'pnpm') {\n  sv.file(file.findUp('pnpm-workspace.yaml'), pnpm.allowBuilds('my-native-dep'));\n}allowBuilds('my-native-dep'));\n}pnpm_d_exports.allowBuilds(...packages: string[]): TransformFn\nexport pnpm_d_exports.allowBuildspnpm_d_exports.allowBuilds(...packages: string[]): TransformFn\nexport pnpm_d_exports.allowBuildspnpm-workspace.yamlpnpm --version>= 11allowBuilds{ pkg: true }onlyBuiltDependencies< 11onlyBuiltDependenciesif (packageManager === 'pnpm') {\n  sv.file(file.findUp('pnpm-workspace.yaml'), pnpm.allowBuilds('my-native-dep'));\n}\n```\n\nExample:\n```text\npnpm_d_exports.allowBuilds(...packages: string[]): TransformFn\nexport pnpm_d_exports.allowBuilds\n```\n\nExample:\n```text\nif (packageManager === 'pnpm') {\n  sv.file(file.findUp('pnpm-workspace.yaml'), pnpm.allowBuilds('my-native-dep'));\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.164Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":55,"totalLines":3553,"estimatedTokens":33589}}63{"id":"doc-overview_svelte_ai_docs-ed96fe3d","source":"documentation","title":"Overview • Svelte AI Docs","url":"https://svelte.dev/docs/ai/subagent","text":"Example:\n```text\n---\nname: svelte-file-editor\ndescription: Specialized Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and MUST use the tools from the MCP server or the `svelte-file-editor` skill if they are available. Fetches relevant documentation and validates code using the Svelte MCP server tools.\n---\n\nYou are a Svelte 5 expert responsible for writing, editing, and validating Svelte components and modules. You have access to the Svelte MCP server which provides documentation and code analysis tools. Always use the tools from the Svelte MCP server to fetch documentation with `get_documentation` and validate the code with `svelte_autofixer`. If the autofixer returns any issue or suggestions try to solve them.\n\nIf the MCP tools are not available you can use the `svelte-code-writer` skill to learn how to use the `@sveltejs/mcp` cli to access the same tools.\n\nIf the skill is not available you can run `npx @sveltejs/mcp@latest -y --help` to learn how to use it.\n\n## Available MCP tools\n\n### 1. list-sections\n\nLists all available Svelte 5 and SvelteKit documentation sections with titles and paths. Use this first to discover what documentation is available.\n\n### 2. get-documentation\n\nRetrieves full documentation for specified sections. Accepts a single section name or an array of section names. Use after `list-sections` to fetch relevant docs for the task at hand.\n\n**Example sections:** `$state`, `$derived`, `$effect`, `$props`, `$bindable`, `snippets`, `routing`, `load functions`\n\n### 3. svelte-autofixer\n\nAnalyzes Svelte code and returns suggestions to fix issues. Pass the component code directly to this tool. It will detect common mistakes like:\n\n- Using `$effect` instead of `$derived` for computations\n- Missing cleanup in effects\n- Svelte 4 syntax (`on:click`, `export let`, `<slot>`)\n- Missing keys in `{#each}` blocks\n- And more\n\n## Workflow\n\nWhen invoked to work on a Svelte file:\n\n### 1. Gather context (if needed)\n\nIf you're uncertain about Svelte 5 syntax or patterns, use the MCP tools:\n\n1. Call `list-sections` to see available documentation\n2. Call `get-documentation` with relevant section names\n\n### 2. Read the target file\n\nRead the file to understand the current implementation.\n\n### 3. Make changes\n\nApply edits following Svelte 5 best practices:\n\n### 4. Validate changes\n\nAfter editing, ALWAYS call `svelte-autofixer` with the updated code to check for issues.\n\n### 5. Fix any issues\n\nIf the autofixer reports problems, fix them and re-validate until no issues remain.\n\n## Output format\n\nAfter completing your work, provide:\n\n1. Summary of changes made\n2. Any issues found and fixed by the autofixer\n3. Recommendations for further improvements (if any)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.165Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":72,"estimatedTokens":700}}64{"id":"doc-overview_svelte_ai_docs-de2f8339","source":"documentation","title":"Overview • Svelte AI Docs","url":"https://svelte.dev/docs/ai/skills","text":"Example:\n```text\n## CLI tools\n\nYou have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`:\n\n### List documentation sections\n\n```bash\nnpx @sveltejs/mcp list-sections\n```\n\nLists all available Svelte 5 and SvelteKit documentation sections with titles and paths.\n\n### Get documentation\n\n```bash\nnpx @sveltejs/mcp get-documentation \"<section1>,<section2>,...\"\n```\n\nRetrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs.\n\n**Example:**\n\n```bash\nnpx @sveltejs/mcp get-documentation \"$state,$derived,$effect\"\n```\n\n### Svelte autofixer\n\n```bash\nnpx @sveltejs/mcp svelte-autofixer \"<code_or_path>\" [options]\n```\n\nAnalyzes Svelte code and suggests fixes for common issues.\n\n**Options:**\n\n- `--async` - Enable async Svelte mode (default: false)\n- `--svelte-version` - Target version: 4 or 5 (default: 5)\n\n**Examples:**\n\n```bash\n# Analyze inline code (escape $ as \\$)\nnpx @sveltejs/mcp svelte-autofixer '<script>let count = \\$state(0);</script>'\n\n# Analyze a file\nnpx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte\n\n# Target Svelte 4\nnpx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4\n```\n\n**Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\\$` to prevent shell variable substitution.\n\n## Workflow\n\n1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics\n2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues\n3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component\n```\n\nExample:\n```text\n## `$state`\n\nOnly use the `$state` rune for variables that should be _reactive_ — in other words, variables that cause an `$effect`, `$derived` or template expression to update. Everything else can be a normal variable.\n\nObjects and arrays (`$state({...})` or `$state([...])`) are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use `$state.raw` instead. This is often the case with API responses, for example.\n\n## `$derived`\n\nTo compute something from state, use `$derived` rather than `$effect`:\n\n```js\n// do this\nlet square = $derived(num * num);\n\n// don't do this\nlet square;\n\n$effect(() => {\n\tsquare = num * num;\n});\n```\n\n> [!NOTE] `$derived` is given an expression, _not_ a function. If you need to use a function (because the expression is complex, for example) use `$derived.by`.\n\nDeriveds are writable — you can assign to them, just like `$state`, except that they will re-evaluate when their expression changes.\n\nIf the derived expression is an object or array, it will be returned as-is — it is _not_ made deeply reactive. You can, however, use `$state` inside `$derived.by` in the rare cases that you need this.\n\n## `$effect`\n\nEffects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.\n\n- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)\n- If you need to run some code in response to user interaction, put the code directly in an event handler or use a [function binding](references/bind.md) as appropriate\n- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)\n- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)\n\nNever wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.\n\n## `$props`\n\nTreat props as though they will change. For example, values that depend on props should usually use `$derived`:\n\n```js\n// @errors: 2451\nlet { type } = $props();\n\n// do this\nlet color = $derived(type === 'danger' ? 'red' : 'green');\n\n// don't do this — `color` will not update if `type` changes\nlet color = type === 'danger' ? 'red' : 'green';\n```\n\n## `$inspect.trace`\n\n`$inspect.trace` is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add `$inspect.trace(label)` as the first line of an `$effect` or `$derived.by` (or any function they call) to trace their dependencies and discover which one triggered an update.\n\n## Events\n\nAny element attribute starting with `on` is treated as an event listener:\n\n```svelte\n<button onclick={() => {...}}>click me</button>\n\n<!-- attribute shorthand also works -->\n<button {onclick}>...</button>\n\n<!-- so do spread attributes -->\n<button {...props}>...</button>\n```\n\nIf you need to attach listeners to `window` or `document` you can use `<svelte:window>` and `<svelte:document>`:\n\n```svelte\n<svelte:window onkeydown={...} />\n<svelte:document onvisibilitychange={...} />\n```\n\nAvoid using `onMount` or `$effect` for this.\n\n## Snippets\n\n[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.\n\n```svelte\n{#snippet greeting(name)}\n\t<p>hello {name}!</p>\n{/snippet}\n\n{@render greeting('world')}\n```\n\n> [!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside `<script>`. A snippet that doesn't reference component state is also available in a `<script module>`, in which case it can be exported for use by other components.\n\n## Each blocks\n\nPrefer to use [keyed each blocks](references/each.md) — this improves performance by allowing Svelte to surgically insert or remove items rather than updating the DOM belonging to existing items.\n\n> [!NOTE] The key _must_ uniquely identify the object. Do not use the index as a key.\n\nAvoid destructuring if you need to mutate the item (with something like `bind:value={item.count}`, for example).\n\n## Using JavaScript variables in CSS\n\nIf you have a JS variable that you want to use inside CSS you can set a CSS custom property with the `style:` directive.\n\n```svelte\n<div style:--columns={columns}>...</div>\n```\n\nYou can then reference `var(--columns)` inside the component's `<style>`.\n\n## Styling child components\n\nThe CSS in a component's `<style>` is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties:\n\n```svelte\n<!-- Parent.svelte -->\n<Child --color=\"red\" />\n\n<!-- Child.svelte -->\n<h1>Hello</h1>\n\n<style>\n\th1 {\n\t\tcolor: var(--color);\n\t}\n</style>\n```\n\nIf this is impossible (for example, the child component comes from a library) you can use `:global` to override styles:\n\n```svelte\n<div>\n\t<Child />\n</div>\n\n<style>\n\tdiv :global {\n\t\th1 {\n\t\t\tcolor: red;\n\t\t}\n\t}\n</style>\n```\n\n## Context\n\nConsider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering.\n\nUse `createContext` rather than `setContext` and `getContext`, as it provides type safety.\n\n## Async Svelte\n\nIf using version 5.36 or higher, you can use [await expressions](references/await-expressions.md) and [hydratable](references/hydratable.md) to use promises directly inside components. Note that these require the `experimental.async` option to be enabled in `svelte.config.js` as they are not yet considered fully stable.\n\n## Avoid legacy features\n\nAlways use runes mode for new code, and avoid features that have more modern replacements:\n\n- use `$state` instead of implicit reactivity (e.g. `let count = 0; count += 1`)\n- use `$derived` and `$effect` instead of `$:` assignments and statements (but only use effects when there is no better solution)\n- use `$props` instead of `export let`, `$$props` and `$$restProps`\n- use `onclick={...}` instead of `on:click={...}`\n- use `{#snippet ...}` and `{@render ...}` instead of `<slot>` and `$$slots` and `<svelte:fragment>`\n- use `<DynamicComponent>` instead of `<svelte:component this={DynamicComponent}>`\n- use `import Self from './ThisComponent.svelte'` and `<Self>` instead of `<svelte:self>`\n- use classes with `$state` fields to share reactivity between components, instead of using stores\n- use `{@attach ...}` instead of `use:action`\n- use clsx-style arrays and objects in `class` attributes, instead of the `class:` directive\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.165Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":239,"estimatedTokens":2140}}65{"id":"doc-sv_check_svelte_cli_docs-e4b2864b","source":"documentation","title":"sv check • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv-check","text":"Example:\n```text\nnpm i -D svelte-check\n```\n\nExample:\n```text\nnpx sv check\n```\n\nExample:\n```text\nnpx sv check --ignore \"dist,build\"\n```\n\nExample:\n```text\nnpx sv check --compiler-warnings \"css_unused_selector:ignore,a11y_missing_attribute:error\"\n```\n\nExample:\n```text\nnpx sv check --diagnostic-sources \"js,svelte\"\n```\n\nExample:\n```text\n1590680325583 START \"/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles\"\n```\n\nExample:\n```text\n1590680326283 ERROR \"codeactions.svelte\" 1:16 \"Cannot find module 'blubb' or its corresponding type declarations.\"\n1590680326778 WARNING \"imported-file.svelte\" 0:37 \"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\"\n```\n\nExample:\n```text\n1590680326283 {\"type\":\"ERROR\",\"fn\":\"codeaction.svelte\",\"start\":{\"line\":1,\"character\":16},\"end\":{\"line\":1,\"character\":23},\"message\":\"Cannot find module 'blubb' or its corresponding type declarations.\",\"code\":2307,\"source\":\"js\"}\n1590680326778 {\"type\":\"WARNING\",\"filename\":\"imported-file.svelte\",\"start\":{\"line\":0,\"character\":37},\"end\":{\"line\":0,\"character\":51},\"message\":\"Component has unused export property 'prop'. If it is for external reference only, please consider using `export\nconst prop`\",\"code\":\"unused-export-let\",\"source\":\"svelte\"}\n```\n\nExample:\n```text\n1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS\n```\n\nExample:\n```text\n1590680328921 FAILURE \"Connection closed\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.165Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":54,"estimatedTokens":375}}66{"id":"doc-opencode_svelte_ai_docs-d1e94cfd","source":"documentation","title":"OpenCode • Svelte AI Docs","url":"https://svelte.dev/docs/ai/opencode-plugin","text":"Example:\n```text\nopencode plugin @sveltejs/opencode\n```\n\nExample:\n```text\n{\n\t\"$schema\": \"https://opencode.ai/config.json\",\n\t\"plugin\": [\"@sveltejs/opencode\"]\n}\n```\n\nExample:\n```text\n{\n\t\"$schema\": \"https://opencode.ai/tui.json\",\n\t\"plugin\": [\"@sveltejs/opencode\"]\n}\n```\n\nExample:\n```text\n{\n\t\"$schema\": \"https://svelte.dev/opencode/schema.json\",\n\t\"mcp\": {\n\t\t\"type\": \"local\", // or \"remote\"; defaults to local\n\t\t\"enabled\": true\n\t},\n\t\"subagent\": {\n\t\t\"enabled\": true,\n\t\t\"agents\": {\n\t\t\t\"svelte-file-editor\": {\n\t\t\t\t\"model\": \"<other-model>\", // defaults to the same as main agent\n\t\t\t\t\"temperature\": 1, // defaults to unset\n\t\t\t\t\"top_p\": 0.7, // defaults to unset\n\t\t\t\t\"maxSteps\": 20 // defaults to unlimited\n\t\t\t}\n\t\t}\n\t},\n\t\"skills\": {\n\t\t// this can be `true`, or an array of skills to enable\n\t\t// e.g. [\"svelte-core-bestpractices\"]\n\t\t\"enabled\": true\n\t},\n\t\"instructions\": {\n\t\t\"enabled\": true\n\t},\n\t\"autoupdate\": true\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":53,"estimatedTokens":231}}67{"id":"doc-https_svelte_dev_docs_cli_overview_llms_txt-d2110a0d","source":"documentation","title":"https://svelte.dev/docs/cli/overview/llms.txt","url":"https://svelte.dev/docs/cli/overview/llms.txt","text":"``` If you're inside a project where `sv` is already installed, this will use the local installation, otherwise it will download the latest version and run it without installing it, which is particularly useful for [`sv create`](sv-create). ## Acknowledgements Thank you to [Christopher Brown](https://github.com/chbrown) who originally owned the `sv` name on npm for graciously allowing it to be used for the Svelte CLI. You can find the original `sv` package at [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv).\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.166Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":135}}68{"id":"doc-paraglide_svelte_cli_docs-707a5c06","source":"documentation","title":"paraglide • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/paraglide","text":"Example:\n```text\nnpx sv add paraglide\n```\n\nExample:\n```text\nnpx sv add paraglide=\"languageTags:en,es\"\n```\n\nExample:\n```text\nnpx sv add paraglide=\"demo:yes\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":44}}69{"id":"doc-eslint_svelte_cli_docs-43131203","source":"documentation","title":"eslint • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/eslint","text":"Example:\n```text\nnpx sv add eslint\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":13}}70{"id":"doc-svelte_attachments_svelte_docs-b10a2620","source":"documentation","title":"svelte/attachments • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-attachments","text":"Example:\n```text\nimport { function createAttachmentKey(): symbolCreates an object key that will be recognised as an attachment when the object is spread onto an element,\nas a programmatic alternative to using {@attach ...}. This can be useful for library authors, though\nis generally not needed when building an app.\n<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>@since5.29referencecreateAttachmentKey, function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T, Record<never, any>> | ((element: E, arg: T) => void | ActionReturn<T, Record<never, any>>), fn: () => T): Attachment<E> (+1 overload)Converts an action into an attachment keeping the same behavior.\nIt’s useful if you want to start using attachments on components but you have actions provided by a library.\nNote that the second argument, if provided, must be a function that returns the argument to the\naction function, not the argument itself.\n<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>referencefromAction } from 'svelte/attachments';function createAttachmentKey(): symbol{@attach ...}<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T, Record<never, any>> | ((element: E, arg: T) => void | ActionReturn<T, Record<never, any>>), fn: () => T): Attachment<E> (+1 overload)<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>\n```\n\nExample:\n```text\n<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>\n```\n\nExample:\n```text\n<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>\n```\n\nExample:\n```text\nfunction createAttachmentKey(): symbol;\n```\n\nExample:\n```text\nfunction fromAction<\n\tE extends EventTarget,\n\tT extends unknown\n>(\n\taction:\n\t\t| Action<E, T>\n\t\t| ((element: E, arg: T) => void | ActionReturn<T>),\n\tfn: () => T\n): Attachment<E>;\n```\n\nExample:\n```text\nfunction fromAction<E extends EventTarget>(\n\taction:\n\t\t| Action<E, void>\n\t\t| ((element: E) => void | ActionReturn<void>)\n): Attachment<E>;\n```\n\nExample:\n```text\ninterface Attachment<T extends EventTarget = Element> {…}\n```\n\nExample:\n```text\n(element: T): void | (() => void);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":108,"estimatedTokens":756}}71{"id":"doc-custom_elements_svelte_docs-9aafa65c","source":"documentation","title":"Custom elements • Svelte Docs","url":"https://svelte.dev/docs/svelte/custom-elements","text":"Example:\n```text\n<svelte:options customElement=\"my-element\" />\n\n<script>\n\tlet { name = 'world' } = $props();\n</script>\n\n<h1>Hello {name}!</h1>\n<slot />\n```\n\nExample:\n```text\nimport type MyElement = SvelteComponent<Record<string, any>, any, any>\nconst MyElement: LegacyComponentTypeMyElement from './MyElement.svelte';\n\nvar customElements: CustomElementRegistryThe customElements read-only property of the Window interface returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements.\nMDN Reference\ncustomElements.CustomElementRegistry.define(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): voidThe define() method of the CustomElementRegistry interface adds a definition for a custom element to the custom element registry, mapping its name to the constructor which will be used to create it.\nMDN Reference\ndefine('my-element', const MyElement: LegacyComponentTypeMyElement.element);type MyElement = SvelteComponent<Record<string, any>, any, any>\nconst MyElement: LegacyComponentTypetype MyElement = SvelteComponent<Record<string, any>, any, any>\nconst MyElement: LegacyComponentTypevar customElements: CustomElementRegistrycustomElementsCustomElementRegistry.define(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): voiddefine()const MyElement: LegacyComponentType\n```\n\nExample:\n```text\ntype MyElement = SvelteComponent<Record<string, any>, any, any>\nconst MyElement: LegacyComponentType\n```\n\nExample:\n```text\nmodule document\nvar document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody.Element.innerHTML: stringThe innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.\nMDN Reference\ninnerHTML = `\n\t<my-element>\n\t\t<p>This is some slotted content</p>\n\t</my-element>\n`;module document\nvar document: Documentmodule document\nvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyElement.innerHTML: stringinnerHTML\n```\n\nExample:\n```text\nmodule document\nvar document: Document\n```\n\nExample:\n```text\nconst module el\nconst el: Element | nullel = var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('my-element');\n\n// get the current value of the 'name' prop\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(module el\nconst el: Element | nullel.name);\n\n// set a new value, updating the shadow DOM\nmodule el\nconst el: Element | nullel.name = 'everybody';module el\nconst el: Element | nullmodule el\nconst el: Element | nullvar document: Documentwindow.documentParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()module el\nconst el: Element | nullmodule el\nconst el: Element | nullmodule el\nconst el: Element | nullmodule el\nconst el: Element | null\n```\n\nExample:\n```text\nmodule el\nconst el: Element | null\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\n<svelte:options\n\tcustomElement={{\n\t\ttag: 'custom-element',\n\t\tshadow: {\n\t\t\tmode: import.meta.env.DEV ? 'open' : 'closed',\n\t\t\tclonable: true,\n\t\t\t// ...\n\t\t},\n\t\tprops: {\n\t\t\tname: { reflect: true, type: 'Number', attribute: 'element-index' }\n\t\t},\n\t\textend: (customElementConstructor) => {\n\t\t\t// Extend the class so we can let it participate in HTML forms\n\t\t\treturn class extends customElementConstructor {\n\t\t\t\tstatic formAssociated = true;\n\n\t\t\t\tconstructor() {\n\t\t\t\t\tsuper();\n\t\t\t\t\tthis.attachedInternals = this.attachInternals();\n\t\t\t\t}\n\n\t\t\t\t// Add the function here, not below in the component so that\n\t\t\t\t// it's always available, not just when the inner Svelte component\n\t\t\t\t// is mounted\n\t\t\t\trandomIndex() {\n\t\t\t\t\tthis.elementIndex = Math.random();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}}\n/>\n\n<script>\n\tlet { elementIndex, attachedInternals } = $props();\n\t// ...\n\tfunction check() {\n\t\tattachedInternals.checkValidity();\n\t}\n</script>\n\n...\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":268,"estimatedTokens":2466}}72{"id":"doc-svelte_easing_svelte_docs-c418c687","source":"documentation","title":"svelte/easing • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-easing","text":"Example:\n```text\nimport {\n\tfunction backIn(t: number): numberreferencebackIn,\n\tfunction backInOut(t: number): numberreferencebackInOut,\n\tfunction backOut(t: number): numberreferencebackOut,\n\tfunction bounceIn(t: number): numberreferencebounceIn,\n\tfunction bounceInOut(t: number): numberreferencebounceInOut,\n\tfunction bounceOut(t: number): numberreferencebounceOut,\n\tfunction circIn(t: number): numberreferencecircIn,\n\tfunction circInOut(t: number): numberreferencecircInOut,\n\tfunction circOut(t: number): numberreferencecircOut,\n\tfunction cubicIn(t: number): numberreferencecubicIn,\n\tfunction cubicInOut(t: number): numberreferencecubicInOut,\n\tfunction cubicOut(t: number): numberreferencecubicOut,\n\tfunction elasticIn(t: number): numberreferenceelasticIn,\n\tfunction elasticInOut(t: number): numberreferenceelasticInOut,\n\tfunction elasticOut(t: number): numberreferenceelasticOut,\n\tfunction expoIn(t: number): numberreferenceexpoIn,\n\tfunction expoInOut(t: number): numberreferenceexpoInOut,\n\tfunction expoOut(t: number): numberreferenceexpoOut,\n\tfunction linear(t: number): numberreferencelinear,\n\tfunction quadIn(t: number): numberreferencequadIn,\n\tfunction quadInOut(t: number): numberreferencequadInOut,\n\tfunction quadOut(t: number): numberreferencequadOut,\n\tfunction quartIn(t: number): numberreferencequartIn,\n\tfunction quartInOut(t: number): numberreferencequartInOut,\n\tfunction quartOut(t: number): numberreferencequartOut,\n\tfunction quintIn(t: number): numberreferencequintIn,\n\tfunction quintInOut(t: number): numberreferencequintInOut,\n\tfunction quintOut(t: number): numberreferencequintOut,\n\tfunction sineIn(t: number): numberreferencesineIn,\n\tfunction sineInOut(t: number): numberreferencesineInOut,\n\tfunction sineOut(t: number): numberreferencesineOut\n} from 'svelte/easing';function backIn(t: number): numberfunction backInOut(t: number): numberfunction backOut(t: number): numberfunction bounceIn(t: number): numberfunction bounceInOut(t: number): numberfunction bounceOut(t: number): numberfunction circIn(t: number): numberfunction circInOut(t: number): numberfunction circOut(t: number): numberfunction cubicIn(t: number): numberfunction cubicInOut(t: number): numberfunction cubicOut(t: number): numberfunction elasticIn(t: number): numberfunction elasticInOut(t: number): numberfunction elasticOut(t: number): numberfunction expoIn(t: number): numberfunction expoInOut(t: number): numberfunction expoOut(t: number): numberfunction linear(t: number): numberfunction quadIn(t: number): numberfunction quadInOut(t: number): numberfunction quadOut(t: number): numberfunction quartIn(t: number): numberfunction quartInOut(t: number): numberfunction quartOut(t: number): numberfunction quintIn(t: number): numberfunction quintInOut(t: number): numberfunction quintOut(t: number): numberfunction sineIn(t: number): numberfunction sineInOut(t: number): numberfunction sineOut(t: number): number\n```\n\nExample:\n```text\nfunction backIn(t: number): number;\n```\n\nExample:\n```text\nfunction backInOut(t: number): number;\n```\n\nExample:\n```text\nfunction backOut(t: number): number;\n```\n\nExample:\n```text\nfunction bounceIn(t: number): number;\n```\n\nExample:\n```text\nfunction bounceInOut(t: number): number;\n```\n\nExample:\n```text\nfunction bounceOut(t: number): number;\n```\n\nExample:\n```text\nfunction circIn(t: number): number;\n```\n\nExample:\n```text\nfunction circInOut(t: number): number;\n```\n\nExample:\n```text\nfunction circOut(t: number): number;\n```\n\nExample:\n```text\nfunction cubicIn(t: number): number;\n```\n\nExample:\n```text\nfunction cubicInOut(t: number): number;\n```\n\nExample:\n```text\nfunction cubicOut(t: number): number;\n```\n\nExample:\n```text\nfunction elasticIn(t: number): number;\n```\n\nExample:\n```text\nfunction elasticInOut(t: number): number;\n```\n\nExample:\n```text\nfunction elasticOut(t: number): number;\n```\n\nExample:\n```text\nfunction expoIn(t: number): number;\n```\n\nExample:\n```text\nfunction expoInOut(t: number): number;\n```\n\nExample:\n```text\nfunction expoOut(t: number): number;\n```\n\nExample:\n```text\nfunction linear(t: number): number;\n```\n\nExample:\n```text\nfunction quadIn(t: number): number;\n```\n\nExample:\n```text\nfunction quadInOut(t: number): number;\n```\n\nExample:\n```text\nfunction quadOut(t: number): number;\n```\n\nExample:\n```text\nfunction quartIn(t: number): number;\n```\n\nExample:\n```text\nfunction quartInOut(t: number): number;\n```\n\nExample:\n```text\nfunction quartOut(t: number): number;\n```\n\nExample:\n```text\nfunction quintIn(t: number): number;\n```\n\nExample:\n```text\nfunction quintInOut(t: number): number;\n```\n\nExample:\n```text\nfunction quintOut(t: number): number;\n```\n\nExample:\n```text\nfunction sineIn(t: number): number;\n```\n\nExample:\n```text\nfunction sineInOut(t: number): number;\n```\n\nExample:\n```text\nfunction sineOut(t: number): number;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":32,"totalLines":193,"estimatedTokens":1197}}73{"id":"doc-best_practices_svelte_docs-ad24c2c5","source":"documentation","title":"Best practices • Svelte Docs","url":"https://svelte.dev/docs/svelte/best-practices","text":"Example:\n```text\n// do this\nlet square = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let num: numbernum * let num: numbernum);\n\n// don't do this\nlet square;\n\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\tlet square: numbersquare = let num: numbernum * let num: numbernum;\n});function $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let num: numberlet num: numberfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let square: numberlet num: numberlet num: number\n```\n\nExample:\n```text\nfunction $derived<number>(expression: number): number\nnamespace $derived\n```\n\nExample:\n```text\nlet double = $derived(count * 2);\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\nExample:\n```text\nlet { let type: anytype } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();\n\n// do this\nlet color = function $derived<\"red\" | \"green\">(expression: \"red\" | \"green\"): \"red\" | \"green\"\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let type: anytype === 'danger' ? 'red' : 'green');\n\n// don't do this — `color` will not update if `type` changes\nlet color = let type: anytype === 'danger' ? 'red' : 'green';\nlet type: anyfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();function $derived<\"red\" | \"green\">(expression: \"red\" | \"green\"): \"red\" | \"green\"\nnamespace $derivedfunction $derived<\"red\" | \"green\">(expression: \"red\" | \"green\"): \"red\" | \"green\"\nnamespace $derived$derived(...)let double = $derived(count * 2);let type: anylet type: any\n```\n\nExample:\n```text\nfunction $props(): any\nnamespace $props\n```\n\nExample:\n```text\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nfunction $derived<\"red\" | \"green\">(expression: \"red\" | \"green\"): \"red\" | \"green\"\nnamespace $derived\n```\n\nExample:\n```text\n<svelte:window onkeydown={...} />\n<svelte:document onvisibilitychange={...} />\n```\n\nExample:\n```text\n{#snippet greeting(name)}\n  <p>hello {name}!</p>\n{/snippet}\n\n{@render greeting('world')}\n```\n\nExample:\n```text\n<!-- Parent.svelte -->\n<Child --color=\"red\" />\n\n<!-- Child.svelte -->\n<h1>Hello</h1>\n\n<style>\n\th1 {\n\t\tcolor: var(--color);\n\t}\n</style>\n```\n\nExample:\n```text\n<div>\n\t<Child />\n</div>\n\n<style>\n\tdiv :global {\n\t\th1 {\n\t\t\tcolor: red;\n\t\t}\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":134,"estimatedTokens":1078}}74{"id":"doc-svelte_legacy_svelte_docs-55136197","source":"documentation","title":"svelte/legacy • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-legacy","text":"Example:\n```text\nimport {\n\tfunction asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots> | Component<Props>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>Takes the component function and returns a Svelte 4 compatible component constructor.\n@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.referenceasClassComponent,\n\tfunction createBubbler(): (type: string) => (event: Event) => booleanFunction to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.\n@deprecatedUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.referencecreateBubbler,\n\tfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & ExportsTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.\n@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.referencecreateClassComponent,\n\tfunction handlers(...handlers: EventListener[]): EventListenerFunction to mimic the multiple listeners available in svelte 4\n@deprecatedhandlers,\n\tfunction nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the nonpassive event modifier, implemented as an action\n@deprecatedreferencenonpassive,\n\tfunction once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the once event modifier\n@deprecatedreferenceonce,\n\tfunction passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the passive event modifier, implemented as an action\n@deprecatedreferencepassive,\n\tfunction preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the preventDefault event modifier\n@deprecatedreferencepreventDefault,\n\tfunction run(fn: () => void | (() => void)): voidRuns the given function once immediately on the server, and works like $effect.pre on the client.\n@deprecatedUse this only as a temporary solution to migrate your component code to Svelte 5.run,\n\tfunction self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the self event modifier\n@deprecatedreferenceself,\n\tfunction stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopImmediatePropagation event modifier\n@deprecatedreferencestopImmediatePropagation,\n\tfunction stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopPropagation event modifier\n@deprecatedreferencestopPropagation,\n\tfunction trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the trusted event modifier\n@deprecatedreferencetrusted\n} from 'svelte/legacy';function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots> | Component<Props>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>function createBubbler(): (type: string) => (event: Event) => booleanbubbleon:clickfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exportsfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exportsfunction handlers(...handlers: EventListener[]): EventListenerfunction nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidnonpassivefunction once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidoncefunction passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidpassivefunction preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidpreventDefaultfunction run(fn: () => void | (() => void)): void$effect.prefunction self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidselffunction stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidstopImmediatePropagationfunction stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidstopPropagationfunction trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidtrusted\n```\n\nExample:\n```text\nfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exports\n```\n\nExample:\n```text\nfunction asClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\tcomponent:\n\t\t| SvelteComponent<Props, Events, Slots>\n\t\t| Component<Props>\n): ComponentType<\n\tSvelteComponent<Props, Events, Slots> & Exports\n>;\n```\n\nExample:\n```text\nfunction createBubbler(): (\n\ttype: string\n) => (event: Event) => boolean;\n```\n\nExample:\n```text\nfunction createClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\toptions: ComponentConstructorOptions<Props> & {\n\t\tcomponent:\n\t\t\t| ComponentType<SvelteComponent<Props, Events, Slots>>\n\t\t\t| Component<Props>;\n\t}\n): SvelteComponent<Props, Events, Slots> & Exports;\n```\n\nExample:\n```text\nfunction handlers(\n\t...handlers: EventListener[]\n): EventListener;\n```\n\nExample:\n```text\nfunction nonpassive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\nExample:\n```text\nfunction once(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\nfunction passive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\nExample:\n```text\nfunction preventDefault(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\nfunction run(fn: () => void | (() => void)): void;\n```\n\nExample:\n```text\nfunction self(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\nfunction stopImmediatePropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\nfunction stopPropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\nfunction trusted(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\nExample:\n```text\ntype LegacyComponentType = {\n\tnew (o: ComponentConstructorOptions): SvelteComponent;\n\t(\n\t\t...args: Parameters<Component<Record<string, any>>>\n\t): ReturnType<\n\t\tComponent<Record<string, any>, Record<string, any>>\n\t>;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":173,"estimatedTokens":2129}}75{"id":"doc-svelte_motion_svelte_docs-4cd5645f","source":"documentation","title":"svelte/motion • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-motion","text":"Example:\n```text\nimport {\n\tclass Spring<T>\ninterface Spring<T>A wrapper for a value that behaves in a spring-like fashion. Changes to spring.target will cause spring.current to\nmove towards it over time, taking account of the spring.stiffness and spring.damping parameters.\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />@since5.8.0referenceSpring,\n\tclass Tween<T>A wrapper for a value that tweens smoothly to its target value. Changes to tween.target will cause tween.current to\nmove towards it over time, taking account of the delay, duration and easing options.\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />@since5.8.0referenceTween,\n\tconst prefersReducedMotion: MediaQueryA media query that matches if the user prefers reduced motion.\n<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}@since5.7.0referenceprefersReducedMotion,\n\tfunction spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it “bounces” like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.\n@deprecatedUse Spring insteadreferencespring,\n\tfunction tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.\n@deprecatedUse Tween insteadreferencetweened\n} from 'svelte/motion';class Spring<T>\ninterface Spring<T>class Spring<T>\ninterface Spring<T>spring.targetspring.currentspring.stiffnessspring.damping<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />class Tween<T>tween.targettween.currentdelaydurationeasing<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />const prefersReducedMotion: MediaQuery<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}function spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>Springfunction tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>Tween\n```\n\nExample:\n```text\nclass Spring<T>\ninterface Spring<T>\n```\n\nExample:\n```text\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />\n```\n\nExample:\n```text\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />\n```\n\nExample:\n```text\n<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}\n```\n\nExample:\n```text\nclass Spring<T> {…}\n```\n\nExample:\n```text\nconstructor(value: T, options?: SpringOptions);\n```\n\nExample:\n```text\nstatic of<U>(fn: () => U, options?: SpringOptions): Spring<U>;\n```\n\nExample:\n```text\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst spring = Spring.of(() => number);\n</script>\n```\n\nExample:\n```text\nset(value: T, options?: SpringUpdateOptions): Promise<void>;\n```\n\nExample:\n```text\ndamping: number;\n```\n\nExample:\n```text\nprecision: number;\n```\n\nExample:\n```text\nstiffness: number;\n```\n\nExample:\n```text\ntarget: T;\n```\n\nExample:\n```text\nget current(): T;\n```\n\nExample:\n```text\nclass Tween<T> {…}\n```\n\nExample:\n```text\nstatic of<U>(fn: () => U, options?: TweenOptions<U> | undefined): Tween<U>;\n```\n\nExample:\n```text\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst tween = Tween.of(() => number);\n</script>\n```\n\nExample:\n```text\nconstructor(value: T, options?: TweenOptions<T>);\n```\n\nExample:\n```text\nset(value: T, options?: TweenOptions<T> | undefined): Promise<void>;\n```\n\nExample:\n```text\nset target(v: T);\n```\n\nExample:\n```text\nget target(): T;\n```\n\nExample:\n```text\nconst prefersReducedMotion: MediaQuery;\n```\n\nExample:\n```text\nfunction spring<T = any>(\n\tvalue?: T | undefined,\n\topts?: SpringOptions | undefined\n): Spring<T>;\n```\n\nExample:\n```text\nfunction tweened<T>(\n\tvalue?: T | undefined,\n\tdefaults?: TweenOptions<T> | undefined\n): Tweened<T>;\n```\n\nExample:\n```text\ninterface Spring<T> extends Readable<T> {…}\n```\n\nExample:\n```text\nset(new_value: T, opts?: SpringUpdateOptions): Promise<void>;\n```\n\nExample:\n```text\nupdate: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;\n```\n\nExample:\n```text\nsubscribe(fn: (value: T) => void): Unsubscriber;\n```\n\nExample:\n```text\ninterface SpringOptions {…}\n```\n\nExample:\n```text\nstiffness?: number;\n```\n\nExample:\n```text\ndamping?: number;\n```\n\nExample:\n```text\nprecision?: number;\n```\n\nExample:\n```text\ninterface SpringUpdateOptions {…}\n```\n\nExample:\n```text\nhard?: any;\n```\n\nExample:\n```text\nsoft?: string | number | boolean;\n```\n\nExample:\n```text\ninstant?: boolean;\n```\n\nExample:\n```text\npreserveMomentum?: number;\n```\n\nExample:\n```text\ninterface TweenOptions<T> {…}\n```\n\nExample:\n```text\ndelay?: number;\n```\n\nExample:\n```text\nduration?: number | ((from: T, to: T) => number);\n```\n\nExample:\n```text\neasing?: (t: number) => number;\n```\n\nExample:\n```text\ninterpolate?: (a: T, b: T) => (t: number) => T;\n```\n\nExample:\n```text\ninterface Tweened<T> extends Readable<T> {…}\n```\n\nExample:\n```text\nset(value: T, opts?: TweenOptions<T>): Promise<void>;\n```\n\nExample:\n```text\nupdate(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;\n```\n\nExample:\n```text\ntype Updater<T> = (target_value: T, value: T) => T;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":47,"totalLines":358,"estimatedTokens":1771}}76{"id":"doc-props_and_restprops_svelte_docs-f205d0b7","source":"documentation","title":"$$props and $$restProps • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-$$props-and-$$restProps","text":"Example:\n```text\n<script>\n\texport let variant;\n</script>\n\n<button {...$$restProps} class=\"variant-{variant} {$$props.class ?? ''}\">\n\tclick me\n</button>\n\n<style>\n\t.variant-danger {\n\t\tbackground: red;\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":18,"estimatedTokens":57}}77{"id":"doc-svelte_4_migration_guide_svelte_docs-663b6689","source":"documentation","title":"Svelte 4 migration guide • Svelte Docs","url":"https://svelte.dev/docs/svelte/v4-migration-guide","text":"Example:\n```text\nimport { function createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>Creates an event dispatcher that can be used to dispatch component events.\nEvent dispatchers are functions that can take two arguments: name and detail.\nComponent events created with createEventDispatcher create a\nCustomEvent.\nThese events do not bubble.\nThe detail argument corresponds to the CustomEvent.detail\nproperty and can contain any type of data.\nThe event dispatcher can be typed to narrow the allowed event names and the type of the detail argument:\nconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();@deprecatedUse callback props and/or the $host() rune instead — see migration guidereferencecreateEventDispatcher } from 'svelte';\n\nconst const dispatch: EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>dispatch = createEventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>(): EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>Creates an event dispatcher that can be used to dispatch component events.\nEvent dispatchers are functions that can take two arguments: name and detail.\nComponent events created with createEventDispatcher create a\nCustomEvent.\nThese events do not bubble.\nThe detail argument corresponds to the CustomEvent.detail\nproperty and can contain any type of data.\nThe event dispatcher can be typed to narrow the allowed event names and the type of the detail argument:\nconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();@deprecatedUse callback props and/or the $host() rune instead — see migration guidereferencecreateEventDispatcher<{\n\toptional: number | nulloptional: number | null;\n\trequired: stringrequired: string;\n\tnoArgument: nullnoArgument: null;\n}>();\n\n// Svelte version 3:\nconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleandispatch('optional');\nconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleandispatch('required'); // I can still omit the detail argument\nconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => booleandispatch('noArgument', 'surprise'); // I can still add a detail argument\n\n// Svelte version 4 using TypeScript strict mode:\nconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleandispatch('optional');\nconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleandispatch('required'); // error, missing argument\nconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => booleandispatch('noArgument', 'surprise'); // error, cannot pass an argumentfunction createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>namedetailcreateEventDispatcherdetaildetailconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();const dispatch: anyloaded: nullchange: stringoptional: number | null$host()const dispatch: EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>const dispatch: EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>createEventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>(): EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>createEventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>(): EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>namedetailcreateEventDispatcherdetaildetailconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();const dispatch: anyloaded: nullchange: stringoptional: number | null$host()optional: number | nullrequired: stringnoArgument: nullconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => booleanconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => boolean\n```\n\nExample:\n```text\nconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();const dispatch: anyloaded: nullchange: stringoptional: number | null\n```\n\nExample:\n```text\nconst dispatch: EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>\n```\n\nExample:\n```text\ncreateEventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>(): EventDispatcher<{\n    optional: number | null;\n    required: string;\n    noArgument: null;\n}>\n```\n\nExample:\n```text\nconst dispatch: EventDispatcher\n<\"optional\">(type: \"optional\", parameter?: number | null | undefined, options?: DispatchOptions | undefined) => boolean\n```\n\nExample:\n```text\nconst dispatch: EventDispatcher\n<\"required\">(type: \"required\", parameter: string, options?: DispatchOptions | undefined) => boolean\n```\n\nExample:\n```text\nconst dispatch: EventDispatcher\n<\"noArgument\">(type: \"noArgument\", parameter?: null | undefined, options?: DispatchOptions | undefined) => boolean\n```\n\nExample:\n```text\nconst action: Action = (node, params) => { ... } // this is now an error if you use params in any way\nconst const action: Action<HTMLElement, string>action: type Action = /*unresolved*/ anyAction<HTMLElement, string> = (node: anynode, params: anyparams) => { ... } // params is of type stringconst action: Action<HTMLElement, string>type Action = /*unresolved*/ anynode: anyparams: any\n```\n\nExample:\n```text\n// Example where this change reveals an actual bug\nonMount(\n\t// someCleanup() not called because function handed to onMount is async\n\tasync () => {\n\t\tconst something = await foo();\n                                         \t// someCleanup() is called because function handed to onMount is sync\n\t() => {\n\t\tfoo().then(something: anysomething => {...});\n\t\t// ...\n\t\treturn () => someCleanup();\n\t}\n);something: any\n```\n\nExample:\n```text\n<svelte:options tag=\"my-component\" />\n<svelte:options customElement=\"my-component\" />\n```\n\nExample:\n```text\nimport { SvelteComponentTyped } from 'svelte';\nimport { class SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>This was the base class for Svelte components in Svelte 4. Svelte 5+ components\nare completely different under the hood. For typing, use Component instead.\nTo instantiate components, use mount instead.\nSee migration guide for more info.\nreferenceSvelteComponent } from 'svelte';\n\nexport class Foo extends SvelteComponentTyped<{ aProp: string }> {}\nexport class class FooFoo extends class SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>This was the base class for Svelte components in Svelte 4. Svelte 5+ components\nare completely different under the hood. For typing, use Component instead.\nTo instantiate components, use mount instead.\nSee migration guide for more info.\nreferenceSvelteComponent<{ aProp: stringaProp: string }> {}class SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>Componentmountclass Fooclass SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>ComponentmountaProp: string\n```\n\nExample:\n```text\n<script>\n\timport ComponentA from './ComponentA.svelte';\n\timport ComponentB from './ComponentB.svelte';\n\timport { SvelteComponent } from 'svelte';\n\n\tlet component: typeof SvelteComponent<any>;\n\n\tfunction choseRandomly() {\n\t\tcomponent = Math.random() > 0.5 ? ComponentA : ComponentB;\n\t}\n</script>\n\n<button on:click={choseRandomly}>random</button>\n<svelte:element this={component} />\n```\n\nExample:\n```text\n{#if show}\n\t...\n\t{#if success}\n\t\t<p in:slide>Success</p>\n\t{/each}\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport Nested from './Nested.svelte';\n</script>\n\n<Nested let:count>\n\t<p>\n\t\tcount in default slot — is available: {count}\n\t</p>\n\t<p slot=\"bar\">\n\t\tcount in bar slot — is not available: {count}\n\t</p>\n</Nested>\n```\n\nExample:\n```text\nimport { function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>The preprocess function provides convenient hooks for arbitrarily transforming component source code.\nFor example, it can be used to convert a <style lang=\"sass\"> block into vanilla CSS.\nreferencepreprocess } from 'svelte/compiler';\n\nconst { const code: stringThe new code\ncode } = await function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>The preprocess function provides convenient hooks for arbitrarily transforming component source code.\nFor example, it can be used to convert a <style lang=\"sass\"> block into vanilla CSS.\nreferencepreprocess(\n\tsource,\n\t[\n\t\t{\n\t\t\tPreprocessorGroup.markup?: MarkupPreprocessor | undefinedmarkup: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('markup-1');\n\t\t\t},\n\t\t\tPreprocessorGroup.script?: Preprocessor | undefinedscript: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('script-1');\n\t\t\t},\n\t\t\tPreprocessorGroup.style?: Preprocessor | undefinedstyle: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('style-1');\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tPreprocessorGroup.markup?: MarkupPreprocessor | undefinedmarkup: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('markup-2');\n\t\t\t},\n\t\t\tPreprocessorGroup.script?: Preprocessor | undefinedscript: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('script-2');\n\t\t\t},\n\t\t\tPreprocessorGroup.style?: Preprocessor | undefinedstyle: () => {\n\t\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('style-2');\n\t\t\t}\n\t\t}\n\t],\n\t{\n\t\tfilename?: string | undefinedfilename: 'App.svelte'\n\t}\n);\n\n// Svelte 3 logs:\n// markup-1\n// markup-2\n// script-1\n// script-2\n// style-1\n// style-2\n\n// Svelte 4 logs:\n// markup-1\n// script-1\n// style-1\n// markup-2\n// script-2\n// style-2function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed><style lang=\"sass\">const code: stringfunction preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed><style lang=\"sass\">PreprocessorGroup.markup?: MarkupPreprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()PreprocessorGroup.script?: Preprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()PreprocessorGroup.style?: Preprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()PreprocessorGroup.markup?: MarkupPreprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()PreprocessorGroup.script?: Preprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()PreprocessorGroup.style?: Preprocessor | undefinedvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()filename?: string | undefined\n```\n\nExample:\n```text\nfunction preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\npreprocess: [\n\tvitePreprocess(),\n\tmdsvex(mdsvexConfig)\n\tmdsvex(mdsvexConfig),\n\tvitePreprocess()\n]\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":903,"estimatedTokens":10154}}78{"id":"doc-export_let_svelte_docs-248e8269","source":"documentation","title":"export let • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-export-let","text":"Example:\n```text\n<script>\n\texport let foo;\n\texport let bar = 'default value';\n\n\t// Values that are passed in as props\n\t// are immediately available\n\tconsole.log({ foo });\n</script>\n```\n\nExample:\n```text\nexport let let foo: undefinedfoo = var undefinedundefined;let foo: undefinedvar undefined\n```\n\nExample:\n```text\n<script>\n\texport function greet(name) {\n\t\talert(`hello ${name}!`);\n\t}\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\texport function greet(name) {\n\t\talert(`hello ${name}!`);\n\t}\n</script>\n```\n\nExample:\n```text\n<script>\n\timport Greeter from './Greeter.svelte';\n\n\tlet greeter;\n</script>\n\n<Greeter bind:this={greeter} />\n\n<button on:click={() => greeter.greet('world')}>\n\tgreet\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Greeter from './Greeter.svelte';\n\n\tlet greeter;\n</script>\n\n<Greeter bind:this={greeter} />\n\n<button on:click={() => greeter.greet('world')}>\n\tgreet\n</button>\n```\n\nExample:\n```text\n<script>\n\t/** @type {string} */\n\tlet className;\n\n\t// creates a `class` property, even\n\t// though it is a reserved word\n\texport { className as class };\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet className: string;\n\n\t// creates a `class` property, even\n\t// though it is a reserved word\n\texport { className as class };\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":89,"estimatedTokens":323}}79{"id":"doc-reactive_let_var_declarations_svelte_docs-f6e69a43","source":"documentation","title":"Reactive let/var declarations • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-let","text":"Example:\n```text\n<script>\n\tlet count = 0;\n</script>\n\n<button on:click={() => count += 1}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\n<script>\n\tlet numbers = [1, 2, 3, 4];\n\n\tfunction addNumber() {\n\t\t// this method call does not trigger an update\n\t\tnumbers.push(numbers.length + 1);\n\n\t\t// this assignment will update anything\n\t\t// that depends on `numbers`\n\t\tnumbers = numbers;\n\t}\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":103}}80{"id":"doc-reactive_statements_svelte_docs_p_p_a_href_https-a66cbb5c","source":"documentation","title":"Reactive $: statements • Svelte Docs.</p> <p><a href=\"https://developer.mozilla.org/docs/Web/API/Document/title\">MDN Reference</a></p> </div></span>title</span></span> <span style=\"color:var(--shiki-foreground)\"></span><span style=\"color:var(--shiki-token-keyword)\">=</span> <span style=\"color:var(--shiki-foreground)\"></span><span style=\"color:var(--shiki-foreground)\">title</span><span style=\"color:var(--shiki-foreground)\">;</span></span> <span class=\"line\"><span style=\"color:var(--shiki-foreground)\">}</span></span></code></pre></div><!----><!----></div><!----></div> <p class=\"edit svelte-s202gb\"><a href=\"https://github.com/sveltejs/svelte/edit/main/documentation/docs/99-legacy/02-legacy-reactive-assignments.md\" class=\"svelte-s202gb\"><svg width=\"20\" height=\"20\" class=\"svelte-hfc14b\"><use href=\"#edit\"></use></svg><!----> Edit this page on GitHub</a> <!--[0--><a href=\"/docs/svelte/legacy-reactive-assignments/llms.txt\" class=\"svelte-s202gb\"><svg width=\"20\" height=\"20\" class=\"svelte-hfc14b\"><use href=\"#contents\"></use></svg><!----> llms.txt</a><!--]--></p> <div class=\"controls svelte-s202gb\"><div class=\"flex svelte-s202gb\"><span class=\"svelte-s202gb\">previous</span> <span class=\"next svelte-s202gb\">next</span></div> <div class=\"flex svelte-s202gb\"><!--[0--><a href=\"/docs/svelte/legacy-let\" class=\"svelte-s202gb\">Reactive let/var declarations</a><!--]--> <!--[0--><a class=\"next svelte-s202gb\" href=\"/docs/svelte/legacy-export-let\">export let</a><!--]--></div></div><!----></div><!--]--><!--]--><!--]--><!----></div></div><!--]--><!--]--><!--]--><!----><!----></main> <!--[0--><!--[-1--><!--]--><!--]--><!----><!----> <!--[-1--><!--]--><!--]--><!--]--><!--]--><!----> <!--[-1--><!--]--><!--]--> <script> { __sveltekit_1gw33p1 = { base: new URL(\"../..\", location).pathname.slice(0, -1), version: \"1786638912168\" }; const element = document.currentScript.parentElement; import(\"../../_app/immutable/entry/start.DKNFWkLU.js\").then(async (kit) => { kit.init(__sveltekit_1gw33p1); const app = await import(\"../../_app/immutable/entry/app.hSZVDu1D.js\"); kit.start(app, element, { node_ids: [0, 3, 16], data: [{type:\"data\",data:{nav_links:[{title:\"Docs\",slug:\"docs\",sections:[{title:\"Svelte\",path:\"/docs/svelte\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/svelte/overview\"},{title:\"Getting started\",path:\"/docs/svelte/getting-started\"},{title:\".svelte files\",path:\"/docs/svelte/svelte-files\"},{title:\".svelte.js and .svelte.ts files\",path:\"/docs/svelte/svelte-js-files\"}]},{title:\"Runes\",sections:[{title:\"What are runes?\",path:\"/docs/svelte/what-are-runes\"},{title:\"$state\",path:\"/docs/svelte/$state\"},{title:\"$derived\",path:\"/docs/svelte/$derived\"},{title:\"$effect\",path:\"/docs/svelte/$effect\"},{title:\"$props\",path:\"/docs/svelte/$props\"},{title:\"$bindable\",path:\"/docs/svelte/$bindable\"},{title:\"$inspect\",path:\"/docs/svelte/$inspect\"},{title:\"$host\",path:\"/docs/svelte/$host\"}]},{title:\"Template syntax\",sections:[{title:\"Basic markup\",path:\"/docs/svelte/basic-markup\"},{title:\"{#if ...}\",path:\"/docs/svelte/if\"},{title:\"{#each ...}\",path:\"/docs/svelte/each\"},{title:\"{#key ...}\",path:\"/docs/svelte/key\"},{title:\"{#await ...}\",path:\"/docs/svelte/await\"},{title:\"{#snippet ...}\",path:\"/docs/svelte/snippet\"},{title:\"{@render ...}\",path:\"/docs/svelte/@render\"},{title:\"{@html ...}\",path:\"/docs/svelte/@html\"},{title:\"{@attach ...}\",path:\"/docs/svelte/@attach\"},{title:\"{@const ...}\",path:\"/docs/svelte/@const\"},{title:\"{@debug ...}\",path:\"/docs/svelte/@debug\"},{title:\"{let/const ...}\",path:\"/docs/svelte/declaration-tags\"},{title:\"bind:\",path:\"/docs/svelte/bind\"},{title:\"use:\",path:\"/docs/svelte/use\"},{title:\"transition:\",path:\"/docs/svelte/transition\"},{title:\"in: and out:\",path:\"/docs/svelte/in-and-out\"},{title:\"animate:\",path:\"/docs/svelte/animate\"},{title:\"style:\",path:\"/docs/svelte/style\"},{title:\"class\",path:\"/docs/svelte/class\"},{title:\"await\",path:\"/docs/svelte/await-expressions\"}]},{title:\"Styling\",sections:[{title:\"Scoped styles\",path:\"/docs/svelte/scoped-styles\"},{title:\"Global styles\",path:\"/docs/svelte/global-styles\"},{title:\"Custom properties\",path:\"/docs/svelte/custom-properties\"},{title:\"Nested \\u003Cstyle> elements\",path:\"/docs/svelte/nested-style-elements\"}]},{title:\"Special elements\",sections:[{title:\"\\u003Csvelte:boundary>\",path:\"/docs/svelte/svelte-boundary\"},{title:\"\\u003Csvelte:window>\",path:\"/docs/svelte/svelte-window\"},{title:\"\\u003Csvelte:document>\",path:\"/docs/svelte/svelte-document\"},{title:\"\\u003Csvelte:body>\",path:\"/docs/svelte/svelte-body\"},{title:\"\\u003Csvelte:head>\",path:\"/docs/svelte/svelte-head\"},{title:\"\\u003Csvelte:element>\",path:\"/docs/svelte/svelte-element\"},{title:\"\\u003Csvelte:options>\",path:\"/docs/svelte/svelte-options\"}]},{title:\"Runtime\",sections:[{title:\"Stores\",path:\"/docs/svelte/stores\"},{title:\"Context\",path:\"/docs/svelte/context\"},{title:\"Lifecycle hooks\",path:\"/docs/svelte/lifecycle-hooks\"},{title:\"Imperative component API\",path:\"/docs/svelte/imperative-component-api\"},{title:\"Hydratable data\",path:\"/docs/svelte/hydratable\"}]},{title:\"Misc\",sections:[{title:\"Best practices\",path:\"/docs/svelte/best-practices\"},{title:\"Testing\",path:\"/docs/svelte/testing\"},{title:\"TypeScript\",path:\"/docs/svelte/typescript\"},{title:\"Custom elements\",path:\"/docs/svelte/custom-elements\"},{title:\"Browser support\",path:\"/docs/svelte/browser-support\"},{title:\"Svelte 4 migration guide\",path:\"/docs/svelte/v4-migration-guide\"},{title:\"Svelte 5 migration guide\",path:\"/docs/svelte/v5-migration-guide\"},{title:\"Frequently asked questions\",path:\"/docs/svelte/faq\"}]},{title:\"Reference\",sections:[{title:\"svelte\",path:\"/docs/svelte/svelte\"},{title:\"svelte/action\",path:\"/docs/svelte/svelte-action\"},{title:\"svelte/animate\",path:\"/docs/svelte/svelte-animate\"},{title:\"svelte/attachments\",path:\"/docs/svelte/svelte-attachments\"},{title:\"svelte/compiler\",path:\"/docs/svelte/svelte-compiler\"},{title:\"svelte/easing\",path:\"/docs/svelte/svelte-easing\"},{title:\"svelte/events\",path:\"/docs/svelte/svelte-events\"},{title:\"svelte/legacy\",path:\"/docs/svelte/svelte-legacy\"},{title:\"svelte/motion\",path:\"/docs/svelte/svelte-motion\"},{title:\"svelte/reactivity/window\",path:\"/docs/svelte/svelte-reactivity-window\"},{title:\"svelte/reactivity\",path:\"/docs/svelte/svelte-reactivity\"},{title:\"svelte/server\",path:\"/docs/svelte/svelte-server\"},{title:\"svelte/store\",path:\"/docs/svelte/svelte-store\"},{title:\"svelte/transition\",path:\"/docs/svelte/svelte-transition\"},{title:\"Compiler errors\",path:\"/docs/svelte/compiler-errors\"},{title:\"Compiler warnings\",path:\"/docs/svelte/compiler-warnings\"},{title:\"Runtime errors\",path:\"/docs/svelte/runtime-errors\"},{title:\"Runtime warnings\",path:\"/docs/svelte/runtime-warnings\"}]},{title:\"Legacy APIs\",sections:[{title:\"Overview\",path:\"/docs/svelte/legacy-overview\"},{title:\"Reactive let/var declarations\",path:\"/docs/svelte/legacy-let\"},{title:\"Reactive $: statements\",path:\"/docs/svelte/legacy-reactive-assignments\"},{title:\"export let\",path:\"/docs/svelte/legacy-export-let\"},{title:\"$$props and $$restProps\",path:\"/docs/svelte/legacy-$$props-and-$$restProps\"},{title:\"on:\",path:\"/docs/svelte/legacy-on\"},{title:\"\\u003Cslot>\",path:\"/docs/svelte/legacy-slots\"},{title:\"$$slots\",path:\"/docs/svelte/legacy-$$slots\"},{title:\"\\u003Csvelte:fragment>\",path:\"/docs/svelte/legacy-svelte-fragment\"},{title:\"\\u003Csvelte:component>\",path:\"/docs/svelte/legacy-svelte-component\"},{title:\"\\u003Csvelte:self>\",path:\"/docs/svelte/legacy-svelte-self\"},{title:\"Imperative component API\",path:\"/docs/svelte/legacy-component-api\"}]}]},{title:\"SvelteKit\",path:\"/docs/kit\",sections:[{title:\"Getting started\",sections:[{title:\"Introduction\",path:\"/docs/kit/introduction\"},{title:\"Creating a project\",path:\"/docs/kit/creating-a-project\"},{title:\"Project types\",path:\"/docs/kit/project-types\"},{title:\"Project structure\",path:\"/docs/kit/project-structure\"},{title:\"Web standards\",path:\"/docs/kit/web-standards\"}]},{title:\"Core concepts\",sections:[{title:\"Routing\",path:\"/docs/kit/routing\"},{title:\"Loading data\",path:\"/docs/kit/load\"},{title:\"Form actions\",path:\"/docs/kit/form-actions\"},{title:\"Page options\",path:\"/docs/kit/page-options\"},{title:\"State management\",path:\"/docs/kit/state-management\"},{title:\"Remote functions\",path:\"/docs/kit/remote-functions\"},{title:\"Environment variables\",path:\"/docs/kit/environment-variables\"}]},{title:\"Build and deploy\",sections:[{title:\"Building your app\",path:\"/docs/kit/building-your-app\"},{title:\"Adapters\",path:\"/docs/kit/adapters\"},{title:\"Zero-config deployments\",path:\"/docs/kit/adapter-auto\"},{title:\"Node servers\",path:\"/docs/kit/adapter-node\"},{title:\"Static site generation\",path:\"/docs/kit/adapter-static\"},{title:\"Single-page apps\",path:\"/docs/kit/single-page-apps\"},{title:\"Cloudflare\",path:\"/docs/kit/adapter-cloudflare\"},{title:\"Cloudflare Workers\",path:\"/docs/kit/adapter-cloudflare-workers\"},{title:\"Netlify\",path:\"/docs/kit/adapter-netlify\"},{title:\"Vercel\",path:\"/docs/kit/adapter-vercel\"},{title:\"Writing adapters\",path:\"/docs/kit/writing-adapters\"}]},{title:\"Advanced\",sections:[{title:\"Advanced routing\",path:\"/docs/kit/advanced-routing\"},{title:\"Hooks\",path:\"/docs/kit/hooks\"},{title:\"Errors\",path:\"/docs/kit/errors\"},{title:\"Link options\",path:\"/docs/kit/link-options\"},{title:\"Service workers\",path:\"/docs/kit/service-workers\"},{title:\"Server-only modules\",path:\"/docs/kit/server-only-modules\"},{title:\"Snapshots\",path:\"/docs/kit/snapshots\"},{title:\"Shallow routing\",path:\"/docs/kit/shallow-routing\"},{title:\"Observability\",path:\"/docs/kit/observability\"},{title:\"Packaging\",path:\"/docs/kit/packaging\"}]},{title:\"Best practices\",sections:[{title:\"Auth\",path:\"/docs/kit/auth\"},{title:\"Performance\",path:\"/docs/kit/performance\"},{title:\"Icons\",path:\"/docs/kit/icons\"},{title:\"Images\",path:\"/docs/kit/images\"},{title:\"Accessibility\",path:\"/docs/kit/accessibility\"},{title:\"SEO\",path:\"/docs/kit/seo\"}]},{title:\"Appendix\",sections:[{title:\"Frequently asked questions\",path:\"/docs/kit/faq\"},{title:\"Integrations\",path:\"/docs/kit/integrations\"},{title:\"Breakpoint Debugging\",path:\"/docs/kit/debugging\"},{title:\"Migrating to SvelteKit v2\",path:\"/docs/kit/migrating-to-sveltekit-2\"},{title:\"Migrating from Sapper\",path:\"/docs/kit/migrating\"},{title:\"Additional resources\",path:\"/docs/kit/additional-resources\"},{title:\"Glossary\",path:\"/docs/kit/glossary\"}]},{title:\"Reference\",sections:[{title:\"@sveltejs/kit\",path:\"/docs/kit/@sveltejs-kit\"},{title:\"@sveltejs/kit/env\",path:\"/docs/kit/@sveltejs-kit-env\"},{title:\"@sveltejs/kit/hooks\",path:\"/docs/kit/@sveltejs-kit-hooks\"},{title:\"@sveltejs/kit/node/polyfills\",path:\"/docs/kit/@sveltejs-kit-node-polyfills\"},{title:\"@sveltejs/kit/node\",path:\"/docs/kit/@sveltejs-kit-node\"},{title:\"@sveltejs/kit/vite\",path:\"/docs/kit/@sveltejs-kit-vite\"},{title:\"$app/env\",path:\"/docs/kit/$app-env\"},{title:\"$app/env/private\",path:\"/docs/kit/$app-env-private\"},{title:\"$app/env/public\",path:\"/docs/kit/$app-env-public\"},{title:\"$app/environment\",path:\"/docs/kit/$app-environment\"},{title:\"$app/forms\",path:\"/docs/kit/$app-forms\"},{title:\"$app/navigation\",path:\"/docs/kit/$app-navigation\"},{title:\"$app/paths\",path:\"/docs/kit/$app-paths\"},{title:\"$app/server\",path:\"/docs/kit/$app-server\"},{title:\"$app/state\",path:\"/docs/kit/$app-state\"},{title:\"$app/stores\",path:\"/docs/kit/$app-stores\"},{title:\"$app/types\",path:\"/docs/kit/$app-types\"},{title:\"$env/dynamic/private\",path:\"/docs/kit/$env-dynamic-private\"},{title:\"$env/dynamic/public\",path:\"/docs/kit/$env-dynamic-public\"},{title:\"$env/static/private\",path:\"/docs/kit/$env-static-private\"},{title:\"$env/static/public\",path:\"/docs/kit/$env-static-public\"},{title:\"$lib\",path:\"/docs/kit/$lib\"},{title:\"$service-worker\",path:\"/docs/kit/$service-worker\"},{title:\"Configuration\",path:\"/docs/kit/configuration\"},{title:\"Command Line Interface\",path:\"/docs/kit/cli\"},{title:\"Types\",path:\"/docs/kit/types\"}]}]},{title:\"CLI\",path:\"/docs/cli\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/cli/overview\"},{title:\"Frequently asked questions\",path:\"/docs/cli/faq\"}]},{title:\"Commands\",sections:[{title:\"sv create\",path:\"/docs/cli/sv-create\"},{title:\"sv add\",path:\"/docs/cli/sv-add\"},{title:\"sv check\",path:\"/docs/cli/sv-check\"},{title:\"sv migrate\",path:\"/docs/cli/sv-migrate\"}]},{title:\"Add-ons\",sections:[{title:\"ai-tools\",path:\"/docs/cli/ai-tools\"},{title:\"better-auth\",path:\"/docs/cli/better-auth\"},{title:\"drizzle\",path:\"/docs/cli/drizzle\"},{title:\"eslint\",path:\"/docs/cli/eslint\"},{title:\"experimental\",path:\"/docs/cli/experimental\"},{title:\"mdsvex\",path:\"/docs/cli/mdsvex\"},{title:\"paraglide\",path:\"/docs/cli/paraglide\"},{title:\"playwright\",path:\"/docs/cli/playwright\"},{title:\"prettier\",path:\"/docs/cli/prettier\"},{title:\"storybook\",path:\"/docs/cli/storybook\"},{title:\"sveltekit-adapter\",path:\"/docs/cli/sveltekit-adapter\"},{title:\"tailwindcss\",path:\"/docs/cli/tailwind\"},{title:\"vitest\",path:\"/docs/cli/vitest\"},{title:\"[create your own]\",path:\"/docs/cli/community\"}]},{title:\"API\",sections:[{title:\"sv\",path:\"/docs/cli/sv\"},{title:\"sv-utils\",path:\"/docs/cli/sv-utils\"}]}]},{title:\"AI\",path:\"/docs/ai\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/ai/overview\"}]},{title:\"Instructions\",sections:[{title:\"AGENTS.md\",path:\"/docs/ai/instructions\"}]},{title:\"MCP server\",sections:[{title:\"Overview\",path:\"/docs/ai/mcp\"},{title:\"Local setup\",path:\"/docs/ai/local-setup\"},{title:\"Remote setup\",path:\"/docs/ai/remote-setup\"},{title:\"Tools\",path:\"/docs/ai/tools\"},{title:\"Resources\",path:\"/docs/ai/resources\"},{title:\"Prompts\",path:\"/docs/ai/prompts\"},{title:\"CLI\",path:\"/docs/ai/cli\"}]},{title:\"Skills\",sections:[{title:\"Overview\",path:\"/docs/ai/skills\"}]},{title:\"Subagents\",sections:[{title:\"Overview\",path:\"/docs/ai/subagent\"}]},{title:\"Plugins\",sections:[{title:\"Claude Code\",path:\"/docs/ai/claude-plugin\"},{title:\"OpenCode\",path:\"/docs/ai/opencode-plugin\"},{title:\"Cursor\",path:\"/docs/ai/cursor-plugin\"},{title:\"GitHub Copilot CLI\",path:\"/docs/ai/copilot-plugin\"},{title:\"Codex CLI\",path:\"/docs/ai/codex-plugin\"}]}]}]},{title:\"Tutorial\",slug:\"tutorial\",sections:[{title:\"Basic Svelte\",sections:[{title:\"Introduction\",sections:[{title:\"Welcome to Svelte\",path:\"/tutorial/svelte/welcome-to-svelte\"},{title:\"Your first component\",path:\"/tutorial/svelte/your-first-component\"},{title:\"Dynamic attributes\",path:\"/tutorial/svelte/dynamic-attributes\"},{title:\"Styling\",path:\"/tutorial/svelte/styling\"},{title:\"Nested components\",path:\"/tutorial/svelte/nested-components\"},{title:\"HTML tags\",path:\"/tutorial/svelte/html-tags\"}]},{title:\"Reactivity\",sections:[{title:\"State\",path:\"/tutorial/svelte/state\"},{title:\"Deep state\",path:\"/tutorial/svelte/deep-state\"},{title:\"Derived state\",path:\"/tutorial/svelte/derived-state\"},{title:\"Inspecting state\",path:\"/tutorial/svelte/inspecting-state\"},{title:\"Effects\",path:\"/tutorial/svelte/effects\"},{title:\"Universal reactivity\",path:\"/tutorial/svelte/universal-reactivity\"}]},{title:\"Props\",sections:[{title:\"Declaring props\",path:\"/tutorial/svelte/declaring-props\"},{title:\"Default values\",path:\"/tutorial/svelte/default-values\"},{title:\"Spread props\",path:\"/tutorial/svelte/spread-props\"}]},{title:\"Logic\",sections:[{title:\"If blocks\",path:\"/tutorial/svelte/if-blocks\"},{title:\"Else blocks\",path:\"/tutorial/svelte/else-blocks\"},{title:\"Else-if blocks\",path:\"/tutorial/svelte/else-if-blocks\"},{title:\"Each blocks\",path:\"/tutorial/svelte/each-blocks\"},{title:\"Keyed each blocks\",path:\"/tutorial/svelte/keyed-each-blocks\"},{title:\"Await blocks\",path:\"/tutorial/svelte/await-blocks\"}]},{title:\"Events\",sections:[{title:\"DOM events\",path:\"/tutorial/svelte/dom-events\"},{title:\"Inline handlers\",path:\"/tutorial/svelte/inline-handlers\"},{title:\"Capturing\",path:\"/tutorial/svelte/capturing\"},{title:\"Component events\",path:\"/tutorial/svelte/component-events\"},{title:\"Spreading events\",path:\"/tutorial/svelte/spreading-events\"}]},{title:\"Bindings\",sections:[{title:\"Text inputs\",path:\"/tutorial/svelte/text-inputs\"},{title:\"Numeric inputs\",path:\"/tutorial/svelte/numeric-inputs\"},{title:\"Checkbox inputs\",path:\"/tutorial/svelte/checkbox-inputs\"},{title:\"Select bindings\",path:\"/tutorial/svelte/select-bindings\"},{title:\"Group inputs\",path:\"/tutorial/svelte/group-inputs\"},{title:\"Select multiple\",path:\"/tutorial/svelte/multiple-select-bindings\"},{title:\"Textarea inputs\",path:\"/tutorial/svelte/textarea-inputs\"}]},{title:\"Classes and styles\",sections:[{title:\"The class attribute\",path:\"/tutorial/svelte/classes\"},{title:\"The style directive\",path:\"/tutorial/svelte/styles\"},{title:\"Component styles\",path:\"/tutorial/svelte/component-styles\"}]},{title:\"Attachments\",sections:[{title:\"The attach tag\",path:\"/tutorial/svelte/attach\"},{title:\"Attachment factories\",path:\"/tutorial/svelte/attachment-factories\"}]},{title:\"Transitions\",sections:[{title:\"The transition directive\",path:\"/tutorial/svelte/transition\"},{title:\"Adding parameters\",path:\"/tutorial/svelte/adding-parameters-to-transitions\"},{title:\"In and out\",path:\"/tutorial/svelte/in-and-out\"},{title:\"Custom CSS transitions\",path:\"/tutorial/svelte/custom-css-transitions\"},{title:\"Custom JS transitions\",path:\"/tutorial/svelte/custom-js-transitions\"},{title:\"Transition events\",path:\"/tutorial/svelte/transition-events\"},{title:\"Global transitions\",path:\"/tutorial/svelte/global-transitions\"},{title:\"Key blocks\",path:\"/tutorial/svelte/key-blocks\"}]}]},{title:\"Advanced Svelte\",sections:[{title:\"Advanced reactivity\",sections:[{title:\"Raw state\",path:\"/tutorial/svelte/raw-state\"},{title:\"Reactive classes\",path:\"/tutorial/svelte/reactive-classes\"},{title:\"Getters and setters\",path:\"/tutorial/svelte/getters-and-setters\"},{title:\"Reactive built-ins\",path:\"/tutorial/svelte/reactive-builtins\"},{title:\"Stores\",path:\"/tutorial/svelte/stores\"}]},{title:\"Reusing content\",sections:[{title:\"Snippets and render tags\",path:\"/tutorial/svelte/snippets-and-render-tags\"},{title:\"Passing snippets to components\",path:\"/tutorial/svelte/passing-snippets\"},{title:\"Implicit snippet props\",path:\"/tutorial/svelte/implicit-snippet-props\"}]},{title:\"Motion\",sections:[{title:\"Tweened values\",path:\"/tutorial/svelte/tweens\"},{title:\"Springs\",path:\"/tutorial/svelte/springs\"}]},{title:\"Advanced bindings\",sections:[{title:\"Contenteditable bindings\",path:\"/tutorial/svelte/contenteditable-bindings\"},{title:\"Each block bindings\",path:\"/tutorial/svelte/each-block-bindings\"},{title:\"Media elements\",path:\"/tutorial/svelte/media-elements\"},{title:\"Dimensions\",path:\"/tutorial/svelte/dimensions\"},{title:\"This\",path:\"/tutorial/svelte/bind-this\"},{title:\"Component bindings\",path:\"/tutorial/svelte/component-bindings\"},{title:\"Binding to component instances\",path:\"/tutorial/svelte/component-this\"}]},{title:\"Advanced transitions\",sections:[{title:\"Deferred transitions\",path:\"/tutorial/svelte/deferred-transitions\"},{title:\"Animations\",path:\"/tutorial/svelte/animations\"}]},{title:\"Context API\",sections:[{title:\"setContext and getContext\",path:\"/tutorial/svelte/context-api\"}]},{title:\"Special elements\",sections:[{title:\"\\u003Csvelte:window>\",path:\"/tutorial/svelte/svelte-window\"},{title:\"\\u003Csvelte:window> bindings\",path:\"/tutorial/svelte/svelte-window-bindings\"},{title:\"\\u003Csvelte:document>\",path:\"/tutorial/svelte/svelte-document\"},{title:\"\\u003Csvelte:body>\",path:\"/tutorial/svelte/svelte-body\"},{title:\"\\u003Csvelte:head>\",path:\"/tutorial/svelte/svelte-head\"},{title:\"\\u003Csvelte:element>\",path:\"/tutorial/svelte/svelte-element\"},{title:\"\\u003Csvelte:boundary>\",path:\"/tutorial/svelte/svelte-boundary\"}]},{title:\"\\u003Cscript module>\",sections:[{title:\"Sharing code\",path:\"/tutorial/svelte/sharing-code\"},{title:\"Exports\",path:\"/tutorial/svelte/module-exports\"}]},{title:\"Next steps\",sections:[{title:\"Congratulations!\",path:\"/tutorial/svelte/congratulations\"}]}]},{title:\"Basic SvelteKit\",sections:[{title:\"Introduction\",sections:[{title:\"What is SvelteKit?\",path:\"/tutorial/kit/introducing-sveltekit\"}]},{title:\"Routing\",sections:[{title:\"Pages\",path:\"/tutorial/kit/pages\"},{title:\"Layouts\",path:\"/tutorial/kit/layouts\"},{title:\"Route parameters\",path:\"/tutorial/kit/params\"}]},{title:\"Loading data\",sections:[{title:\"Page data\",path:\"/tutorial/kit/page-data\"},{title:\"Layout data\",path:\"/tutorial/kit/layout-data\"}]},{title:\"Headers and cookies\",sections:[{title:\"Setting headers\",path:\"/tutorial/kit/headers\"},{title:\"Reading and writing cookies\",path:\"/tutorial/kit/cookies\"}]},{title:\"Shared modules\",sections:[{title:\"The $lib alias\",path:\"/tutorial/kit/lib\"}]},{title:\"Forms\",sections:[{title:\"The \\u003Cform> element\",path:\"/tutorial/kit/the-form-element\"},{title:\"Named form actions\",path:\"/tutorial/kit/named-form-actions\"},{title:\"Validation\",path:\"/tutorial/kit/form-validation\"},{title:\"Progressive enhancement\",path:\"/tutorial/kit/progressive-enhancement\"},{title:\"Customizing use:enhance\",path:\"/tutorial/kit/customizing-use-enhance\"}]},{title:\"API routes\",sections:[{title:\"GET handlers\",path:\"/tutorial/kit/get-handlers\"},{title:\"POST handlers\",path:\"/tutorial/kit/post-handlers\"},{title:\"Other handlers\",path:\"/tutorial/kit/other-handlers\"}]},{title:\"$app/state\",sections:[{title:\"page\",path:\"/tutorial/kit/page-state\"},{title:\"navigating\",path:\"/tutorial/kit/navigating-state\"},{title:\"updated\",path:\"/tutorial/kit/updated-state\"}]},{title:\"Errors and redirects\",sections:[{title:\"Basics\",path:\"/tutorial/kit/error-basics\"},{title:\"Error pages\",path:\"/tutorial/kit/error-pages\"},{title:\"Fallback errors\",path:\"/tutorial/kit/fallback-errors\"},{title:\"Redirects\",path:\"/tutorial/kit/redirects\"}]}]},{title:\"Advanced SvelteKit\",sections:[{title:\"Hooks\",sections:[{title:\"handle\",path:\"/tutorial/kit/handle\"},{title:\"The RequestEvent object\",path:\"/tutorial/kit/event\"},{title:\"handleFetch\",path:\"/tutorial/kit/handlefetch\"},{title:\"handleError\",path:\"/tutorial/kit/handleerror\"}]},{title:\"Page options\",sections:[{title:\"Basics\",path:\"/tutorial/kit/page-options\"},{title:\"ssr\",path:\"/tutorial/kit/ssr\"},{title:\"csr\",path:\"/tutorial/kit/csr\"},{title:\"prerender\",path:\"/tutorial/kit/prerender\"},{title:\"trailingSlash\",path:\"/tutorial/kit/trailingslash\"}]},{title:\"Link options\",sections:[{title:\"Preloading\",path:\"/tutorial/kit/preload\"},{title:\"Reloading the page\",path:\"/tutorial/kit/reload\"}]},{title:\"Advanced routing\",sections:[{title:\"Optional parameters\",path:\"/tutorial/kit/optional-params\"},{title:\"Rest parameters\",path:\"/tutorial/kit/rest-params\"},{title:\"Param matchers\",path:\"/tutorial/kit/param-matchers\"},{title:\"Route groups\",path:\"/tutorial/kit/route-groups\"},{title:\"Breaking out of layouts\",path:\"/tutorial/kit/breaking-out-of-layouts\"}]},{title:\"Advanced loading\",sections:[{title:\"Universal load functions\",path:\"/tutorial/kit/universal-load-functions\"},{title:\"Using both load functions\",path:\"/tutorial/kit/using-both-load-functions\"},{title:\"Using parent data\",path:\"/tutorial/kit/await-parent\"},{title:\"Invalidation\",path:\"/tutorial/kit/invalidation\"},{title:\"Custom dependencies\",path:\"/tutorial/kit/custom-dependencies\"},{title:\"invalidateAll\",path:\"/tutorial/kit/invalidate-all\"}]},{title:\"Environment variables\",sections:[{title:\"$env/static/private\",path:\"/tutorial/kit/env-static-private\"},{title:\"$env/dynamic/private\",path:\"/tutorial/kit/env-dynamic-private\"},{title:\"$env/static/public\",path:\"/tutorial/kit/env-static-public\"},{title:\"$env/dynamic/public\",path:\"/tutorial/kit/env-dynamic-public\"}]},{title:\"Conclusion\",sections:[{title:\"Next steps\",path:\"/tutorial/kit/next-steps\"}]}]}]},{title:\"Packages\",slug:\"packages\"},{title:\"Playground\",slug:\"playground\"},{title:\"Blog\",slug:\"blog\"}],banner:{id:\"ljubljana-2026-tickets\",start:new Date(1785542400000),end:new Date(1795219199000),arrow:true,content:{lg:\"Svelte Summit Ljubljana and online, Nov 18-19: Tickets available soon!\",sm:\"Svelte Summit Nov 18-19\"},href:\"https://www.sveltesummit.com/\"}},uses:{}},{type:\"data\",data:{sections:[{slug:\"docs/svelte/introduction\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Introduction\"},children:[{slug:\"docs/svelte/overview\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Overview\"},children:[]},{slug:\"docs/svelte/getting-started\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Getting started\"},children:[]},{slug:\"docs/svelte/svelte-files\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\".svelte files\"},children:[]},{slug:\"docs/svelte/svelte-js-files\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\".svelte.js and .svelte.ts files\"},children:[]}]},{slug:\"docs/svelte/runes\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runes\"},children:[{slug:\"docs/svelte/what-are-runes\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"What are runes?\"},children:[]},{slug:\"docs/svelte/$state\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$state\",tags:\"rune-state\"},children:[]},{slug:\"docs/svelte/$derived\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$derived\",tags:\"rune-derived\"},children:[]},{slug:\"docs/svelte/$effect\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$effect\",tags:\"rune-effect\"},children:[]},{slug:\"docs/svelte/$props\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$props\",tags:\"rune-props\"},children:[]},{slug:\"docs/svelte/$bindable\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$bindable\"},children:[]},{slug:\"docs/svelte/$inspect\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$inspect\",tags:\"rune-inspect\"},children:[]},{slug:\"docs/svelte/$host\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$host\"},children:[]}]},{slug:\"docs/svelte/template-syntax\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Template syntax\"},children:[{slug:\"docs/svelte/basic-markup\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Basic markup\"},children:[]},{slug:\"docs/svelte/if\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#if ...}\",tags:\"template-if\"},children:[]},{slug:\"docs/svelte/each\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#each ...}\",tags:\"template-each\"},children:[]},{slug:\"docs/svelte/key\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#key ...}\",tags:\"template-key\"},children:[]},{slug:\"docs/svelte/await\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#await ...}\",tags:\"template-await\"},children:[]},{slug:\"docs/svelte/snippet\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#snippet ...}\"},children:[]},{slug:\"docs/svelte/@render\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@render ...}\"},children:[]},{slug:\"docs/svelte/@html\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@html ...}\",tags:\"template-html\"},children:[]},{slug:\"docs/svelte/@attach\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@attach ...}\",tags:\"attachments\"},children:[]},{slug:\"docs/svelte/@const\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@const ...}\"},children:[]},{slug:\"docs/svelte/@debug\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@debug ...}\"},children:[]},{slug:\"docs/svelte/declaration-tags\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{let/const ...}\"},children:[]},{slug:\"docs/svelte/bind\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"bind:\"},children:[]},{slug:\"docs/svelte/use\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"use:\"},children:[]},{slug:\"docs/svelte/transition\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"transition:\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/in-and-out\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"in: and out:\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/animate\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"animate:\"},children:[]},{slug:\"docs/svelte/style\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"style:\",tags:\"template-style\"},children:[]},{slug:\"docs/svelte/class\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"class\",tags:\"template-style\"},children:[]},{slug:\"docs/svelte/await-expressions\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"await\"},children:[]}]},{slug:\"docs/svelte/styling\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Styling\"},children:[{slug:\"docs/svelte/scoped-styles\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Scoped styles\",tags:\"styles-scoped\"},children:[]},{slug:\"docs/svelte/global-styles\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Global styles\",tags:\"styles-global\"},children:[]},{slug:\"docs/svelte/custom-properties\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Custom properties\",tags:\"styles-custom-properties\"},children:[]},{slug:\"docs/svelte/nested-style-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Nested \\u003Cstyle> elements\"},children:[]}]},{slug:\"docs/svelte/special-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Special elements\"},children:[{slug:\"docs/svelte/svelte-boundary\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:boundary>\"},children:[]},{slug:\"docs/svelte/svelte-window\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:window>\"},children:[]},{slug:\"docs/svelte/svelte-document\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:document>\"},children:[]},{slug:\"docs/svelte/svelte-body\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:body>\"},children:[]},{slug:\"docs/svelte/svelte-head\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:head>\"},children:[]},{slug:\"docs/svelte/svelte-element\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:element>\"},children:[]},{slug:\"docs/svelte/svelte-options\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:options>\"},children:[]}]},{slug:\"docs/svelte/runtime\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime\"},children:[{slug:\"docs/svelte/stores\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Stores\"},children:[]},{slug:\"docs/svelte/context\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Context\"},children:[]},{slug:\"docs/svelte/lifecycle-hooks\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Lifecycle hooks\"},children:[]},{slug:\"docs/svelte/imperative-component-api\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Imperative component API\"},children:[]},{slug:\"docs/svelte/hydratable\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Hydratable data\"},children:[]}]},{slug:\"docs/svelte/misc\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Misc\"},children:[{slug:\"docs/svelte/best-practices\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Best practices\",skill:true,name:\"svelte-core-bestpractices\",description:\"Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.\"},children:[]},{slug:\"docs/svelte/testing\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Testing\"},children:[]},{slug:\"docs/svelte/typescript\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"TypeScript\"},children:[]},{slug:\"docs/svelte/custom-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Custom elements\"},children:[]},{slug:\"docs/svelte/browser-support\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Browser support\"},children:[]},{slug:\"docs/svelte/v4-migration-guide\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Svelte 4 migration guide\"},children:[]},{slug:\"docs/svelte/v5-migration-guide\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Svelte 5 migration guide\"},children:[]},{slug:\"docs/svelte/faq\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Frequently asked questions\"},children:[]}]},{slug:\"docs/svelte/reference\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reference\"},children:[{slug:\"docs/svelte/svelte\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte\"},children:[]},{slug:\"docs/svelte/svelte-action\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/action\"},children:[]},{slug:\"docs/svelte/svelte-animate\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/animate\"},children:[]},{slug:\"docs/svelte/svelte-attachments\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/attachments\",tags:\"attachments\"},children:[]},{slug:\"docs/svelte/svelte-compiler\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/compiler\"},children:[]},{slug:\"docs/svelte/svelte-easing\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/easing\"},children:[]},{slug:\"docs/svelte/svelte-events\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/events\"},children:[]},{slug:\"docs/svelte/svelte-legacy\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/legacy\"},children:[]},{slug:\"docs/svelte/svelte-motion\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/motion\"},children:[]},{slug:\"docs/svelte/svelte-reactivity-window\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/reactivity/window\"},children:[]},{slug:\"docs/svelte/svelte-reactivity\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/reactivity\"},children:[]},{slug:\"docs/svelte/svelte-server\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/server\"},children:[]},{slug:\"docs/svelte/svelte-store\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/store\"},children:[]},{slug:\"docs/svelte/svelte-transition\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/transition\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/compiler-errors\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Compiler errors\"},children:[]},{slug:\"docs/svelte/compiler-warnings\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Compiler warnings\"},children:[]},{slug:\"docs/svelte/runtime-errors\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime errors\"},children:[]},{slug:\"docs/svelte/runtime-warnings\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime warnings\"},children:[]}]},{slug:\"docs/svelte/legacy\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Legacy APIs\"},children:[{slug:\"docs/svelte/legacy-overview\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Overview\"},children:[]},{slug:\"docs/svelte/legacy-let\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive let/var declarations\"},children:[]},{slug:\"docs/svelte/legacy-reactive-assignments\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive $: statements\"},children:[]},{slug:\"docs/svelte/legacy-export-let\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"export let\"},children:[]},{slug:\"docs/svelte/legacy-$$props-and-$$restProps\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$$props and $$restProps\"},children:[]},{slug:\"docs/svelte/legacy-on\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"on:\"},children:[]},{slug:\"docs/svelte/legacy-slots\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Cslot>\"},children:[]},{slug:\"docs/svelte/legacy-$$slots\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$$slots\"},children:[]},{slug:\"docs/svelte/legacy-svelte-fragment\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:fragment>\"},children:[]},{slug:\"docs/svelte/legacy-svelte-component\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:component>\"},children:[]},{slug:\"docs/svelte/legacy-svelte-self\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:self>\"},children:[]},{slug:\"docs/svelte/legacy-component-api\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Imperative component API\"},children:[]}]}]},uses:{params:[\"topic\"]}},{type:\"data\",data:{document:{slug:\"docs/svelte/legacy-reactive-assignments\",file:\"docs/svelte/99-legacy/02-legacy-reactive-assignments.md\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive $: statements\"},breadcrumbs:[{title:\"Docs\"},{title:\"Svelte\"},{title:\"Legacy APIs\"}],body:\"\\u003Cp>In runes mode, reactions to state updates are handled with the \\u003Ca href=\\\"$derived\\\">\\u003Ccode>$derived\\u003C/code>\\u003C/a> and \\u003Ca href=\\\"$effect\\\">\\u003Ccode>$effect\\u003C/code>\\u003C/a> runes.\\u003C/p>\\n\\u003Cp>In legacy mode, any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with a \\u003Ccode>$:\\u003C/code> \\u003Ca href=\\\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label\\\">label\\u003C/a>. These statements run after other code in the \\u003Ccode><script>\\u003C/code> and before the component markup is rendered, then whenever the values that they depend on change.\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"svelte\\\" class=\\\"shiki css-variables\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"><\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">1\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">2\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// this is a 'reactive statement', and it will re-run\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// when `a`, `b` or `sum` change\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">console\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">.log\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">`\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">+\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">sum\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">`\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">);\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// this is a 'reactive assignment' — `sum` will be\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// recalculated when `a` or `b` change. It is\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// not necessary to declare `sum` separately\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">sum\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">+\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"></\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>Statements are ordered \\u003Cem>topologically\\u003C/em> by their dependencies and their assignments: since the \\u003Ccode>console.log\\u003C/code> statement depends on \\u003Ccode>sum\\u003C/code>, \\u003Ccode>sum\\u003C/code> is calculated first even though it appears later in the source.\\u003C/p>\\n\\u003Cp>Multiple statements can be combined by putting them in a block:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">{\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// recalculate `total` when `items` changes\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">total\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">for\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">item\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>item\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">of\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">items\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">total\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">+=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">item\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>item\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">value\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>The left-hand side of a reactive assignments can be an identifier, or it can be a destructuring assignment:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">({\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">larry\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>larry\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">,\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">moe\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>moe\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">,\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">curly\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>curly\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">stooges\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">);\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Ch2 id=\\\"Understanding-dependencies\\\">\\u003Cspan>Understanding dependencies\\u003C/span>\\u003Ca href=\\\"#Understanding-dependencies\\\" class=\\\"permalink\\\" aria-label=\\\"permalink\\\">\\u003C/a>\\u003C/h2>\\u003Cp>The dependencies of a \\u003Ccode>$:\\u003C/code> statement are determined at compile time — they are whichever variables are referenced (but not assigned to) inside the statement.\\u003C/p>\\n\\u003Cp>In other words, a statement like this will \\u003Cem>not\\u003C/em> re-run when \\u003Ccode>count\\u003C/code> changes, because the compiler cannot ‘see’ the dependency:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">count\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>count\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">double\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>double\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">count\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>count\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">*\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">2\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">doubled\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">double\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>double\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">();\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>Similarly, topological ordering will fail if dependencies are referenced indirectly: \\u003Ccode>z\\u003C/code> will never update, because \\u003Ccode>y\\u003C/code> is not considered ‘dirty’ when the update occurs. Moving \\u003Ccode>$: z = y\\u003C/code> below \\u003Ccode>$: setY(x)\\u003C/code> will fix it:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"svelte\\\" class=\\\"shiki css-variables\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"><\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">x\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">z\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">setY\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(x);\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">function\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">setY\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(value) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">value;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"></\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Ch2 id=\\\"Browser-only-code\\\">\\u003Cspan>Browser-only code\\u003C/span>\\u003Ca href=\\\"#Browser-only-code\\\" class=\\\"permalink\\\" aria-label=\\\"permalink\\\">\\u003C/a>\\u003C/h2>\\u003Cp>Reactive statements run during server-side rendering as well as in the browser. This means that any code that should only run in the browser must be wrapped in an \\u003Ccode>if\\u003C/code> block:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">if\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">browser\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">var\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">document\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">Document\\u003C/span>\\u003C/code>\\u003Cdiv class=\\\"twoslash-popup-docs\\\">\\u003Cp>\\u003Cstrong>\\u003Ccode>window.document\\u003C/code>\\u003C/strong> returns a reference to the document contained in the window.\\u003C/p>\\n\\u003Cp>\\u003Ca href=\\\"https://developer.mozilla.org/docs/Web/API/Window/document\\\">MDN Reference\\u003C/a>\\u003C/p>\\n\\u003C/div>\\u003C/span>document\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">Document\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.title: string\\u003C/span>\\u003C/code>\\u003Cdiv class=\\\"twoslash-popup-docs\\\">\\u003Cp>The \\u003Cstrong>\\u003Ccode>document.title\\u003C/code>\\u003C/strong> property gets or sets the current title of the document. When present, it defaults to the value of the \\u003Ctitle>.\\u003C/p>\\n\\u003Cp>\\u003Ca href=\\\"https://developer.mozilla.org/docs/Web/API/Document/title\\\">MDN Reference\\u003C/a>\\u003C/p>\\n\\u003C/div>\\u003C/span>title\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">title\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\",sections:[{slug:\"Understanding-dependencies\",title:\"Understanding dependencies\",subsections:[]},{slug:\"Browser-only-code\",title:\"Browser-only code\",subsections:[]}],children:[],prev:{slug:\"docs/svelte/legacy-let\",title:\"Reactive let/var declarations\"},next:{slug:\"docs/svelte/legacy-export-let\",title:\"export let\"}},related:void 0},uses:{params:[\"topic\",\"path\"],url:1}}], form: null, error: null }); }); } </script> </div> <script> try { if (localStorage.getItem('sv:show-legacy') === 'open') { for (const node of document.querySelectorAll('details.legacy')) { node.open = true; } } if (localStorage.getItem('svelte:prefers-ts') === 'false') { for (const node of document.querySelectorAll('.ts-toggle')) { node.checked = false; } } } catch { // localStorage access disabled } </script> </body> </html>","url":"https://svelte.dev/docs/svelte/legacy-reactive-assignments","text":"Example:\n```text\n<script>\n\tlet a = 1;\n\tlet b = 2;\n\n\t// this is a 'reactive statement', and it will re-run\n\t// when `a`, `b` or `sum` change\n\t$: console.log(`${a} + ${b} = ${sum}`);\n\n\t// this is a 'reactive assignment' — `sum` will be\n\t// recalculated when `a` or `b` change. It is\n\t// not necessary to declare `sum` separately\n\t$: sum = a + b;\n</script>\n```\n\nExample:\n```text\n$: {\n\t// recalculate `total` when `items` changes\n\ttotal = 0;\n\n\tfor (const const item: anyitem of items) {\n\t\ttotal += const item: anyitem.value;\n\t}\n}const item: anyconst item: any\n```\n\nExample:\n```text\n$: ({ larry: anylarry, moe: anymoe, curly: anycurly } = stooges);larry: anymoe: anycurly: any\n```\n\nExample:\n```text\nlet let count: numbercount = 0;\nlet let double: () => numberdouble = () => let count: numbercount * 2;\n\n$: doubled = let double: () => numberdouble();let count: numberlet double: () => numberlet count: numberlet double: () => number\n```\n\nExample:\n```text\n<script>\n\tlet x = 0;\n\tlet y = 0;\n\n\t$: z = y;\n\t$: setY(x);\n\n\tfunction setY(value) {\n\t\ty = value;\n\t}\n</script>\n```\n\nExample:\n```text\n$: if (browser) {\n\tvar document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.title: stringThe document.title property gets or sets the current title of the document. When present, it defaults to the value of the .</p>\n<p><a href=\"https://developer.mozilla.org/docs/Web/API/Document/title\">MDN Reference</a></p>\n</div></span>title</span></span> <span style=\"color:var(--shiki-foreground)\"></span><span style=\"color:var(--shiki-token-keyword)\">=</span> <span style=\"color:var(--shiki-foreground)\"></span><span style=\"color:var(--shiki-foreground)\">title</span><span style=\"color:var(--shiki-foreground)\">;</span></span>\n<span class=\"line\"><span style=\"color:var(--shiki-foreground)\">}</span></span></code></pre></div><!----><!----></div><!----></div> <p class=\"edit svelte-s202gb\"><a href=\"https://github.com/sveltejs/svelte/edit/main/documentation/docs/99-legacy/02-legacy-reactive-assignments.md\" class=\"svelte-s202gb\"><svg width=\"20\" height=\"20\" class=\"svelte-hfc14b\"><use href=\"#edit\"></use></svg><!----> Edit this page on GitHub</a> <!--[0--><a href=\"/docs/svelte/legacy-reactive-assignments/llms.txt\" class=\"svelte-s202gb\"><svg width=\"20\" height=\"20\" class=\"svelte-hfc14b\"><use href=\"#contents\"></use></svg><!----> llms.txt</a><!--]--></p> <div class=\"controls svelte-s202gb\"><div class=\"flex svelte-s202gb\"><span class=\"svelte-s202gb\">previous</span> <span class=\"next svelte-s202gb\">next</span></div> <div class=\"flex svelte-s202gb\"><!--[0--><a href=\"/docs/svelte/legacy-let\" class=\"svelte-s202gb\">Reactive let/var declarations</a><!--]--> <!--[0--><a class=\"next svelte-s202gb\" href=\"/docs/svelte/legacy-export-let\">export let</a><!--]--></div></div><!----></div><!--]--><!--]--><!--]--><!----></div></div><!--]--><!--]--><!--]--><!----><!----></main> <!--[0--><!--[-1--><!--]--><!--]--><!----><!----> <!--[-1--><!--]--><!--]--><!--]--><!--]--><!----> <!--[-1--><!--]--><!--]-->\n\t\t\t\n\t\t\t<script>\n\t\t\t\t{\n\t\t\t\t\t__sveltekit_1gw33p1 = {\n\t\t\t\t\t\tbase: new URL(\"../..\", location).pathname.slice(0, -1),\n\t\t\t\t\t\tversion: \"1786638912168\"\n\t\t\t\t\t};\n\n\t\t\t\t\tconst element = document.currentScript.parentElement;\n\n\t\t\t\t\timport(\"../../_app/immutable/entry/start.DKNFWkLU.js\").then(async (kit) => {\n\t\t\t\t\t\tkit.init(__sveltekit_1gw33p1);\n\t\t\t\t\t\tconst app = await import(\"../../_app/immutable/entry/app.hSZVDu1D.js\");\n\t\t\t\t\t\tkit.start(app, element, {\n\t\t\t\t\t\t\tnode_ids: [0, 3, 16],\n\t\t\t\t\t\t\tdata: [{type:\"data\",data:{nav_links:[{title:\"Docs\",slug:\"docs\",sections:[{title:\"Svelte\",path:\"/docs/svelte\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/svelte/overview\"},{title:\"Getting started\",path:\"/docs/svelte/getting-started\"},{title:\".svelte files\",path:\"/docs/svelte/svelte-files\"},{title:\".svelte.js and .svelte.ts files\",path:\"/docs/svelte/svelte-js-files\"}]},{title:\"Runes\",sections:[{title:\"What are runes?\",path:\"/docs/svelte/what-are-runes\"},{title:\"$state\",path:\"/docs/svelte/$state\"},{title:\"$derived\",path:\"/docs/svelte/$derived\"},{title:\"$effect\",path:\"/docs/svelte/$effect\"},{title:\"$props\",path:\"/docs/svelte/$props\"},{title:\"$bindable\",path:\"/docs/svelte/$bindable\"},{title:\"$inspect\",path:\"/docs/svelte/$inspect\"},{title:\"$host\",path:\"/docs/svelte/$host\"}]},{title:\"Template syntax\",sections:[{title:\"Basic markup\",path:\"/docs/svelte/basic-markup\"},{title:\"{#if ...}\",path:\"/docs/svelte/if\"},{title:\"{#each ...}\",path:\"/docs/svelte/each\"},{title:\"{#key ...}\",path:\"/docs/svelte/key\"},{title:\"{#await ...}\",path:\"/docs/svelte/await\"},{title:\"{#snippet ...}\",path:\"/docs/svelte/snippet\"},{title:\"{@render ...}\",path:\"/docs/svelte/@render\"},{title:\"{@html ...}\",path:\"/docs/svelte/@html\"},{title:\"{@attach ...}\",path:\"/docs/svelte/@attach\"},{title:\"{@const ...}\",path:\"/docs/svelte/@const\"},{title:\"{@debug ...}\",path:\"/docs/svelte/@debug\"},{title:\"{let/const ...}\",path:\"/docs/svelte/declaration-tags\"},{title:\"bind:\",path:\"/docs/svelte/bind\"},{title:\"use:\",path:\"/docs/svelte/use\"},{title:\"transition:\",path:\"/docs/svelte/transition\"},{title:\"in: and out:\",path:\"/docs/svelte/in-and-out\"},{title:\"animate:\",path:\"/docs/svelte/animate\"},{title:\"style:\",path:\"/docs/svelte/style\"},{title:\"class\",path:\"/docs/svelte/class\"},{title:\"await\",path:\"/docs/svelte/await-expressions\"}]},{title:\"Styling\",sections:[{title:\"Scoped styles\",path:\"/docs/svelte/scoped-styles\"},{title:\"Global styles\",path:\"/docs/svelte/global-styles\"},{title:\"Custom properties\",path:\"/docs/svelte/custom-properties\"},{title:\"Nested \\u003Cstyle> elements\",path:\"/docs/svelte/nested-style-elements\"}]},{title:\"Special elements\",sections:[{title:\"\\u003Csvelte:boundary>\",path:\"/docs/svelte/svelte-boundary\"},{title:\"\\u003Csvelte:window>\",path:\"/docs/svelte/svelte-window\"},{title:\"\\u003Csvelte:document>\",path:\"/docs/svelte/svelte-document\"},{title:\"\\u003Csvelte:body>\",path:\"/docs/svelte/svelte-body\"},{title:\"\\u003Csvelte:head>\",path:\"/docs/svelte/svelte-head\"},{title:\"\\u003Csvelte:element>\",path:\"/docs/svelte/svelte-element\"},{title:\"\\u003Csvelte:options>\",path:\"/docs/svelte/svelte-options\"}]},{title:\"Runtime\",sections:[{title:\"Stores\",path:\"/docs/svelte/stores\"},{title:\"Context\",path:\"/docs/svelte/context\"},{title:\"Lifecycle hooks\",path:\"/docs/svelte/lifecycle-hooks\"},{title:\"Imperative component API\",path:\"/docs/svelte/imperative-component-api\"},{title:\"Hydratable data\",path:\"/docs/svelte/hydratable\"}]},{title:\"Misc\",sections:[{title:\"Best practices\",path:\"/docs/svelte/best-practices\"},{title:\"Testing\",path:\"/docs/svelte/testing\"},{title:\"TypeScript\",path:\"/docs/svelte/typescript\"},{title:\"Custom elements\",path:\"/docs/svelte/custom-elements\"},{title:\"Browser support\",path:\"/docs/svelte/browser-support\"},{title:\"Svelte 4 migration guide\",path:\"/docs/svelte/v4-migration-guide\"},{title:\"Svelte 5 migration guide\",path:\"/docs/svelte/v5-migration-guide\"},{title:\"Frequently asked questions\",path:\"/docs/svelte/faq\"}]},{title:\"Reference\",sections:[{title:\"svelte\",path:\"/docs/svelte/svelte\"},{title:\"svelte/action\",path:\"/docs/svelte/svelte-action\"},{title:\"svelte/animate\",path:\"/docs/svelte/svelte-animate\"},{title:\"svelte/attachments\",path:\"/docs/svelte/svelte-attachments\"},{title:\"svelte/compiler\",path:\"/docs/svelte/svelte-compiler\"},{title:\"svelte/easing\",path:\"/docs/svelte/svelte-easing\"},{title:\"svelte/events\",path:\"/docs/svelte/svelte-events\"},{title:\"svelte/legacy\",path:\"/docs/svelte/svelte-legacy\"},{title:\"svelte/motion\",path:\"/docs/svelte/svelte-motion\"},{title:\"svelte/reactivity/window\",path:\"/docs/svelte/svelte-reactivity-window\"},{title:\"svelte/reactivity\",path:\"/docs/svelte/svelte-reactivity\"},{title:\"svelte/server\",path:\"/docs/svelte/svelte-server\"},{title:\"svelte/store\",path:\"/docs/svelte/svelte-store\"},{title:\"svelte/transition\",path:\"/docs/svelte/svelte-transition\"},{title:\"Compiler errors\",path:\"/docs/svelte/compiler-errors\"},{title:\"Compiler warnings\",path:\"/docs/svelte/compiler-warnings\"},{title:\"Runtime errors\",path:\"/docs/svelte/runtime-errors\"},{title:\"Runtime warnings\",path:\"/docs/svelte/runtime-warnings\"}]},{title:\"Legacy APIs\",sections:[{title:\"Overview\",path:\"/docs/svelte/legacy-overview\"},{title:\"Reactive let/var declarations\",path:\"/docs/svelte/legacy-let\"},{title:\"Reactive $: statements\",path:\"/docs/svelte/legacy-reactive-assignments\"},{title:\"export let\",path:\"/docs/svelte/legacy-export-let\"},{title:\"$$props and $$restProps\",path:\"/docs/svelte/legacy-$$props-and-$$restProps\"},{title:\"on:\",path:\"/docs/svelte/legacy-on\"},{title:\"\\u003Cslot>\",path:\"/docs/svelte/legacy-slots\"},{title:\"$$slots\",path:\"/docs/svelte/legacy-$$slots\"},{title:\"\\u003Csvelte:fragment>\",path:\"/docs/svelte/legacy-svelte-fragment\"},{title:\"\\u003Csvelte:component>\",path:\"/docs/svelte/legacy-svelte-component\"},{title:\"\\u003Csvelte:self>\",path:\"/docs/svelte/legacy-svelte-self\"},{title:\"Imperative component API\",path:\"/docs/svelte/legacy-component-api\"}]}]},{title:\"SvelteKit\",path:\"/docs/kit\",sections:[{title:\"Getting started\",sections:[{title:\"Introduction\",path:\"/docs/kit/introduction\"},{title:\"Creating a project\",path:\"/docs/kit/creating-a-project\"},{title:\"Project types\",path:\"/docs/kit/project-types\"},{title:\"Project structure\",path:\"/docs/kit/project-structure\"},{title:\"Web standards\",path:\"/docs/kit/web-standards\"}]},{title:\"Core concepts\",sections:[{title:\"Routing\",path:\"/docs/kit/routing\"},{title:\"Loading data\",path:\"/docs/kit/load\"},{title:\"Form actions\",path:\"/docs/kit/form-actions\"},{title:\"Page options\",path:\"/docs/kit/page-options\"},{title:\"State management\",path:\"/docs/kit/state-management\"},{title:\"Remote functions\",path:\"/docs/kit/remote-functions\"},{title:\"Environment variables\",path:\"/docs/kit/environment-variables\"}]},{title:\"Build and deploy\",sections:[{title:\"Building your app\",path:\"/docs/kit/building-your-app\"},{title:\"Adapters\",path:\"/docs/kit/adapters\"},{title:\"Zero-config deployments\",path:\"/docs/kit/adapter-auto\"},{title:\"Node servers\",path:\"/docs/kit/adapter-node\"},{title:\"Static site generation\",path:\"/docs/kit/adapter-static\"},{title:\"Single-page apps\",path:\"/docs/kit/single-page-apps\"},{title:\"Cloudflare\",path:\"/docs/kit/adapter-cloudflare\"},{title:\"Cloudflare Workers\",path:\"/docs/kit/adapter-cloudflare-workers\"},{title:\"Netlify\",path:\"/docs/kit/adapter-netlify\"},{title:\"Vercel\",path:\"/docs/kit/adapter-vercel\"},{title:\"Writing adapters\",path:\"/docs/kit/writing-adapters\"}]},{title:\"Advanced\",sections:[{title:\"Advanced routing\",path:\"/docs/kit/advanced-routing\"},{title:\"Hooks\",path:\"/docs/kit/hooks\"},{title:\"Errors\",path:\"/docs/kit/errors\"},{title:\"Link options\",path:\"/docs/kit/link-options\"},{title:\"Service workers\",path:\"/docs/kit/service-workers\"},{title:\"Server-only modules\",path:\"/docs/kit/server-only-modules\"},{title:\"Snapshots\",path:\"/docs/kit/snapshots\"},{title:\"Shallow routing\",path:\"/docs/kit/shallow-routing\"},{title:\"Observability\",path:\"/docs/kit/observability\"},{title:\"Packaging\",path:\"/docs/kit/packaging\"}]},{title:\"Best practices\",sections:[{title:\"Auth\",path:\"/docs/kit/auth\"},{title:\"Performance\",path:\"/docs/kit/performance\"},{title:\"Icons\",path:\"/docs/kit/icons\"},{title:\"Images\",path:\"/docs/kit/images\"},{title:\"Accessibility\",path:\"/docs/kit/accessibility\"},{title:\"SEO\",path:\"/docs/kit/seo\"}]},{title:\"Appendix\",sections:[{title:\"Frequently asked questions\",path:\"/docs/kit/faq\"},{title:\"Integrations\",path:\"/docs/kit/integrations\"},{title:\"Breakpoint Debugging\",path:\"/docs/kit/debugging\"},{title:\"Migrating to SvelteKit v2\",path:\"/docs/kit/migrating-to-sveltekit-2\"},{title:\"Migrating from Sapper\",path:\"/docs/kit/migrating\"},{title:\"Additional resources\",path:\"/docs/kit/additional-resources\"},{title:\"Glossary\",path:\"/docs/kit/glossary\"}]},{title:\"Reference\",sections:[{title:\"@sveltejs/kit\",path:\"/docs/kit/@sveltejs-kit\"},{title:\"@sveltejs/kit/env\",path:\"/docs/kit/@sveltejs-kit-env\"},{title:\"@sveltejs/kit/hooks\",path:\"/docs/kit/@sveltejs-kit-hooks\"},{title:\"@sveltejs/kit/node/polyfills\",path:\"/docs/kit/@sveltejs-kit-node-polyfills\"},{title:\"@sveltejs/kit/node\",path:\"/docs/kit/@sveltejs-kit-node\"},{title:\"@sveltejs/kit/vite\",path:\"/docs/kit/@sveltejs-kit-vite\"},{title:\"$app/env\",path:\"/docs/kit/$app-env\"},{title:\"$app/env/private\",path:\"/docs/kit/$app-env-private\"},{title:\"$app/env/public\",path:\"/docs/kit/$app-env-public\"},{title:\"$app/environment\",path:\"/docs/kit/$app-environment\"},{title:\"$app/forms\",path:\"/docs/kit/$app-forms\"},{title:\"$app/navigation\",path:\"/docs/kit/$app-navigation\"},{title:\"$app/paths\",path:\"/docs/kit/$app-paths\"},{title:\"$app/server\",path:\"/docs/kit/$app-server\"},{title:\"$app/state\",path:\"/docs/kit/$app-state\"},{title:\"$app/stores\",path:\"/docs/kit/$app-stores\"},{title:\"$app/types\",path:\"/docs/kit/$app-types\"},{title:\"$env/dynamic/private\",path:\"/docs/kit/$env-dynamic-private\"},{title:\"$env/dynamic/public\",path:\"/docs/kit/$env-dynamic-public\"},{title:\"$env/static/private\",path:\"/docs/kit/$env-static-private\"},{title:\"$env/static/public\",path:\"/docs/kit/$env-static-public\"},{title:\"$lib\",path:\"/docs/kit/$lib\"},{title:\"$service-worker\",path:\"/docs/kit/$service-worker\"},{title:\"Configuration\",path:\"/docs/kit/configuration\"},{title:\"Command Line Interface\",path:\"/docs/kit/cli\"},{title:\"Types\",path:\"/docs/kit/types\"}]}]},{title:\"CLI\",path:\"/docs/cli\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/cli/overview\"},{title:\"Frequently asked questions\",path:\"/docs/cli/faq\"}]},{title:\"Commands\",sections:[{title:\"sv create\",path:\"/docs/cli/sv-create\"},{title:\"sv add\",path:\"/docs/cli/sv-add\"},{title:\"sv check\",path:\"/docs/cli/sv-check\"},{title:\"sv migrate\",path:\"/docs/cli/sv-migrate\"}]},{title:\"Add-ons\",sections:[{title:\"ai-tools\",path:\"/docs/cli/ai-tools\"},{title:\"better-auth\",path:\"/docs/cli/better-auth\"},{title:\"drizzle\",path:\"/docs/cli/drizzle\"},{title:\"eslint\",path:\"/docs/cli/eslint\"},{title:\"experimental\",path:\"/docs/cli/experimental\"},{title:\"mdsvex\",path:\"/docs/cli/mdsvex\"},{title:\"paraglide\",path:\"/docs/cli/paraglide\"},{title:\"playwright\",path:\"/docs/cli/playwright\"},{title:\"prettier\",path:\"/docs/cli/prettier\"},{title:\"storybook\",path:\"/docs/cli/storybook\"},{title:\"sveltekit-adapter\",path:\"/docs/cli/sveltekit-adapter\"},{title:\"tailwindcss\",path:\"/docs/cli/tailwind\"},{title:\"vitest\",path:\"/docs/cli/vitest\"},{title:\"[create your own]\",path:\"/docs/cli/community\"}]},{title:\"API\",sections:[{title:\"sv\",path:\"/docs/cli/sv\"},{title:\"sv-utils\",path:\"/docs/cli/sv-utils\"}]}]},{title:\"AI\",path:\"/docs/ai\",sections:[{title:\"Introduction\",sections:[{title:\"Overview\",path:\"/docs/ai/overview\"}]},{title:\"Instructions\",sections:[{title:\"AGENTS.md\",path:\"/docs/ai/instructions\"}]},{title:\"MCP server\",sections:[{title:\"Overview\",path:\"/docs/ai/mcp\"},{title:\"Local setup\",path:\"/docs/ai/local-setup\"},{title:\"Remote setup\",path:\"/docs/ai/remote-setup\"},{title:\"Tools\",path:\"/docs/ai/tools\"},{title:\"Resources\",path:\"/docs/ai/resources\"},{title:\"Prompts\",path:\"/docs/ai/prompts\"},{title:\"CLI\",path:\"/docs/ai/cli\"}]},{title:\"Skills\",sections:[{title:\"Overview\",path:\"/docs/ai/skills\"}]},{title:\"Subagents\",sections:[{title:\"Overview\",path:\"/docs/ai/subagent\"}]},{title:\"Plugins\",sections:[{title:\"Claude Code\",path:\"/docs/ai/claude-plugin\"},{title:\"OpenCode\",path:\"/docs/ai/opencode-plugin\"},{title:\"Cursor\",path:\"/docs/ai/cursor-plugin\"},{title:\"GitHub Copilot CLI\",path:\"/docs/ai/copilot-plugin\"},{title:\"Codex CLI\",path:\"/docs/ai/codex-plugin\"}]}]}]},{title:\"Tutorial\",slug:\"tutorial\",sections:[{title:\"Basic Svelte\",sections:[{title:\"Introduction\",sections:[{title:\"Welcome to Svelte\",path:\"/tutorial/svelte/welcome-to-svelte\"},{title:\"Your first component\",path:\"/tutorial/svelte/your-first-component\"},{title:\"Dynamic attributes\",path:\"/tutorial/svelte/dynamic-attributes\"},{title:\"Styling\",path:\"/tutorial/svelte/styling\"},{title:\"Nested components\",path:\"/tutorial/svelte/nested-components\"},{title:\"HTML tags\",path:\"/tutorial/svelte/html-tags\"}]},{title:\"Reactivity\",sections:[{title:\"State\",path:\"/tutorial/svelte/state\"},{title:\"Deep state\",path:\"/tutorial/svelte/deep-state\"},{title:\"Derived state\",path:\"/tutorial/svelte/derived-state\"},{title:\"Inspecting state\",path:\"/tutorial/svelte/inspecting-state\"},{title:\"Effects\",path:\"/tutorial/svelte/effects\"},{title:\"Universal reactivity\",path:\"/tutorial/svelte/universal-reactivity\"}]},{title:\"Props\",sections:[{title:\"Declaring props\",path:\"/tutorial/svelte/declaring-props\"},{title:\"Default values\",path:\"/tutorial/svelte/default-values\"},{title:\"Spread props\",path:\"/tutorial/svelte/spread-props\"}]},{title:\"Logic\",sections:[{title:\"If blocks\",path:\"/tutorial/svelte/if-blocks\"},{title:\"Else blocks\",path:\"/tutorial/svelte/else-blocks\"},{title:\"Else-if blocks\",path:\"/tutorial/svelte/else-if-blocks\"},{title:\"Each blocks\",path:\"/tutorial/svelte/each-blocks\"},{title:\"Keyed each blocks\",path:\"/tutorial/svelte/keyed-each-blocks\"},{title:\"Await blocks\",path:\"/tutorial/svelte/await-blocks\"}]},{title:\"Events\",sections:[{title:\"DOM events\",path:\"/tutorial/svelte/dom-events\"},{title:\"Inline handlers\",path:\"/tutorial/svelte/inline-handlers\"},{title:\"Capturing\",path:\"/tutorial/svelte/capturing\"},{title:\"Component events\",path:\"/tutorial/svelte/component-events\"},{title:\"Spreading events\",path:\"/tutorial/svelte/spreading-events\"}]},{title:\"Bindings\",sections:[{title:\"Text inputs\",path:\"/tutorial/svelte/text-inputs\"},{title:\"Numeric inputs\",path:\"/tutorial/svelte/numeric-inputs\"},{title:\"Checkbox inputs\",path:\"/tutorial/svelte/checkbox-inputs\"},{title:\"Select bindings\",path:\"/tutorial/svelte/select-bindings\"},{title:\"Group inputs\",path:\"/tutorial/svelte/group-inputs\"},{title:\"Select multiple\",path:\"/tutorial/svelte/multiple-select-bindings\"},{title:\"Textarea inputs\",path:\"/tutorial/svelte/textarea-inputs\"}]},{title:\"Classes and styles\",sections:[{title:\"The class attribute\",path:\"/tutorial/svelte/classes\"},{title:\"The style directive\",path:\"/tutorial/svelte/styles\"},{title:\"Component styles\",path:\"/tutorial/svelte/component-styles\"}]},{title:\"Attachments\",sections:[{title:\"The attach tag\",path:\"/tutorial/svelte/attach\"},{title:\"Attachment factories\",path:\"/tutorial/svelte/attachment-factories\"}]},{title:\"Transitions\",sections:[{title:\"The transition directive\",path:\"/tutorial/svelte/transition\"},{title:\"Adding parameters\",path:\"/tutorial/svelte/adding-parameters-to-transitions\"},{title:\"In and out\",path:\"/tutorial/svelte/in-and-out\"},{title:\"Custom CSS transitions\",path:\"/tutorial/svelte/custom-css-transitions\"},{title:\"Custom JS transitions\",path:\"/tutorial/svelte/custom-js-transitions\"},{title:\"Transition events\",path:\"/tutorial/svelte/transition-events\"},{title:\"Global transitions\",path:\"/tutorial/svelte/global-transitions\"},{title:\"Key blocks\",path:\"/tutorial/svelte/key-blocks\"}]}]},{title:\"Advanced Svelte\",sections:[{title:\"Advanced reactivity\",sections:[{title:\"Raw state\",path:\"/tutorial/svelte/raw-state\"},{title:\"Reactive classes\",path:\"/tutorial/svelte/reactive-classes\"},{title:\"Getters and setters\",path:\"/tutorial/svelte/getters-and-setters\"},{title:\"Reactive built-ins\",path:\"/tutorial/svelte/reactive-builtins\"},{title:\"Stores\",path:\"/tutorial/svelte/stores\"}]},{title:\"Reusing content\",sections:[{title:\"Snippets and render tags\",path:\"/tutorial/svelte/snippets-and-render-tags\"},{title:\"Passing snippets to components\",path:\"/tutorial/svelte/passing-snippets\"},{title:\"Implicit snippet props\",path:\"/tutorial/svelte/implicit-snippet-props\"}]},{title:\"Motion\",sections:[{title:\"Tweened values\",path:\"/tutorial/svelte/tweens\"},{title:\"Springs\",path:\"/tutorial/svelte/springs\"}]},{title:\"Advanced bindings\",sections:[{title:\"Contenteditable bindings\",path:\"/tutorial/svelte/contenteditable-bindings\"},{title:\"Each block bindings\",path:\"/tutorial/svelte/each-block-bindings\"},{title:\"Media elements\",path:\"/tutorial/svelte/media-elements\"},{title:\"Dimensions\",path:\"/tutorial/svelte/dimensions\"},{title:\"This\",path:\"/tutorial/svelte/bind-this\"},{title:\"Component bindings\",path:\"/tutorial/svelte/component-bindings\"},{title:\"Binding to component instances\",path:\"/tutorial/svelte/component-this\"}]},{title:\"Advanced transitions\",sections:[{title:\"Deferred transitions\",path:\"/tutorial/svelte/deferred-transitions\"},{title:\"Animations\",path:\"/tutorial/svelte/animations\"}]},{title:\"Context API\",sections:[{title:\"setContext and getContext\",path:\"/tutorial/svelte/context-api\"}]},{title:\"Special elements\",sections:[{title:\"\\u003Csvelte:window>\",path:\"/tutorial/svelte/svelte-window\"},{title:\"\\u003Csvelte:window> bindings\",path:\"/tutorial/svelte/svelte-window-bindings\"},{title:\"\\u003Csvelte:document>\",path:\"/tutorial/svelte/svelte-document\"},{title:\"\\u003Csvelte:body>\",path:\"/tutorial/svelte/svelte-body\"},{title:\"\\u003Csvelte:head>\",path:\"/tutorial/svelte/svelte-head\"},{title:\"\\u003Csvelte:element>\",path:\"/tutorial/svelte/svelte-element\"},{title:\"\\u003Csvelte:boundary>\",path:\"/tutorial/svelte/svelte-boundary\"}]},{title:\"\\u003Cscript module>\",sections:[{title:\"Sharing code\",path:\"/tutorial/svelte/sharing-code\"},{title:\"Exports\",path:\"/tutorial/svelte/module-exports\"}]},{title:\"Next steps\",sections:[{title:\"Congratulations!\",path:\"/tutorial/svelte/congratulations\"}]}]},{title:\"Basic SvelteKit\",sections:[{title:\"Introduction\",sections:[{title:\"What is SvelteKit?\",path:\"/tutorial/kit/introducing-sveltekit\"}]},{title:\"Routing\",sections:[{title:\"Pages\",path:\"/tutorial/kit/pages\"},{title:\"Layouts\",path:\"/tutorial/kit/layouts\"},{title:\"Route parameters\",path:\"/tutorial/kit/params\"}]},{title:\"Loading data\",sections:[{title:\"Page data\",path:\"/tutorial/kit/page-data\"},{title:\"Layout data\",path:\"/tutorial/kit/layout-data\"}]},{title:\"Headers and cookies\",sections:[{title:\"Setting headers\",path:\"/tutorial/kit/headers\"},{title:\"Reading and writing cookies\",path:\"/tutorial/kit/cookies\"}]},{title:\"Shared modules\",sections:[{title:\"The $lib alias\",path:\"/tutorial/kit/lib\"}]},{title:\"Forms\",sections:[{title:\"The \\u003Cform> element\",path:\"/tutorial/kit/the-form-element\"},{title:\"Named form actions\",path:\"/tutorial/kit/named-form-actions\"},{title:\"Validation\",path:\"/tutorial/kit/form-validation\"},{title:\"Progressive enhancement\",path:\"/tutorial/kit/progressive-enhancement\"},{title:\"Customizing use:enhance\",path:\"/tutorial/kit/customizing-use-enhance\"}]},{title:\"API routes\",sections:[{title:\"GET handlers\",path:\"/tutorial/kit/get-handlers\"},{title:\"POST handlers\",path:\"/tutorial/kit/post-handlers\"},{title:\"Other handlers\",path:\"/tutorial/kit/other-handlers\"}]},{title:\"$app/state\",sections:[{title:\"page\",path:\"/tutorial/kit/page-state\"},{title:\"navigating\",path:\"/tutorial/kit/navigating-state\"},{title:\"updated\",path:\"/tutorial/kit/updated-state\"}]},{title:\"Errors and redirects\",sections:[{title:\"Basics\",path:\"/tutorial/kit/error-basics\"},{title:\"Error pages\",path:\"/tutorial/kit/error-pages\"},{title:\"Fallback errors\",path:\"/tutorial/kit/fallback-errors\"},{title:\"Redirects\",path:\"/tutorial/kit/redirects\"}]}]},{title:\"Advanced SvelteKit\",sections:[{title:\"Hooks\",sections:[{title:\"handle\",path:\"/tutorial/kit/handle\"},{title:\"The RequestEvent object\",path:\"/tutorial/kit/event\"},{title:\"handleFetch\",path:\"/tutorial/kit/handlefetch\"},{title:\"handleError\",path:\"/tutorial/kit/handleerror\"}]},{title:\"Page options\",sections:[{title:\"Basics\",path:\"/tutorial/kit/page-options\"},{title:\"ssr\",path:\"/tutorial/kit/ssr\"},{title:\"csr\",path:\"/tutorial/kit/csr\"},{title:\"prerender\",path:\"/tutorial/kit/prerender\"},{title:\"trailingSlash\",path:\"/tutorial/kit/trailingslash\"}]},{title:\"Link options\",sections:[{title:\"Preloading\",path:\"/tutorial/kit/preload\"},{title:\"Reloading the page\",path:\"/tutorial/kit/reload\"}]},{title:\"Advanced routing\",sections:[{title:\"Optional parameters\",path:\"/tutorial/kit/optional-params\"},{title:\"Rest parameters\",path:\"/tutorial/kit/rest-params\"},{title:\"Param matchers\",path:\"/tutorial/kit/param-matchers\"},{title:\"Route groups\",path:\"/tutorial/kit/route-groups\"},{title:\"Breaking out of layouts\",path:\"/tutorial/kit/breaking-out-of-layouts\"}]},{title:\"Advanced loading\",sections:[{title:\"Universal load functions\",path:\"/tutorial/kit/universal-load-functions\"},{title:\"Using both load functions\",path:\"/tutorial/kit/using-both-load-functions\"},{title:\"Using parent data\",path:\"/tutorial/kit/await-parent\"},{title:\"Invalidation\",path:\"/tutorial/kit/invalidation\"},{title:\"Custom dependencies\",path:\"/tutorial/kit/custom-dependencies\"},{title:\"invalidateAll\",path:\"/tutorial/kit/invalidate-all\"}]},{title:\"Environment variables\",sections:[{title:\"$env/static/private\",path:\"/tutorial/kit/env-static-private\"},{title:\"$env/dynamic/private\",path:\"/tutorial/kit/env-dynamic-private\"},{title:\"$env/static/public\",path:\"/tutorial/kit/env-static-public\"},{title:\"$env/dynamic/public\",path:\"/tutorial/kit/env-dynamic-public\"}]},{title:\"Conclusion\",sections:[{title:\"Next steps\",path:\"/tutorial/kit/next-steps\"}]}]}]},{title:\"Packages\",slug:\"packages\"},{title:\"Playground\",slug:\"playground\"},{title:\"Blog\",slug:\"blog\"}],banner:{id:\"ljubljana-2026-tickets\",start:new Date(1785542400000),end:new Date(1795219199000),arrow:true,content:{lg:\"Svelte Summit Ljubljana and online, Nov 18-19: Tickets available soon!\",sm:\"Svelte Summit Nov 18-19\"},href:\"https://www.sveltesummit.com/\"}},uses:{}},{type:\"data\",data:{sections:[{slug:\"docs/svelte/introduction\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Introduction\"},children:[{slug:\"docs/svelte/overview\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Overview\"},children:[]},{slug:\"docs/svelte/getting-started\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Getting started\"},children:[]},{slug:\"docs/svelte/svelte-files\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\".svelte files\"},children:[]},{slug:\"docs/svelte/svelte-js-files\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\".svelte.js and .svelte.ts files\"},children:[]}]},{slug:\"docs/svelte/runes\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runes\"},children:[{slug:\"docs/svelte/what-are-runes\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"What are runes?\"},children:[]},{slug:\"docs/svelte/$state\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$state\",tags:\"rune-state\"},children:[]},{slug:\"docs/svelte/$derived\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$derived\",tags:\"rune-derived\"},children:[]},{slug:\"docs/svelte/$effect\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$effect\",tags:\"rune-effect\"},children:[]},{slug:\"docs/svelte/$props\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$props\",tags:\"rune-props\"},children:[]},{slug:\"docs/svelte/$bindable\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$bindable\"},children:[]},{slug:\"docs/svelte/$inspect\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$inspect\",tags:\"rune-inspect\"},children:[]},{slug:\"docs/svelte/$host\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$host\"},children:[]}]},{slug:\"docs/svelte/template-syntax\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Template syntax\"},children:[{slug:\"docs/svelte/basic-markup\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Basic markup\"},children:[]},{slug:\"docs/svelte/if\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#if ...}\",tags:\"template-if\"},children:[]},{slug:\"docs/svelte/each\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#each ...}\",tags:\"template-each\"},children:[]},{slug:\"docs/svelte/key\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#key ...}\",tags:\"template-key\"},children:[]},{slug:\"docs/svelte/await\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#await ...}\",tags:\"template-await\"},children:[]},{slug:\"docs/svelte/snippet\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{#snippet ...}\"},children:[]},{slug:\"docs/svelte/@render\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@render ...}\"},children:[]},{slug:\"docs/svelte/@html\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@html ...}\",tags:\"template-html\"},children:[]},{slug:\"docs/svelte/@attach\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@attach ...}\",tags:\"attachments\"},children:[]},{slug:\"docs/svelte/@const\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@const ...}\"},children:[]},{slug:\"docs/svelte/@debug\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{@debug ...}\"},children:[]},{slug:\"docs/svelte/declaration-tags\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"{let/const ...}\"},children:[]},{slug:\"docs/svelte/bind\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"bind:\"},children:[]},{slug:\"docs/svelte/use\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"use:\"},children:[]},{slug:\"docs/svelte/transition\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"transition:\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/in-and-out\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"in: and out:\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/animate\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"animate:\"},children:[]},{slug:\"docs/svelte/style\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"style:\",tags:\"template-style\"},children:[]},{slug:\"docs/svelte/class\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"class\",tags:\"template-style\"},children:[]},{slug:\"docs/svelte/await-expressions\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"await\"},children:[]}]},{slug:\"docs/svelte/styling\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Styling\"},children:[{slug:\"docs/svelte/scoped-styles\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Scoped styles\",tags:\"styles-scoped\"},children:[]},{slug:\"docs/svelte/global-styles\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Global styles\",tags:\"styles-global\"},children:[]},{slug:\"docs/svelte/custom-properties\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Custom properties\",tags:\"styles-custom-properties\"},children:[]},{slug:\"docs/svelte/nested-style-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Nested \\u003Cstyle> elements\"},children:[]}]},{slug:\"docs/svelte/special-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Special elements\"},children:[{slug:\"docs/svelte/svelte-boundary\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:boundary>\"},children:[]},{slug:\"docs/svelte/svelte-window\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:window>\"},children:[]},{slug:\"docs/svelte/svelte-document\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:document>\"},children:[]},{slug:\"docs/svelte/svelte-body\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:body>\"},children:[]},{slug:\"docs/svelte/svelte-head\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:head>\"},children:[]},{slug:\"docs/svelte/svelte-element\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:element>\"},children:[]},{slug:\"docs/svelte/svelte-options\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:options>\"},children:[]}]},{slug:\"docs/svelte/runtime\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime\"},children:[{slug:\"docs/svelte/stores\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Stores\"},children:[]},{slug:\"docs/svelte/context\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Context\"},children:[]},{slug:\"docs/svelte/lifecycle-hooks\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Lifecycle hooks\"},children:[]},{slug:\"docs/svelte/imperative-component-api\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Imperative component API\"},children:[]},{slug:\"docs/svelte/hydratable\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Hydratable data\"},children:[]}]},{slug:\"docs/svelte/misc\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Misc\"},children:[{slug:\"docs/svelte/best-practices\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Best practices\",skill:true,name:\"svelte-core-bestpractices\",description:\"Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.\"},children:[]},{slug:\"docs/svelte/testing\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Testing\"},children:[]},{slug:\"docs/svelte/typescript\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"TypeScript\"},children:[]},{slug:\"docs/svelte/custom-elements\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Custom elements\"},children:[]},{slug:\"docs/svelte/browser-support\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Browser support\"},children:[]},{slug:\"docs/svelte/v4-migration-guide\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Svelte 4 migration guide\"},children:[]},{slug:\"docs/svelte/v5-migration-guide\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Svelte 5 migration guide\"},children:[]},{slug:\"docs/svelte/faq\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Frequently asked questions\"},children:[]}]},{slug:\"docs/svelte/reference\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reference\"},children:[{slug:\"docs/svelte/svelte\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte\"},children:[]},{slug:\"docs/svelte/svelte-action\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/action\"},children:[]},{slug:\"docs/svelte/svelte-animate\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/animate\"},children:[]},{slug:\"docs/svelte/svelte-attachments\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/attachments\",tags:\"attachments\"},children:[]},{slug:\"docs/svelte/svelte-compiler\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/compiler\"},children:[]},{slug:\"docs/svelte/svelte-easing\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/easing\"},children:[]},{slug:\"docs/svelte/svelte-events\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/events\"},children:[]},{slug:\"docs/svelte/svelte-legacy\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/legacy\"},children:[]},{slug:\"docs/svelte/svelte-motion\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/motion\"},children:[]},{slug:\"docs/svelte/svelte-reactivity-window\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/reactivity/window\"},children:[]},{slug:\"docs/svelte/svelte-reactivity\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/reactivity\"},children:[]},{slug:\"docs/svelte/svelte-server\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/server\"},children:[]},{slug:\"docs/svelte/svelte-store\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/store\"},children:[]},{slug:\"docs/svelte/svelte-transition\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"svelte/transition\",tags:\"transitions\"},children:[]},{slug:\"docs/svelte/compiler-errors\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Compiler errors\"},children:[]},{slug:\"docs/svelte/compiler-warnings\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Compiler warnings\"},children:[]},{slug:\"docs/svelte/runtime-errors\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime errors\"},children:[]},{slug:\"docs/svelte/runtime-warnings\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Runtime warnings\"},children:[]}]},{slug:\"docs/svelte/legacy\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Legacy APIs\"},children:[{slug:\"docs/svelte/legacy-overview\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Overview\"},children:[]},{slug:\"docs/svelte/legacy-let\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive let/var declarations\"},children:[]},{slug:\"docs/svelte/legacy-reactive-assignments\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive $: statements\"},children:[]},{slug:\"docs/svelte/legacy-export-let\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"export let\"},children:[]},{slug:\"docs/svelte/legacy-$$props-and-$$restProps\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$$props and $$restProps\"},children:[]},{slug:\"docs/svelte/legacy-on\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"on:\"},children:[]},{slug:\"docs/svelte/legacy-slots\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Cslot>\"},children:[]},{slug:\"docs/svelte/legacy-$$slots\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"$$slots\"},children:[]},{slug:\"docs/svelte/legacy-svelte-fragment\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:fragment>\"},children:[]},{slug:\"docs/svelte/legacy-svelte-component\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:component>\"},children:[]},{slug:\"docs/svelte/legacy-svelte-self\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"\\u003Csvelte:self>\"},children:[]},{slug:\"docs/svelte/legacy-component-api\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Imperative component API\"},children:[]}]}]},uses:{params:[\"topic\"]}},{type:\"data\",data:{document:{slug:\"docs/svelte/legacy-reactive-assignments\",file:\"docs/svelte/99-legacy/02-legacy-reactive-assignments.md\",metadata:{NOTE:\"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts\",title:\"Reactive $: statements\"},breadcrumbs:[{title:\"Docs\"},{title:\"Svelte\"},{title:\"Legacy APIs\"}],body:\"\\u003Cp>In runes mode, reactions to state updates are handled with the \\u003Ca href=\\\"$derived\\\">\\u003Ccode>$derived\\u003C/code>\\u003C/a> and \\u003Ca href=\\\"$effect\\\">\\u003Ccode>$effect\\u003C/code>\\u003C/a> runes.\\u003C/p>\\n\\u003Cp>In legacy mode, any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with a \\u003Ccode>$:\\u003C/code> \\u003Ca href=\\\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label\\\">label\\u003C/a>. These statements run after other code in the \\u003Ccode><script>\\u003C/code> and before the component markup is rendered, then whenever the values that they depend on change.\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"svelte\\\" class=\\\"shiki css-variables\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"><\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">1\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">2\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// this is a 'reactive statement', and it will re-run\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// when `a`, `b` or `sum` change\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">console\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">.log\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">`\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">+\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">${\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">sum\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">}\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">`\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">);\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// this is a 'reactive assignment' — `sum` will be\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// recalculated when `a` or `b` change. It is\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// not necessary to declare `sum` separately\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">sum\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">a\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">+\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">b;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"></\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>Statements are ordered \\u003Cem>topologically\\u003C/em> by their dependencies and their assignments: since the \\u003Ccode>console.log\\u003C/code> statement depends on \\u003Ccode>sum\\u003C/code>, \\u003Ccode>sum\\u003C/code> is calculated first even though it appears later in the source.\\u003C/p>\\n\\u003Cp>Multiple statements can be combined by putting them in a block:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">{\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-comment)\\\">// recalculate `total` when `items` changes\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">total\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">for\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">item\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>item\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">of\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">items\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">total\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">+=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">const\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">item\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>item\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">value\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>The left-hand side of a reactive assignments can be an identifier, or it can be a destructuring assignment:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">({\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">larry\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>larry\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">,\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">moe\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>moe\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">,\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">curly\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">any\\u003C/span>\\u003C/code>\\u003C/span>curly\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">stooges\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">);\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Ch2 id=\\\"Understanding-dependencies\\\">\\u003Cspan>Understanding dependencies\\u003C/span>\\u003Ca href=\\\"#Understanding-dependencies\\\" class=\\\"permalink\\\" aria-label=\\\"permalink\\\">\\u003C/a>\\u003C/h2>\\u003Cp>The dependencies of a \\u003Ccode>$:\\u003C/code> statement are determined at compile time — they are whichever variables are referenced (but not assigned to) inside the statement.\\u003C/p>\\n\\u003Cp>In other words, a statement like this will \\u003Cem>not\\u003C/em> re-run when \\u003Ccode>count\\u003C/code> changes, because the compiler cannot ‘see’ the dependency:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">count\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>count\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">double\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>double\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">count\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>count\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">*\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">2\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">doubled\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">double\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">()\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">number\\u003C/span>\\u003C/code>\\u003C/span>double\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">();\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Cp>Similarly, topological ordering will fail if dependencies are referenced indirectly: \\u003Ccode>z\\u003C/code> will never update, because \\u003Ccode>y\\u003C/code> is not considered ‘dirty’ when the update occurs. Moving \\u003Ccode>$: z = y\\u003C/code> below \\u003Ccode>$: setY(x)\\u003C/code> will fix it:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"svelte\\\" class=\\\"shiki css-variables\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"><\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">x\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">let\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">0\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">z\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">setY\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(x);\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">function\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">setY\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(value) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">y\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">value;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\"></\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-string-expression)\\\">script\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">>\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\\u003Ch2 id=\\\"Browser-only-code\\\">\\u003Cspan>Browser-only code\\u003C/span>\\u003Ca href=\\\"#Browser-only-code\\\" class=\\\"permalink\\\" aria-label=\\\"permalink\\\">\\u003C/a>\\u003C/h2>\\u003Cp>Reactive statements run during server-side rendering as well as in the browser. This means that any code that should only run in the browser must be wrapped in an \\u003Ccode>if\\u003C/code> block:\\u003C/p>\\n\\u003Cdiv class=\\\"code-block\\\">\\u003Cdiv class=\\\"controls\\\">\\u003Cbutton class=\\\"copy-to-clipboard raised\\\" title=\\\"Copy to clipboard\\\" aria-label=\\\"Copy to clipboard\\\">\\u003C/button>\\u003C/div>\\u003Cpre data-js data-ts data-language=\\\"js\\\" class=\\\"shiki css-variables twoslash lsp\\\" style=\\\"background-color:var(--shiki-background);color:var(--shiki-foreground)\\\">\\u003Ccode>\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">$\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-punctuation)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">if\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">(\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">browser\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">) {\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\t\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">var\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">document\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">:\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-token-function)\\\">Document\\u003C/span>\\u003C/code>\\u003Cdiv class=\\\"twoslash-popup-docs\\\">\\u003Cp>\\u003Cstrong>\\u003Ccode>window.document\\u003C/code>\\u003C/strong> returns a reference to the document contained in the window.\\u003C/p>\\n\\u003Cp>\\u003Ca href=\\\"https://developer.mozilla.org/docs/Web/API/Window/document\\\">MDN Reference\\u003C/a>\\u003C/p>\\n\\u003C/div>\\u003C/span>document\\u003C/span>\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003Cspan class=\\\"twoslash-hover\\\">\\u003Cspan class=\\\"twoslash-popup-container\\\">\\u003Ccode class=\\\"twoslash-popup-code\\\">\\u003Cspan style=\\\"color:var(--shiki-token-constant)\\\">Document\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">.title: string\\u003C/span>\\u003C/code>\\u003Cdiv class=\\\"twoslash-popup-docs\\\">\\u003Cp>The \\u003Cstrong>\\u003Ccode>document.title\\u003C/code>\\u003C/strong> property gets or sets the current title of the document. When present, it defaults to the value of the \\u003Ctitle>.\\u003C/p>\\n\\u003Cp>\\u003Ca href=\\\"https://developer.mozilla.org/docs/Web/API/Document/title\\\">MDN Reference\\u003C/a>\\u003C/p>\\n\\u003C/div>\\u003C/span>title\\u003C/span>\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-token-keyword)\\\">=\\u003C/span> \\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">title\\u003C/span>\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">;\\u003C/span>\\u003C/span>\\n\\u003Cspan class=\\\"line\\\">\\u003Cspan style=\\\"color:var(--shiki-foreground)\\\">}\\u003C/span>\\u003C/span>\\u003C/code>\\u003C/pre>\\u003C/div>\",sections:[{slug:\"Understanding-dependencies\",title:\"Understanding dependencies\",subsections:[]},{slug:\"Browser-only-code\",title:\"Browser-only code\",subsections:[]}],children:[],prev:{slug:\"docs/svelte/legacy-let\",title:\"Reactive let/var declarations\"},next:{slug:\"docs/svelte/legacy-export-let\",title:\"export let\"}},related:void 0},uses:{params:[\"topic\",\"path\"],url:1}}],\n\t\t\t\t\t\t\tform: null,\n\t\t\t\t\t\t\terror: null\n\t\t\t\t\t\t});\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t</script>\n\t\t</div>\n\n\t\t<script>\n\t\t\ttry {\n\t\t\t\tif (localStorage.getItem('sv:show-legacy') === 'open') {\n\t\t\t\t\tfor (const node of document.querySelectorAll('details.legacy')) {\n\t\t\t\t\t\tnode.open = true;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (localStorage.getItem('svelte:prefers-ts') === 'false') {\n\t\t\t\t\tfor (const node of document.querySelectorAll('.ts-toggle')) {\n\t\t\t\t\t\tnode.checked = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// localStorage access disabled\n\t\t\t}\n\t\t</script>\n\t</body>\n</html>\nvar document: Documentwindow.documentDocument.title: stringdocument.title\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.178Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":113,"estimatedTokens":16801}}81{"id":"doc-svelte_server_svelte_docs-4b6511a3","source":"documentation","title":"svelte/server • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-server","text":"Example:\n```text\nimport { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender } from 'svelte/server';function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputserverbodyhead\n```\n\nExample:\n```text\nfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutput\n```\n\nExample:\n```text\nfunction render<\n\tComp extends SvelteComponent<any> | Component<any>,\n\tProps extends ComponentProps<Comp> = ComponentProps<Comp>\n>(\n\t...args: {} extends Props\n\t\t? [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions?: {\n\t\t\t\t\tprops?: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t\tcsp?: Csp;\n\t\t\t\t\ttransformError?: (\n\t\t\t\t\t\terror: unknown\n\t\t\t\t\t) => unknown | Promise<unknown>;\n\t\t\t\t}\n\t\t\t]\n\t\t: [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions: {\n\t\t\t\t\tprops: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t\tcsp?: Csp;\n\t\t\t\t\ttransformError?: (\n\t\t\t\t\t\terror: unknown\n\t\t\t\t\t) => unknown | Promise<unknown>;\n\t\t\t\t}\n\t\t\t]\n): RenderOutput;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.179Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":99,"estimatedTokens":1018}}82{"id":"doc-slot_svelte_docs-bd4347a9","source":"documentation","title":"<slot> • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-slots","text":"Example:\n```text\n<script>\n\timport Modal from './Modal.svelte';\n</script>\n\n<Modal>This is some slotted content</Modal>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Modal from './Modal.svelte';\n</script>\n\n<Modal>This is some slotted content</Modal>\n```\n\nExample:\n```text\n<div class=\"modal\">\n\t<slot></slot>\n</div>\n```\n\nExample:\n```text\n<script>\n\timport Modal from './Modal.svelte';\n\n\tlet open = true;\n</script>\n\n{#if open}\n\t<Modal>\n\t\tThis is some slotted content\n\n\t\t<div slot=\"buttons\">\n\t\t\t<button on:click={() => open = false}>\n\t\t\t\tclose\n\t\t\t</button>\n\t\t</div>\n\t</Modal>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Modal from './Modal.svelte';\n\n\tlet open = true;\n</script>\n\n{#if open}\n\t<Modal>\n\t\tThis is some slotted content\n\n\t\t<div slot=\"buttons\">\n\t\t\t<button on:click={() => open = false}>\n\t\t\t\tclose\n\t\t\t</button>\n\t\t</div>\n\t</Modal>\n{/if}\n```\n\nExample:\n```text\n<div class=\"modal\">\n\t<slot></slot>\n\t<hr>\n\t<slot name=\"buttons\"></slot>\n</div>\n```\n\nExample:\n```text\n<slot>\n\tThis will be rendered if no slotted content is provided\n</slot>\n```\n\nExample:\n```text\n<ul>\n\t{#each items as data}\n\t\t<li class=\"fancy\">\n\t\t\t<!-- 'item' here... -->\n\t\t\t<slot item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\n<!-- ...corresponds to 'item' here: -->\n<FancyList {items} let:item={processed}>\n\t<div>{processed.text}</div>\n</FancyList>\n```\n\nExample:\n```text\n<ul>\n\t{#each items as item}\n\t\t<li class=\"fancy\">\n\t\t\t<slot name=\"item\" item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n\n<slot name=\"footer\" />\n```\n\nExample:\n```text\n<FancyList {items}>\n\t<div slot=\"item\" let:item>{item.text}</div>\n\t<p slot=\"footer\">Copyright (c) 2019 Svelte Industries</p>\n</FancyList>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.179Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":125,"estimatedTokens":421}}83{"id":"doc-svelte_compiler_svelte_docs-cc5a25cb","source":"documentation","title":"svelte/compiler • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-compiler","text":"Example:\n```text\nimport {\n\tconst VERSION: stringThe current version, as set in package.json.\nreferenceVERSION,\n\tfunction compile(source: string, options: CompileOptions): CompileResultcompile converts your .svelte source code into a JavaScript module that exports a component\n@paramsource The component source code@paramoptions The compiler optionsreferencecompile,\n\tfunction compileModule(source: string, options: ModuleCompileOptions): CompileResultcompileModule takes your JavaScript source code containing runes, and turns it into a JavaScript module.\n@paramsource The component source codereferencecompileModule,\n\tfunction migrate(source: string, { filename, use_ts }?: {\n    filename?: string;\n    use_ts?: boolean;\n} | undefined): {\n    code: string;\n}Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.\nMay throw an error if the code is too complex to migrate automatically.\nreferencemigrate,\n\tfunction parse(source: string, options: {\n    filename?: string;\n    modern: true;\n    loose?: boolean;\n}): AST.Root (+1 overload)The parse function parses a component, returning only its abstract syntax tree.\nThe modern option (false by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST.\nmodern will become true by default in Svelte 6, and the option will be removed in Svelte 7.\nreferenceparse,\n\tfunction parseCss(source: string): _CSS.StyleSheetFileThe parseCss function parses a CSS stylesheet, returning its abstract syntax tree.\n@paramsource The CSS source codereferenceparseCss,\n\tfunction preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>The preprocess function provides convenient hooks for arbitrarily transforming component source code.\nFor example, it can be used to convert a <style lang=\"sass\"> block into vanilla CSS.\nreferencepreprocess,\n\tfunction print(ast: AST.SvelteNode, options?: Options | undefined): {\n    code: string;\n    map: any;\n}print converts a Svelte AST node back into Svelte source code.\nIt is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.\nprint(ast) requires an AST node produced by parse with modern: true, or any sub-node within that modern AST.\nThe result contains the generated source and a corresponding source map.\nThe output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.\nreferenceprint,\n\tfunction walk(): never@deprecatedReplace this with import { walk } from 'estree-walker'referencewalk\n} from 'svelte/compiler';const VERSION: stringfunction compile(source: string, options: CompileOptions): CompileResultcompile.sveltefunction compileModule(source: string, options: ModuleCompileOptions): CompileResultcompileModulefunction migrate(source: string, { filename, use_ts }?: {\n    filename?: string;\n    use_ts?: boolean;\n} | undefined): {\n    code: string;\n}function migrate(source: string, { filename, use_ts }?: {\n    filename?: string;\n    use_ts?: boolean;\n} | undefined): {\n    code: string;\n}function parse(source: string, options: {\n    filename?: string;\n    modern: true;\n    loose?: boolean;\n}): AST.Root (+1 overload)function parse(source: string, options: {\n    filename?: string;\n    modern: true;\n    loose?: boolean;\n}): AST.Root (+1 overload)modernfalsemoderntruefunction parseCss(source: string): _CSS.StyleSheetFilefunction preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed><style lang=\"sass\">function print(ast: AST.SvelteNode, options?: Options | undefined): {\n    code: string;\n    map: any;\n}function print(ast: AST.SvelteNode, options?: Options | undefined): {\n    code: string;\n    map: any;\n}printprint(ast)function walk(): neverimport { walk } from 'estree-walker'\n```\n\nExample:\n```text\nfunction migrate(source: string, { filename, use_ts }?: {\n    filename?: string;\n    use_ts?: boolean;\n} | undefined): {\n    code: string;\n}\n```\n\nExample:\n```text\nfunction parse(source: string, options: {\n    filename?: string;\n    modern: true;\n    loose?: boolean;\n}): AST.Root (+1 overload)\n```\n\nExample:\n```text\nfunction preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {\n    filename?: string;\n} | undefined): Promise<Processed>\n```\n\nExample:\n```text\nfunction print(ast: AST.SvelteNode, options?: Options | undefined): {\n    code: string;\n    map: any;\n}\n```\n\nExample:\n```text\nconst VERSION: string;\n```\n\nExample:\n```text\nfunction compile(\n\tsource: string,\n\toptions: CompileOptions\n): CompileResult;\n```\n\nExample:\n```text\nfunction compileModule(\n\tsource: string,\n\toptions: ModuleCompileOptions\n): CompileResult;\n```\n\nExample:\n```text\nfunction migrate(\n\tsource: string,\n\t{\n\t\tfilename,\n\t\tuse_ts\n\t}?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tuse_ts?: boolean;\n\t\t  }\n\t\t| undefined\n): {\n\tcode: string;\n};\n```\n\nExample:\n```text\nfunction parse(\n\tsource: string,\n\toptions: {\n\t\tfilename?: string;\n\t\tmodern: true;\n\t\tloose?: boolean;\n\t}\n): AST.Root;\n```\n\nExample:\n```text\nfunction parse(\n\tsource: string,\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tmodern?: false;\n\t\t\t\tloose?: boolean;\n\t\t  }\n\t\t| undefined\n): Record<string, any>;\n```\n\nExample:\n```text\nfunction parseCss(source: string): AST.CSS.StyleSheetFile;\n```\n\nExample:\n```text\nfunction preprocess(\n\tsource: string,\n\tpreprocessor: PreprocessorGroup | PreprocessorGroup[],\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t  }\n\t\t| undefined\n): Promise<Processed>;\n```\n\nExample:\n```text\nfunction print(\n\tast: AST.SvelteNode,\n\toptions?: Options | undefined\n): {\n\tcode: string;\n\tmap: any;\n};\n```\n\nExample:\n```text\nfunction walk(): never;\n```\n\nExample:\n```text\nnamespace AST {\n\texport interface BaseNode {\n\t\ttype: string;\n\t\tstart: number;\n\t\tend: number;\n\t}\n\n\texport interface Fragment {\n\t\ttype: 'Fragment';\n\t\tnodes: Array<\n\t\t\tText | Tag | ElementLike | Block | Comment\n\t\t>;\n\t}\n\n\texport interface Root extends BaseNode {\n\t\ttype: 'Root';\n\t\t/**\n\t\t * Inline options provided by `<svelte:options>` — these override options passed to `compile(...)`\n\t\t */\n\t\toptions: SvelteOptions | null;\n\t\tfragment: Fragment;\n\t\t/** The parsed `<style>` element, if exists */\n\t\tcss: AST.CSS.StyleSheet | null;\n\t\t/** The parsed `<script>` element, if exists */\n\t\tinstance: Script | null;\n\t\t/** The parsed `<script module>` element, if exists */\n\t\tmodule: Script | null;\n\t\t/** Comments found in <script> and {expressions} */\n\t\tcomments: JSComment[];\n\t}\n\n\texport interface SvelteOptions {\n\t\t// start/end info (needed for warnings and for our Prettier plugin)\n\t\tstart: number;\n\t\tend: number;\n\t\t// options\n\t\trunes?: boolean;\n\t\timmutable?: boolean;\n\t\taccessors?: boolean;\n\t\tpreserveWhitespace?: boolean;\n\t\tnamespace?: Namespace;\n\t\tcss?: 'injected';\n\t\tcustomElement?: {\n\t\t\ttag?: string;\n\t\t\tshadow?:\n\t\t\t\t| 'open'\n\t\t\t\t| 'none'\n\t\t\t\t| ObjectExpression\n\t\t\t\t| undefined;\n\t\t\tprops?: Record<\n\t\t\t\tstring,\n\t\t\t\t{\n\t\t\t\t\tattribute?: string;\n\t\t\t\t\treflect?: boolean;\n\t\t\t\t\ttype?:\n\t\t\t\t\t\t| 'Array'\n\t\t\t\t\t\t| 'Boolean'\n\t\t\t\t\t\t| 'Number'\n\t\t\t\t\t\t| 'Object'\n\t\t\t\t\t\t| 'String';\n\t\t\t\t}\n\t\t\t>;\n\t\t\t/**\n\t\t\t * Is of type\n\t\t\t * ```ts\n\t\t\t * (ceClass: new () => HTMLElement) => new () => HTMLElement\n\t\t\t * ```\n\t\t\t */\n\t\t\textend?: ArrowFunctionExpression | Identifier;\n\t\t};\n\t\tattributes: Attribute[];\n\t}\n\n\t/** Static text */\n\texport interface Text extends BaseNode {\n\t\ttype: 'Text';\n\t\t/** Text with decoded HTML entities */\n\t\tdata: string;\n\t\t/** The original text, with undecoded HTML entities */\n\t\traw: string;\n\t}\n\n\t/** A (possibly reactive) template expression — `{...}` */\n\texport interface ExpressionTag extends BaseNode {\n\t\ttype: 'ExpressionTag';\n\t\texpression: Expression;\n\t}\n\n\t/** A (possibly reactive) HTML template expression — `{@html ...}` */\n\texport interface HtmlTag extends BaseNode {\n\t\ttype: 'HtmlTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An HTML comment */\n\t// TODO rename to disambiguate\n\texport interface Comment extends BaseNode {\n\t\ttype: 'Comment';\n\t\t/** the contents of the comment */\n\t\tdata: string;\n\t}\n\n\t/** A `{@const ...}` tag */\n\texport interface ConstTag extends BaseNode {\n\t\ttype: 'ConstTag';\n\t\tdeclaration: VariableDeclaration & {\n\t\t\tdeclarations: [\n\t\t\t\tVariableDeclarator & {\n\t\t\t\t\tid: Pattern;\n\t\t\t\t\tinit: Expression;\n\t\t\t\t}\n\t\t\t];\n\t\t};\n\t}\n\n\t/** A `{let ...}` or `{const ...}` tag */\n\texport interface DeclarationTag extends BaseNode {\n\t\ttype: 'DeclarationTag';\n\t\tdeclaration: VariableDeclaration;\n\t}\n\n\t/** A `{@debug ...}` tag */\n\texport interface DebugTag extends BaseNode {\n\t\ttype: 'DebugTag';\n\t\tidentifiers: Identifier[];\n\t}\n\n\t/** A `{@render foo(...)} tag */\n\texport interface RenderTag extends BaseNode {\n\t\ttype: 'RenderTag';\n\t\texpression:\n\t\t\t| SimpleCallExpression\n\t\t\t| (ChainExpression & {\n\t\t\t\t\texpression: SimpleCallExpression;\n\t\t\t  });\n\t}\n\n\t/** A `{@attach foo(...)} tag */\n\texport interface AttachTag extends BaseNode {\n\t\ttype: 'AttachTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An `animate:` directive */\n\texport interface AnimateDirective extends BaseAttribute {\n\t\ttype: 'AnimateDirective';\n\t\t/** The 'x' in `animate:x` */\n\t\tname: string;\n\t\t/** The y in `animate:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\t/** A `bind:` directive */\n\texport interface BindDirective extends BaseAttribute {\n\t\ttype: 'BindDirective';\n\t\t/** The 'x' in `bind:x` */\n\t\tname: string;\n\t\t/** The y in `bind:x={y}` */\n\t\texpression:\n\t\t\t| Identifier\n\t\t\t| MemberExpression\n\t\t\t| SequenceExpression;\n\t}\n\n\t/** A `class:` directive */\n\texport interface ClassDirective extends BaseAttribute {\n\t\ttype: 'ClassDirective';\n\t\t/** The 'x' in `class:x` */\n\t\tname: 'class';\n\t\t/** The 'y' in `class:x={y}`, or the `x` in `class:x` */\n\t\texpression: Expression;\n\t}\n\n\t/** A `let:` directive */\n\texport interface LetDirective extends BaseAttribute {\n\t\ttype: 'LetDirective';\n\t\t/** The 'x' in `let:x` */\n\t\tname: string;\n\t\t/** The 'y' in `let:x={y}` */\n\t\texpression:\n\t\t\t| null\n\t\t\t| Identifier\n\t\t\t| ArrayExpression\n\t\t\t| ObjectExpression;\n\t}\n\n\t/** An `on:` directive */\n\texport interface OnDirective extends BaseAttribute {\n\t\ttype: 'OnDirective';\n\t\t/** The 'x' in `on:x` */\n\t\tname: string;\n\t\t/** The 'y' in `on:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<\n\t\t\t| 'capture'\n\t\t\t| 'nonpassive'\n\t\t\t| 'once'\n\t\t\t| 'passive'\n\t\t\t| 'preventDefault'\n\t\t\t| 'self'\n\t\t\t| 'stopImmediatePropagation'\n\t\t\t| 'stopPropagation'\n\t\t\t| 'trusted'\n\t\t>;\n\t}\n\n\t/** A `style:` directive */\n\texport interface StyleDirective extends BaseAttribute {\n\t\ttype: 'StyleDirective';\n\t\t/** The 'x' in `style:x` */\n\t\tname: string;\n\t\t/** The 'y' in `style:x={y}` */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<ExpressionTag | Text>;\n\t\tmodifiers: Array<'important'>;\n\t}\n\n\t// TODO have separate in/out/transition directives\n\t/** A `transition:`, `in:` or `out:` directive */\n\texport interface TransitionDirective extends BaseAttribute {\n\t\ttype: 'TransitionDirective';\n\t\t/** The 'x' in `transition:x` */\n\t\tname: string;\n\t\t/** The 'y' in `transition:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<'local' | 'global'>;\n\t\t/** True if this is a `transition:` or `in:` directive */\n\t\tintro: boolean;\n\t\t/** True if this is a `transition:` or `out:` directive */\n\t\toutro: boolean;\n\t}\n\n\t/** A `use:` directive */\n\texport interface UseDirective extends BaseAttribute {\n\t\ttype: 'UseDirective';\n\t\t/** The 'x' in `use:x` */\n\t\tname: string;\n\t\t/** The 'y' in `use:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\texport interface BaseElement extends BaseNode {\n\t\tname: string;\n\t\tname_loc: SourceLocation;\n\t\tattributes: Array<\n\t\t\tAttribute | SpreadAttribute | Directive | AttachTag\n\t\t>;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface Component extends BaseElement {\n\t\ttype: 'Component';\n\t}\n\n\texport interface TitleElement extends BaseElement {\n\t\ttype: 'TitleElement';\n\t\tname: 'title';\n\t}\n\n\texport interface SlotElement extends BaseElement {\n\t\ttype: 'SlotElement';\n\t\tname: 'slot';\n\t}\n\n\texport interface RegularElement extends BaseElement {\n\t\ttype: 'RegularElement';\n\t}\n\n\texport interface SvelteBody extends BaseElement {\n\t\ttype: 'SvelteBody';\n\t\tname: 'svelte:body';\n\t}\n\n\texport interface SvelteComponent extends BaseElement {\n\t\ttype: 'SvelteComponent';\n\t\tname: 'svelte:component';\n\t\texpression: Expression;\n\t}\n\n\texport interface SvelteDocument extends BaseElement {\n\t\ttype: 'SvelteDocument';\n\t\tname: 'svelte:document';\n\t}\n\n\texport interface SvelteElement extends BaseElement {\n\t\ttype: 'SvelteElement';\n\t\tname: 'svelte:element';\n\t\ttag: Expression;\n\t}\n\n\texport interface SvelteFragment extends BaseElement {\n\t\ttype: 'SvelteFragment';\n\t\tname: 'svelte:fragment';\n\t}\n\n\texport interface SvelteBoundary extends BaseElement {\n\t\ttype: 'SvelteBoundary';\n\t\tname: 'svelte:boundary';\n\t}\n\n\texport interface SvelteHead extends BaseElement {\n\t\ttype: 'SvelteHead';\n\t\tname: 'svelte:head';\n\t}\n\n\t/** This is only an intermediate representation while parsing, it doesn't exist in the final AST */\n\texport interface SvelteOptionsRaw extends BaseElement {\n\t\ttype: 'SvelteOptions';\n\t\tname: 'svelte:options';\n\t}\n\n\texport interface SvelteSelf extends BaseElement {\n\t\ttype: 'SvelteSelf';\n\t\tname: 'svelte:self';\n\t}\n\n\texport interface SvelteWindow extends BaseElement {\n\t\ttype: 'SvelteWindow';\n\t\tname: 'svelte:window';\n\t}\n\n\t/** An `{#each ...}` block */\n\texport interface EachBlock extends BaseNode {\n\t\ttype: 'EachBlock';\n\t\texpression: Expression;\n\t\t/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */\n\t\tcontext: Pattern | null;\n\t\tbody: Fragment;\n\t\tfallback?: Fragment;\n\t\tindex?: string;\n\t\tkey?: Expression;\n\t}\n\n\t/** An `{#if ...}` block */\n\texport interface IfBlock extends BaseNode {\n\t\ttype: 'IfBlock';\n\t\telseif: boolean;\n\t\ttest: Expression;\n\t\tconsequent: Fragment;\n\t\talternate: Fragment | null;\n\t}\n\n\t/** An `{#await ...}` block */\n\texport interface AwaitBlock extends BaseNode {\n\t\ttype: 'AwaitBlock';\n\t\texpression: Expression;\n\t\t// TODO can/should we move these inside the ThenBlock and CatchBlock?\n\t\t/** The resolved value inside the `then` block */\n\t\tvalue: Pattern | null;\n\t\t/** The rejection reason inside the `catch` block */\n\t\terror: Pattern | null;\n\t\tpending: Fragment | null;\n\t\tthen: Fragment | null;\n\t\tcatch: Fragment | null;\n\t}\n\n\texport interface KeyBlock extends BaseNode {\n\t\ttype: 'KeyBlock';\n\t\texpression: Expression;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface SnippetBlock extends BaseNode {\n\t\ttype: 'SnippetBlock';\n\t\texpression: Identifier;\n\t\tparameters: Pattern[];\n\t\ttypeParams?: string;\n\t\tbody: Fragment;\n\t}\n\n\texport interface BaseAttribute extends BaseNode {\n\t\tname: string;\n\t\tname_loc: SourceLocation | null;\n\t}\n\n\texport interface Attribute extends BaseAttribute {\n\t\ttype: 'Attribute';\n\t\t/**\n\t\t * Quoted/string values are represented by an array, even if they contain a single expression like `\"{x}\"`\n\t\t */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<Text | ExpressionTag>;\n\t}\n\n\texport interface SpreadAttribute extends BaseNode {\n\t\ttype: 'SpreadAttribute';\n\t\texpression: Expression;\n\t}\n\n\texport interface Script extends BaseNode {\n\t\ttype: 'Script';\n\t\tcontext: 'default' | 'module';\n\t\tcontent: Program;\n\t\tattributes: Attribute[];\n\t}\n\n\texport interface JSComment {\n\t\ttype: 'Line' | 'Block';\n\t\tvalue: string;\n\t\tstart: number;\n\t\tend: number;\n\t\tloc: {\n\t\t\tstart: { line: number; column: number };\n\t\t\tend: { line: number; column: number };\n\t\t};\n\t}\n\n\texport type AttributeLike =\n\t\t| Attribute\n\t\t| SpreadAttribute\n\t\t| Directive;\n\n\texport type Directive =\n\t\t| AST.AnimateDirective\n\t\t| AST.BindDirective\n\t\t| AST.ClassDirective\n\t\t| AST.LetDirective\n\t\t| AST.OnDirective\n\t\t| AST.StyleDirective\n\t\t| AST.TransitionDirective\n\t\t| AST.UseDirective;\n\n\texport type Block =\n\t\t| AST.EachBlock\n\t\t| AST.IfBlock\n\t\t| AST.AwaitBlock\n\t\t| AST.KeyBlock\n\t\t| AST.SnippetBlock;\n\n\texport type ElementLike =\n\t\t| AST.Component\n\t\t| AST.TitleElement\n\t\t| AST.SlotElement\n\t\t| AST.RegularElement\n\t\t| AST.SvelteBody\n\t\t| AST.SvelteBoundary\n\t\t| AST.SvelteComponent\n\t\t| AST.SvelteDocument\n\t\t| AST.SvelteElement\n\t\t| AST.SvelteFragment\n\t\t| AST.SvelteHead\n\t\t| AST.SvelteOptionsRaw\n\t\t| AST.SvelteSelf\n\t\t| AST.SvelteWindow\n\t\t| AST.SvelteBoundary;\n\n\texport type Tag =\n\t\t| AST.AttachTag\n\t\t| AST.ConstTag\n\t\t| AST.DeclarationTag\n\t\t| AST.DebugTag\n\t\t| AST.ExpressionTag\n\t\t| AST.HtmlTag\n\t\t| AST.RenderTag;\n\n\texport type TemplateNode =\n\t\t| AST.Root\n\t\t| AST.Text\n\t\t| Tag\n\t\t| ElementLike\n\t\t| AST.Attribute\n\t\t| AST.SpreadAttribute\n\t\t| Directive\n\t\t| AST.AttachTag\n\t\t| AST.Comment\n\t\t| Block;\n\n\texport type SvelteNode =\n\t\t| Node\n\t\t| TemplateNode\n\t\t| AST.Fragment\n\t\t| _CSS.Node\n\t\t| Script;\n\n\texport type { _CSS as CSS };\n}\n```\n\nExample:\n```text\ninterface CompileError extends ICompileDiagnostic {}\n```\n\nExample:\n```text\ninterface CompileOptions extends ModuleCompileOptions {…}\n```\n\nExample:\n```text\nname?: string;\n```\n\nExample:\n```text\ncustomElement?: boolean | ((options: { filename: string }) => boolean);\n```\n\nExample:\n```text\naccessors?: boolean;\n```\n\nExample:\n```text\nnamespace?: Namespace;\n```\n\nExample:\n```text\nimmutable?: boolean;\n```\n\nExample:\n```text\ncss?: 'injected' | 'external' | ((options: { filename: string }) => 'injected' | 'external');\n```\n\nExample:\n```text\ncssHash?: CssHashGetter;\n```\n\nExample:\n```text\npreserveComments?: boolean;\n```\n\nExample:\n```text\npreserveWhitespace?: boolean;\n```\n\nExample:\n```text\nfragments?: 'html' | 'tree';\n```\n\nExample:\n```text\nrunes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);\n```\n\nExample:\n```text\ndiscloseVersion?: boolean;\n```\n\nExample:\n```text\ncompatibility?: {…}\n```\n\nExample:\n```text\ncomponentApi?: 4 | 5;\n```\n\nExample:\n```text\nsourcemap?: object | string;\n```\n\nExample:\n```text\noutputFilename?: string;\n```\n\nExample:\n```text\ncssOutputFilename?: string;\n```\n\nExample:\n```text\nhmr?: boolean;\n```\n\nExample:\n```text\nmodernAst?: boolean;\n```\n\nExample:\n```text\ninterface CompileResult {…}\n```\n\nExample:\n```text\njs: {…}\n```\n\nExample:\n```text\ncode: string;\n```\n\nExample:\n```text\nmap: SourceMap;\n```\n\nExample:\n```text\ncss: null | {\n\t/** The generated code */\n\tcode: string;\n\t/** A source map */\n\tmap: SourceMap;\n\t/** Whether or not the CSS includes global rules */\n\thasGlobal: boolean;\n};\n```\n\nExample:\n```text\nwarnings: Warning[];\n```\n\nExample:\n```text\nmetadata: {…}\n```\n\nExample:\n```text\nrunes: boolean;\n```\n\nExample:\n```text\nast: any;\n```\n\nExample:\n```text\ntype MarkupPreprocessor = (options: {\n\t/**\n\t * The whole Svelte file content\n\t */\n\tcontent: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\nExample:\n```text\ninterface ModuleCompileOptions {…}\n```\n\nExample:\n```text\ndev?: boolean;\n```\n\nExample:\n```text\ngenerate?: 'client' | 'server' | false;\n```\n\nExample:\n```text\nfilename?: string;\n```\n\nExample:\n```text\nrootDir?: string;\n```\n\nExample:\n```text\nwarningFilter?: (warning: Warning) => boolean;\n```\n\nExample:\n```text\nexperimental?: {…}\n```\n\nExample:\n```text\nasync?: boolean;\n```\n\nExample:\n```text\ntype Preprocessor = (options: {\n\t/**\n\t * The script/style tag content\n\t */\n\tcontent: string;\n\t/**\n\t * The attributes on the script/style tag\n\t */\n\tattributes: Record<string, string | boolean>;\n\t/**\n\t * The whole Svelte file content\n\t */\n\tmarkup: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\nExample:\n```text\ninterface PreprocessorGroup {…}\n```\n\nExample:\n```text\nmarkup?: MarkupPreprocessor;\n```\n\nExample:\n```text\nstyle?: Preprocessor;\n```\n\nExample:\n```text\nscript?: Preprocessor;\n```\n\nExample:\n```text\ninterface Processed {…}\n```\n\nExample:\n```text\nmap?: string | object;\n```\n\nExample:\n```text\ndependencies?: string[];\n```\n\nExample:\n```text\nattributes?: Record<string, string | boolean>;\n```\n\nExample:\n```text\ntoString?: () => string;\n```\n\nExample:\n```text\ninterface Warning extends ICompileDiagnostic {}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.180Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":66,"totalLines":974,"estimatedTokens":4979}}84{"id":"doc-typescript_svelte_docs-dc9b1a1d","source":"documentation","title":"TypeScript • Svelte Docs","url":"https://svelte.dev/docs/svelte/typescript","text":"Example:\n```text\n<script lang=\"ts\">\n\tlet name: string = 'world';\n\n\tfunction greet(name: string) {\n\t\talert(`Hello, ${name}!`);\n\t}\n</script>\n\n<button onclick={(e: Event) => greet(e.target.innerText)}>\n\t{name as string}\n</button>\n```\n\nExample:\n```text\nimport { function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst const config: {\n    preprocess: PreprocessorGroup;\n}config = {\n\t// Note the additional `{ script: true }`\n\tpreprocess: PreprocessorGrouppreprocess: function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess({ VitePreprocessOptions.script?: boolean | undefinedpreprocess script block with vite pipeline.\nSince svelte5 this is not needed for typescript anymore\n@defaultfalsescript: true })\n};\n\nexport default const config: {\n    preprocess: PreprocessorGroup;\n}config;function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupconst config: {\n    preprocess: PreprocessorGroup;\n}const config: {\n    preprocess: PreprocessorGroup;\n}preprocess: PreprocessorGroupfunction vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupVitePreprocessOptions.script?: boolean | undefinedconst config: {\n    preprocess: PreprocessorGroup;\n}const config: {\n    preprocess: PreprocessorGroup;\n}\n```\n\nExample:\n```text\nconst config: {\n    preprocess: PreprocessorGroup;\n}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\trequiredProperty: number;\n\t\toptionalProperty?: boolean;\n\t\tsnippetWithStringArgument: Snippet<[string]>;\n\t\teventHandler: (arg: string) => void;\n\t\t[key: string]: unknown;\n\t}\n\n\tlet {\n\t\trequiredProperty,\n\t\toptionalProperty,\n\t\tsnippetWithStringArgument,\n\t\teventHandler,\n\t\t...everythingElse\n\t}: Props = $props();\n</script>\n\n<button onclick={() => eventHandler('clicked button')}>\n\t{@render snippetWithStringArgument('hello')}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\" generics=\"Item extends { text: string }\">\n\tinterface Props {\n\t\titems: Item[];\n\t\tselect(item: Item): void;\n\t}\n\n\tlet { items, select }: Props = $props();\n</script>\n\n{#each items as item}\n\t<button onclick={() => select(item)}>\n\t\t{item.text}\n\t</button>\n{/each}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { HTMLButtonAttributes } from 'svelte/elements';\n\n\tlet { children, ...rest }: HTMLButtonAttributes = $props();\n</script>\n\n<button {...rest}>\n\t{@render children?.()}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { SvelteHTMLElements } from 'svelte/elements';\n\n\tlet { children, ...rest }: SvelteHTMLElements['div'] = $props();\n</script>\n\n<div {...rest}>\n\t{@render children?.()}\n</div>\n```\n\nExample:\n```text\nlet let count: numbercount: number = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);let count: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\n// Error: Type 'number | undefined' is not assignable to type 'number'\nlet let count: numbercount: number = function $state<number>(): number | undefined (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state();let count: numberfunction $state<number>(): number | undefined (+1 overload)\nnamespace $statefunction $state<number>(): number | undefined (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<number>(): number | undefined (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nclass class CounterCounter {\n\tCounter.count: numbercount = function $state<number>(): number | undefined (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state() as number;\n\tconstructor(initial: numberinitial: number) {\n\t\tthis.Counter.count: numbercount = initial: numberinitial;\n\t}\n}class CounterCounter.count: numberfunction $state<number>(): number | undefined (+1 overload)\nnamespace $statefunction $state<number>(): number | undefined (+1 overload)\nnamespace $statelet count = $state(0);initial: numberCounter.count: numberinitial: number\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Component } from 'svelte';\n\n\tinterface Props {\n\t\t// only components that have at most the \"prop\"\n\t\t// property required can be passed\n\t\tDynamicComponent: Component<{ prop: string }>;\n\t}\n\n\tlet { DynamicComponent }: Props = $props();\n</script>\n\n<DynamicComponent prop=\"foo\" />\n```\n\nExample:\n```text\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {}\n\n// Errors if the second argument is not the correct props expected\n// by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypefunction withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />component: TComponent extends Component<any>function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidprops: ComponentProps<TComponent>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidconst MyComponent: LegacyComponentTypefoo: stringtype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypefunction withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />component: TComponent extends Component<any>function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidprops: ComponentProps<TComponent>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypefunction withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />component: TComponent extends Component<any>function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidprops: ComponentProps<TComponent>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidconst MyComponent: LegacyComponentTypefoo: stringfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidconst MyComponent: LegacyComponentTypefoo: string\n```\n\nExample:\n```text\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />\n```\n\nExample:\n```text\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: string\n```\n\nExample:\n```text\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };\n```\n\nExample:\n```text\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\nExample:\n```text\ntype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentType\n```\n\nExample:\n```text\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypefunction withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />component: TComponent extends Component<any>function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidprops: ComponentProps<TComponent>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidconst MyComponent: LegacyComponentTypefoo: string\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport MyComponent from './MyComponent.svelte';\n\n\tlet componentConstructor: typeof MyComponent = MyComponent;\n\tlet componentInstance: MyComponent;\n</script>\n\n<MyComponent bind:this={componentInstance} />\n```\n\nExample:\n```text\nimport { HTMLButtonAttributes } from 'svelte/elements';\n\ndeclare module 'svelte/elements' {\n\t// add a new element\n\texport interface SvelteHTMLElements {\n\t\t'custom-button': HTMLButtonAttributes;\n\t}\n\n\t// add a new global attribute that is available on all html elements\n\texport interface interface HTMLAttributes<T extends EventTarget>HTMLAttributes<function (type parameter) T in HTMLAttributes<T extends EventTarget>T> {\n\t\tHTMLAttributes<T extends EventTarget>.globalattribute?: string | undefinedglobalattribute?: string;\n\t}\n\n\t// add a new attribute for button elements\n\texport interface HTMLButtonAttributes {\n\t\tHTMLButtonAttributes.veryexperimentalattribute?: string | undefinedveryexperimentalattribute?: string;\n\t}\n}\n\nexport {}; // ensure this is not an ambient module, else types will be overridden instead of augmentedinterface HTMLAttributes<T extends EventTarget>function (type parameter) T in HTMLAttributes<T extends EventTarget>HTMLAttributes<T extends EventTarget>.globalattribute?: string | undefinedHTMLButtonAttributes.veryexperimentalattribute?: string | undefined\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":24,"totalLines":1416,"estimatedTokens":24362}}85{"id":"doc-svelte_reactivity_window_svelte_docs-220dfd30","source":"documentation","title":"svelte/reactivity/window • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-reactivity-window","text":"Example:\n```text\n<script>\n\timport { innerWidth, innerHeight } from 'svelte/reactivity/window';\n</script>\n\n<p>{innerWidth.current}x{innerHeight.current}</p>\n```\n\nExample:\n```text\nimport {\n\tconst devicePixelRatio: {\n    readonly current: number | undefined;\n}devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined.\nNote that behaviour differs between browsers — on Chrome it will respond to the current zoom level,\non Firefox and Safari it won’t.\n@since5.11.0referencedevicePixelRatio,\n\tconst innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.\n@since5.11.0referenceinnerHeight,\n\tconst innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.\n@since5.11.0referenceinnerWidth,\n\tconst online: ReactiveValue<boolean | undefined>online.current is a reactive view of navigator.onLine. On the server it is undefined.\n@since5.11.0referenceonline,\n\tconst outerHeight: ReactiveValue<number | undefined>outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.\n@since5.11.0referenceouterHeight,\n\tconst outerWidth: ReactiveValue<number | undefined>outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.\n@since5.11.0referenceouterWidth,\n\tconst screenLeft: ReactiveValue<number | undefined>screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.\n@since5.11.0referencescreenLeft,\n\tconst screenTop: ReactiveValue<number | undefined>screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.\n@since5.11.0referencescreenTop,\n\tconst scrollX: ReactiveValue<number | undefined>scrollX.current is a reactive view of window.scrollX. On the server it is undefined.\n@since5.11.0referencescrollX,\n\tconst scrollY: ReactiveValue<number | undefined>scrollY.current is a reactive view of window.scrollY. On the server it is undefined.\n@since5.11.0referencescrollY\n} from 'svelte/reactivity/window';const devicePixelRatio: {\n    readonly current: number | undefined;\n}const devicePixelRatio: {\n    readonly current: number | undefined;\n}devicePixelRatio.currentwindow.devicePixelRatioundefinedconst innerHeight: ReactiveValue<number | undefined>innerHeight.currentwindow.innerHeightundefinedconst innerWidth: ReactiveValue<number | undefined>innerWidth.currentwindow.innerWidthundefinedconst online: ReactiveValue<boolean | undefined>online.currentnavigator.onLineundefinedconst outerHeight: ReactiveValue<number | undefined>outerHeight.currentwindow.outerHeightundefinedconst outerWidth: ReactiveValue<number | undefined>outerWidth.currentwindow.outerWidthundefinedconst screenLeft: ReactiveValue<number | undefined>screenLeft.currentwindow.screenLeftrequestAnimationFrameundefinedconst screenTop: ReactiveValue<number | undefined>screenTop.currentwindow.screenToprequestAnimationFrameundefinedconst scrollX: ReactiveValue<number | undefined>scrollX.currentwindow.scrollXundefinedconst scrollY: ReactiveValue<number | undefined>scrollY.currentwindow.scrollYundefined\n```\n\nExample:\n```text\nconst devicePixelRatio: {\n    readonly current: number | undefined;\n}\n```\n\nExample:\n```text\nconst devicePixelRatio: {\n\tget current(): number | undefined;\n};\n```\n\nExample:\n```text\nconst innerHeight: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst innerWidth: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst online: ReactiveValue<boolean | undefined>;\n```\n\nExample:\n```text\nconst outerHeight: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst outerWidth: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst screenLeft: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst screenTop: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst scrollX: ReactiveValue<number | undefined>;\n```\n\nExample:\n```text\nconst scrollY: ReactiveValue<number | undefined>;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":103,"estimatedTokens":1040}}86{"id":"doc-svelte_transition_svelte_docs-f5db5c64","source":"documentation","title":"svelte/transition • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-transition","text":"Example:\n```text\nimport {\n\tfunction blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfigAnimates a blur filter alongside an element’s opacity.\nreferenceblur,\n\tfunction crossfade({ fallback, ...defaults }: CrossfadeParams & {\n    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n}): [(node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig, (node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig]The crossfade function creates a pair of transitions called send and receive. When an element is ‘sent’, it looks for a corresponding element being ‘received’, and generates a transition that transforms the element to its counterpart’s position and fades it out. When an element is ‘received’, the reverse happens. If there is no counterpart, the fallback transition is used.\nreferencecrossfade,\n\tfunction draw(node: SVGElement & {\n    getTotalLength(): number;\n}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfigAnimates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.\nreferencedraw,\n\tfunction fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.\nreferencefade,\n\tfunction fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element’s default values. out transitions animate from the element’s default values to the provided values.\nreferencefly,\n\tfunction scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfigAnimates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element’s current (default) values. out transitions animate from an element’s default values to the provided values.\nreferencescale,\n\tfunction slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfigSlides an element in and out.\nreferenceslide\n} from 'svelte/transition';function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfigblurfunction crossfade({ fallback, ...defaults }: CrossfadeParams & {\n    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n}): [(node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig, (node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig]function crossfade({ fallback, ...defaults }: CrossfadeParams & {\n    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n}): [(node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig, (node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig]crossfadesendreceivefallbackfunction draw(node: SVGElement & {\n    getTotalLength(): number;\n}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfigfunction draw(node: SVGElement & {\n    getTotalLength(): number;\n}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfiginoutdrawgetTotalLength<path><polyline>function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfiginoutfunction fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfiginoutfunction scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfiginoutfunction slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfig\n```\n\nExample:\n```text\nfunction crossfade({ fallback, ...defaults }: CrossfadeParams & {\n    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n}): [(node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig, (node: any, params: CrossfadeParams & {\n    key: any;\n}) => () => TransitionConfig]\n```\n\nExample:\n```text\nfunction draw(node: SVGElement & {\n    getTotalLength(): number;\n}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfig\n```\n\nExample:\n```text\nfunction blur(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tamount,\n\t\topacity\n\t}?: BlurParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\nfunction crossfade({\n\tfallback,\n\t...defaults\n}: CrossfadeParams & {\n\tfallback?: (\n\t\tnode: Element,\n\t\tparams: CrossfadeParams,\n\t\tintro: boolean\n\t) => TransitionConfig;\n}): [\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig,\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig\n];\n```\n\nExample:\n```text\nfunction draw(\n\tnode: SVGElement & {\n\t\tgetTotalLength(): number;\n\t},\n\t{\n\t\tdelay,\n\t\tspeed,\n\t\tduration,\n\t\teasing\n\t}?: DrawParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\nfunction fade(\n\tnode: Element,\n\t{ delay, duration, easing }?: FadeParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\nfunction fly(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tx,\n\t\ty,\n\t\topacity\n\t}?: FlyParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\nfunction scale(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tstart,\n\t\topacity\n\t}?: ScaleParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\nfunction slide(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\taxis\n\t}?: SlideParams | undefined\n): TransitionConfig;\n```\n\nExample:\n```text\ninterface BlurParams {…}\n```\n\nExample:\n```text\ndelay?: number;\n```\n\nExample:\n```text\nduration?: number;\n```\n\nExample:\n```text\neasing?: EasingFunction;\n```\n\nExample:\n```text\namount?: number | string;\n```\n\nExample:\n```text\nopacity?: number;\n```\n\nExample:\n```text\ninterface CrossfadeParams {…}\n```\n\nExample:\n```text\nduration?: number | ((len: number) => number);\n```\n\nExample:\n```text\ninterface DrawParams {…}\n```\n\nExample:\n```text\nspeed?: number;\n```\n\nExample:\n```text\ntype EasingFunction = (t: number) => number;\n```\n\nExample:\n```text\ninterface FadeParams {…}\n```\n\nExample:\n```text\ninterface FlyParams {…}\n```\n\nExample:\n```text\nx?: number | string;\n```\n\nExample:\n```text\ny?: number | string;\n```\n\nExample:\n```text\ninterface ScaleParams {…}\n```\n\nExample:\n```text\nstart?: number;\n```\n\nExample:\n```text\ninterface SlideParams {…}\n```\n\nExample:\n```text\naxis?: 'x' | 'y';\n```\n\nExample:\n```text\ninterface TransitionConfig {…}\n```\n\nExample:\n```text\ncss?: (t: number, u: number) => string;\n```\n\nExample:\n```text\ntick?: (t: number, u: number) => void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":32,"totalLines":279,"estimatedTokens":1778}}87{"id":"doc-on_svelte_docs-eb0e5399","source":"documentation","title":"on: • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-on","text":"Example:\n```text\n<script>\n\tlet count = 0;\n\n\t/** @param {MouseEvent} event */\n\tfunction handleClick(event) {\n\t\tcount += 1;\n\t}\n</script>\n\n<button on:click={handleClick}>\n\tcount: {count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet count = 0;\n\n\tfunction handleClick(event: MouseEvent) {\n\t\tcount += 1;\n\t}\n</script>\n\n<button on:click={handleClick}>\n\tcount: {count}\n</button>\n```\n\nExample:\n```text\n<form on:submit|preventDefault={handleSubmit}>\n\t<!-- the `submit` event's default is prevented,\n\t     so the page won't reload -->\n</form>\n```\n\nExample:\n```text\n<script>\n\tlet count = 0;\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\t/** @param {MouseEvent} event */\n\tfunction log(event) {\n\t\tconsole.log(event);\n\t}\n</script>\n\n<button on:click={increment} on:click={log}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet count = 0;\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\tfunction log(event: MouseEvent) {\n\t\tconsole.log(event);\n\t}\n</script>\n\n<button on:click={increment} on:click={log}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n</script>\n\n<button on:click={() => dispatch('decrement')}>decrement</button>\n<button on:click={() => dispatch('increment')}>increment</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n</script>\n\n<button on:click={() => dispatch('decrement')}>decrement</button>\n<button on:click={() => dispatch('increment')}>increment</button>\n```\n\nExample:\n```text\n<script>\n\timport Stepper from './Stepper.svelte';\n\n\tlet n = 0;\n</script>\n\n<Stepper\n\ton:decrement={() => n -= 1}\n\ton:increment={() => n += 1}\n/>\n\n<p>n: {n}</p>\n```\n\nExample:\n```text\n<script>\n\texport let decrement;\n\texport let increment;\n</script>\n\n<button on:click={decrement}>decrement</button>\n<button on:click={increment}>increment</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\texport let decrement;\n\texport let increment;\n</script>\n\n<button on:click={decrement}>decrement</button>\n<button on:click={increment}>increment</button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.185Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":139,"estimatedTokens":540}}88{"id":"doc-svelte_store_svelte_docs-5748b7f6","source":"documentation","title":"svelte/store • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-store","text":"Example:\n```text\nimport {\n\tfunction derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)Derived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\nreferencederived,\n\tfunction fromStore<V>(store: Writable<V>): {\n    current: V;\n} (+1 overload)referencefromStore,\n\tfunction get<T>(store: Readable<T>): TGet the current value from a store by subscribing and immediately unsubscribing.\nreferenceget,\n\tfunction readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>Creates a Readable store that allows reading by subscription.\n@paramvalue initial valuereferencereadable,\n\tfunction readonly<T>(store: Readable<T>): Readable<T>Takes a store and returns a new one derived from the old one that is readable.\n@paramstore - store to make readonlyreferencereadonly,\n\tfunction toStore<V>(get: () => V, set: (v: V) => void): Writable<V> (+1 overload)referencetoStore,\n\tfunction writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.\n@paramvalue initial valuereferencewritable\n} from 'svelte/store';function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T> (+1 overload)function fromStore<V>(store: Writable<V>): {\n    current: V;\n} (+1 overload)function fromStore<V>(store: Writable<V>): {\n    current: V;\n} (+1 overload)function get<T>(store: Readable<T>): Tfunction readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>Readablefunction readonly<T>(store: Readable<T>): Readable<T>function toStore<V>(get: () => V, set: (v: V) => void): Writable<V> (+1 overload)function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Writable\n```\n\nExample:\n```text\nfunction fromStore<V>(store: Writable<V>): {\n    current: V;\n} (+1 overload)\n```\n\nExample:\n```text\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (\n\t\tvalues: StoresValues<S>,\n\t\tset: (value: T) => void,\n\t\tupdate: (fn: Updater<T>) => void\n\t) => Unsubscriber | void,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\nExample:\n```text\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (values: StoresValues<S>) => T,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\nExample:\n```text\nfunction fromStore<V>(store: Writable<V>): {\n\tcurrent: V;\n};\n```\n\nExample:\n```text\nfunction fromStore<V>(store: Readable<V>): {\n\treadonly current: V;\n};\n```\n\nExample:\n```text\nfunction get<T>(store: Readable<T>): T;\n```\n\nExample:\n```text\nfunction readable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Readable<T>;\n```\n\nExample:\n```text\nfunction readonly<T>(store: Readable<T>): Readable<T>;\n```\n\nExample:\n```text\nfunction toStore<V>(\n\tget: () => V,\n\tset: (v: V) => void\n): Writable<V>;\n```\n\nExample:\n```text\nfunction toStore<V>(get: () => V): Readable<V>;\n```\n\nExample:\n```text\nfunction writable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Writable<T>;\n```\n\nExample:\n```text\ninterface Readable<T> {…}\n```\n\nExample:\n```text\nsubscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;\n```\n\nExample:\n```text\ntype StartStopNotifier<T> = (\n\tset: (value: T) => void,\n\tupdate: (fn: Updater<T>) => void\n) => void | (() => void);\n```\n\nExample:\n```text\ntype Subscriber<T> = (value: T) => void;\n```\n\nExample:\n```text\ntype Unsubscriber = () => void;\n```\n\nExample:\n```text\ntype Updater<T> = (value: T) => T;\n```\n\nExample:\n```text\ninterface Writable<T> extends Readable<T> {…}\n```\n\nExample:\n```text\nset(this: void, value: T): void;\n```\n\nExample:\n```text\nupdate(this: void, updater: Updater<T>): void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.185Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":156,"estimatedTokens":1004}}89{"id":"doc-testing_svelte_docs-5ba823de","source":"documentation","title":"Testing • Svelte Docs","url":"https://svelte.dev/docs/svelte/testing","text":"Example:\n```text\nnpm install -D vitest\n```\n\nExample:\n```text\nimport { function defineConfig(config: UserConfig): UserConfig (+4 overloads)defineConfig } from 'vitest/config';\n\nexport default function defineConfig(config: UserConfig): UserConfig (+4 overloads)defineConfig({\n\t// ...\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve?: AllResolveOptions | undefinedresolve: var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnvThe process.env property returns an object containing the user environment.\nSee environ(7).\nAn example of this object looks like:\n{\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}It is possible to modify this object, but such modifications will not be\nreflected outside the Node.js process, or (unless explicitly requested)\nto other Worker threads.\nIn other words, the following example would not work:\nnode -e 'process.env.foo = \"bar\"' && echo $fooWhile the following will:\nimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);Assigning a property on process.env will implicitly convert the value\nto a string. This behavior is deprecated. Future versions of Node.js may\nthrow an error when the value is not a string, number, or boolean.\nimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'Use delete to delete a property from process.env.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedOn Windows operating systems, environment variables are case-insensitive.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1Unless explicitly specified when creating a Worker instance,\neach Worker thread has its own copy of process.env, based on its\nparent thread’s process.env, or whatever was specified as the env option\nto the Worker constructor. Changes to process.env will not be visible\nacross Worker threads, and only the main thread can make changes that\nare visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner\nunlike the main thread.\n@sincev0.1.27env.string | undefinedVITEST\n\t\t? {\n\t\t\t\tEnvironmentResolveOptions.conditions?: string[] | undefinedconditions: ['browser']\n\t\t\t}\n\t\t: var undefinedundefined\n});function defineConfig(config: UserConfig): UserConfig (+4 overloads)function defineConfig(config: UserConfig): UserConfig (+4 overloads)resolve?: AllResolveOptions | undefinedvar process: NodeJS.ProcessNodeJS.Process.env: NodeJS.ProcessEnvprocess.envenviron(7){\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}Workernode -e 'process.env.foo = \"bar\"' && echo $fooimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);process.envimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'deleteprocess.envimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1WorkerWorkerprocess.envprocess.envenvWorkerprocess.envWorkerprocess.envWorkerstring | undefinedEnvironmentResolveOptions.conditions?: string[] | undefinedvar undefined\n```\n\nExample:\n```text\n{\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}\n```\n\nExample:\n```text\nnode -e 'process.env.foo = \"bar\"' && echo $foo\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefined\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1\n```\n\nExample:\n```text\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet double = multiplier(0, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tdouble.set(5);\n\n\texpect(double.value).toEqual(10);\n});\n```\n\nExample:\n```text\n/**\n * @param {number} initial\n * @param {number} k\n */\nexport function function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}@paraminitial @paramk multiplier(initial: number@paraminitial initial, k: number@paramk k) {\n\tlet let count: numbercount = function $state<number>(initial: number): number (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(initial: number@paraminitial initial);\n\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn let count: numbercount * k: number@paramk k;\n\t\t},\n\t\t/** @param {number} c */\n\t\tset: (c: number) => void@paramc set: (c: number@paramc c) => {\n\t\t\tlet count: numbercount = c: number@paramc c;\n\t\t}\n\t};\n}function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}initial: numberk: numberlet count: numberfunction $state<number>(initial: number): number (+1 overload)\nnamespace $statefunction $state<number>(initial: number): number (+1 overload)\nnamespace $statelet count = $state(0);initial: numbervalue: numberlet count: numberk: numberset: (c: number) => voidc: numberlet count: numberc: number\n```\n\nExample:\n```text\nfunction multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}\n```\n\nExample:\n```text\nfunction $state<number>(initial: number): number (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nexport function function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}multiplier(initial: numberinitial: number, k: numberk: number) {\n\tlet let count: numbercount = function $state<number>(initial: number): number (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(initial: numberinitial);\n\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn let count: numbercount * k: numberk;\n\t\t},\n\n\t\tset: (c: number) => voidset: (c: numberc: number) => {\n\t\t\tlet count: numbercount = c: numberc;\n\t\t}\n\t};\n}function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}function multiplier(initial: number, k: number): {\n    readonly value: number;\n    set: (c: number) => void;\n}initial: numberk: numberlet count: numberfunction $state<number>(initial: number): number (+1 overload)\nnamespace $statefunction $state<number>(initial: number): number (+1 overload)\nnamespace $statelet count = $state(0);initial: numbervalue: numberlet count: numberk: numberset: (c: number) => voidc: numberlet count: numberc: number\n```\n\nExample:\n```text\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet count = $state(0);\n\tlet double = multiplier(() => count, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tcount = 5;\n\n\texpect(double.value).toEqual(10);\n});\n```\n\nExample:\n```text\n/**\n * @param {() => number} getCount\n * @param {number} k\n */\nexport function function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}@paramgetCount @paramk multiplier(getCount: () => number@paramgetCount getCount, k: number@paramk k) {\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn getCount: () => number@paramgetCount getCount() * k: number@paramk k;\n\t\t}\n\t};\n}function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}getCount: () => numberk: numbervalue: numbergetCount: () => numberk: number\n```\n\nExample:\n```text\nfunction multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}\n```\n\nExample:\n```text\nexport function function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}multiplier(getCount: () => numbergetCount: () => number, k: numberk: number) {\n\treturn {\n\t\tget value: numbervalue() {\n\t\t\treturn getCount: () => numbergetCount() * k: numberk;\n\t\t}\n\t};\n}function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}function multiplier(getCount: () => number, k: number): {\n    readonly value: number;\n}getCount: () => numberk: numbervalue: numbergetCount: () => numberk: number\n```\n\nExample:\n```text\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { logger } from './logger.svelte.js';\n\ntest('Effect', () => {\n\tconst cleanup = $effect.root(() => {\n\t\tlet count = $state(0);\n\n\t\t// logger uses an $effect to log updates of its input\n\t\tlet log = logger(() => count);\n\n\t\t// effects normally run after a microtask,\n\t\t// use flushSync to execute all pending effects synchronously\n\t\tflushSync();\n\t\texpect(log).toEqual([0]);\n\n\t\tcount = 1;\n\t\tflushSync();\n\n\t\texpect(log).toEqual([0, 1]);\n\t});\n\n\tcleanup();\n});\n```\n\nExample:\n```text\n/**\n * @param {() => any} getValue\n */\nexport function function logger(getValue: () => any): any[]@paramgetValue logger(getValue: () => any@paramgetValue getValue) {\n\t/** @type {any[]} */\n\tlet let log: any[]log = [];\n\n\tfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t\tlet log: any[]log.Array<any>.push(...items: any[]): numberAppends new elements to the end of an array, and returns the new length of the array.\n@paramitems New elements to add to the array.push(getValue: () => any@paramgetValue getValue());\n\t});\n\n\treturn let log: any[]log;\n}function logger(getValue: () => any): any[]getValue: () => anylet log: any[]function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let log: any[]Array<any>.push(...items: any[]): numbergetValue: () => anylet log: any[]\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\nExample:\n```text\nexport function function logger(getValue: () => any): any[]logger(getValue: () => anygetValue: () => any) {\n\tlet let log: any[]log: any[] = [];\n\n\tfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t\tlet log: any[]log.Array<any>.push(...items: any[]): numberAppends new elements to the end of an array, and returns the new length of the array.\n@paramitems New elements to add to the array.push(getValue: () => anygetValue());\n\t});\n\n\treturn let log: any[]log;\n}function logger(getValue: () => any): any[]getValue: () => anylet log: any[]function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let log: any[]Array<any>.push(...items: any[]): numbergetValue: () => anylet log: any[]\n```\n\nExample:\n```text\nnpm install -D jsdom\n```\n\nExample:\n```text\nimport { function defineConfig(config: UserConfig): UserConfig (+4 overloads)defineConfig } from 'vitest/config';\n\nexport default function defineConfig(config: UserConfig): UserConfig (+4 overloads)defineConfig({\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [\n\t\t/* ... */\n\t],\n\tUserConfig.test?: InlineConfig | undefinedOptions for Vitest\ntest: {\n\t\t// If you are testing components client-side, you need to set up a DOM environment.\n\t\t// If not all your files should have this environment, you can use a\n\t\t// `// @vitest-environment jsdom` comment at the top of the test files instead.\n\t\tInlineConfig.environment?: VitestEnvironment | undefinedRunning environment\nSupports ‘node’, ‘jsdom’, ‘happy-dom’, ‘edge-runtime’\nIf used unsupported string, will try to load the package vitest-environment-${env}\n@default'node'environment: 'jsdom'\n\t},\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve?: AllResolveOptions | undefinedresolve: var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnvThe process.env property returns an object containing the user environment.\nSee environ(7).\nAn example of this object looks like:\n{\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}It is possible to modify this object, but such modifications will not be\nreflected outside the Node.js process, or (unless explicitly requested)\nto other Worker threads.\nIn other words, the following example would not work:\nnode -e 'process.env.foo = \"bar\"' && echo $fooWhile the following will:\nimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);Assigning a property on process.env will implicitly convert the value\nto a string. This behavior is deprecated. Future versions of Node.js may\nthrow an error when the value is not a string, number, or boolean.\nimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'Use delete to delete a property from process.env.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedOn Windows operating systems, environment variables are case-insensitive.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1Unless explicitly specified when creating a Worker instance,\neach Worker thread has its own copy of process.env, based on its\nparent thread’s process.env, or whatever was specified as the env option\nto the Worker constructor. Changes to process.env will not be visible\nacross Worker threads, and only the main thread can make changes that\nare visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner\nunlike the main thread.\n@sincev0.1.27env.string | undefinedVITEST\n\t\t? {\n\t\t\t\tEnvironmentResolveOptions.conditions?: string[] | undefinedconditions: ['browser']\n\t\t\t}\n\t\t: var undefinedundefined\n});function defineConfig(config: UserConfig): UserConfig (+4 overloads)function defineConfig(config: UserConfig): UserConfig (+4 overloads)UserConfig.plugins?: PluginOption[] | undefinedUserConfig.test?: InlineConfig | undefinedInlineConfig.environment?: VitestEnvironment | undefinedvitest-environment-${env}resolve?: AllResolveOptions | undefinedvar process: NodeJS.ProcessNodeJS.Process.env: NodeJS.ProcessEnvprocess.envenviron(7){\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}Workernode -e 'process.env.foo = \"bar\"' && echo $fooimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);process.envimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'deleteprocess.envimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1WorkerWorkerprocess.envprocess.envenvWorkerprocess.envWorkerprocess.envWorkerstring | undefinedEnvironmentResolveOptions.conditions?: string[] | undefinedvar undefined\n```\n\nExample:\n```text\nimport { function flushSync<T = void>(fn?: (() => T) | undefined): TSynchronously flush any pending updates.\nReturns void if no callback is provided, otherwise returns the result of calling the callback.\nreferenceflushSync, function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount, function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount } from 'svelte';\nimport { const expect: ExpectStaticexpect, const test: TestAPIDefines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test } from 'vitest';\nimport type Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypeComponent from './Component.svelte';\n\ntest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)Defines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test('Component', () => {\n\t// Instantiate the component using Svelte's `mount` API\n\tconst const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const Component: LegacyComponentTypeComponent, {\n\t\ttarget: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody, // `document` exists because of jsdom\n\t\tprops?: Record<string, any> | undefinedComponent properties.\nprops: { initial: numberinitial: 0 }\n\t});\n\n\texpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)expect(var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody.Element.innerHTML: stringThe innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.\nMDN Reference\ninnerHTML).JestAssertion<string>.toBe: <string>(expected: string) => voidChecks that a value is what you expect. It calls Object.is to compare values.\nDon’t use toBe with floating-point numbers.\n@exampleexpect(result).toBe(42);\nexpect(status).toBe(true);\ntoBe('<button>0</button>');\n\n\t// Click the button, then flush the changes so you can synchronously write expectations\n\tvar document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody.ParentNode.querySelector<\"button\">(selectors: \"button\"): HTMLButtonElement | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('button')?.HTMLElement.click(): voidThe HTMLElement.click() method simulates a mouse click on an element. When called on an element, the element’s click event is fired (unless its disabled attribute is set).\nMDN Reference\nclick();\n\tflushSync<void>(fn?: (() => void) | undefined): voidSynchronously flush any pending updates.\nReturns void if no callback is provided, otherwise returns the result of calling the callback.\nreferenceflushSync();\n\n\texpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)expect(var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody.Element.innerHTML: stringThe innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.\nMDN Reference\ninnerHTML).JestAssertion<string>.toBe: <string>(expected: string) => voidChecks that a value is what you expect. It calls Object.is to compare values.\nDon’t use toBe with floating-point numbers.\n@exampleexpect(result).toBe(42);\nexpect(status).toBe(true);\ntoBe('<button>1</button>');\n\n\t// Remove the component from the DOM\n\tfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component);\n});function flushSync<T = void>(fn?: (() => T) | undefined): Tfunction mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const expect: ExpectStaticconst test: TestAPI// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});type Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypetype Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypetest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst Component: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyprops?: Record<string, any> | undefinedinitial: numberexpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)var document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyElement.innerHTML: stringinnerHTMLJestAssertion<string>.toBe: <string>(expected: string) => voidObject.istoBevar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyParentNode.querySelector<\"button\">(selectors: \"button\"): HTMLButtonElement | null (+4 overloads)HTMLElement.click(): voidHTMLElement.click()flushSync<void>(fn?: (() => void) | undefined): voidexpect<string>(actual: string, message?: string): Assertion<string> (+1 overload)var document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyElement.innerHTML: stringinnerHTMLJestAssertion<string>.toBe: <string>(expected: string) => voidObject.istoBefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\n// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});\n```\n\nExample:\n```text\n// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});\n```\n\nExample:\n```text\ntype Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentType\n```\n\nExample:\n```text\nconst component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nimport { function render<C extends Component<any, any, string> | SvelteComponent<any, any, any>, Q extends Queries = typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>(Component: ComponentImport<C>, options?: ComponentOptions<C>, renderOptions?: RenderOptions<Q>): RenderResult<C, Q>Render a component into the document.\n@template{import('@testing-library/svelte-core/types').Component} C@template{DomTestingLibrary.Queries} [Q=typeof DomTestingLibrary.queries]@paramComponent - The component to render.@paramoptions - Customize how Svelte renders the component.@paramrenderOptions - Customize how Testing Library sets up the document and binds queries.@returnsThe rendered component and bound testing functions.render, const screen: Screen<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>screen } from '@testing-library/svelte';\nimport const userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}userEvent from '@testing-library/user-event';\nimport { const expect: ExpectStaticexpect, const test: TestAPIDefines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test } from 'vitest';\nimport type Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypeComponent from './Component.svelte';\n\ntest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)Defines a test case with a given name and test function. The test function can optionally be configured with test options.\n@paramname - The name of the test or a function that will be used as a test name.@paramoptionsOrFn - Optional. The test options or the test function if no explicit name is provided.@paramoptionsOrTest - Optional. The test function or options, depending on the previous parameters.@throwsError If called inside another test function.@example// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});@example// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});test('Component', async () => {\n\tconst const user: UserEventuser = const userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}userEvent.setup: (options?: Options) => UserEventStart a “session” with userEvent.\nAll APIs returned by this function share an input device state and a default configuration.\nsetup();\n\trender<SvelteComponent<Record<string, any>, any, any>, typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>(Component: ComponentImport<SvelteComponent<Record<string, any>, any, any>>, options?: ComponentOptions<SvelteComponent<Record<string, any>, any, any>> | undefined, renderOptions?: RenderOptions<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")> | undefined): RenderResult<...>Render a component into the document.\n@template{import('@testing-library/svelte-core/types').Component} C@template{DomTestingLibrary.Queries} [Q=typeof DomTestingLibrary.queries]@paramComponent - The component to render.@paramoptions - Customize how Svelte renders the component.@paramrenderOptions - Customize how Testing Library sets up the document and binds queries.@returnsThe rendered component and bound testing functions.render(const Component: LegacyComponentTypeComponent);\n\n\tconst const button: HTMLElementbutton = const screen: Screen<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>screen.getByRole<HTMLElement>(role: ByRoleMatcher, options?: ByRoleOptions | undefined): HTMLElement (+1 overload)getByRole('button');\n\texpect<HTMLElement>(actual: HTMLElement, message?: string): Assertion<HTMLElement> (+1 overload)expect(const button: HTMLElementbutton).toHaveTextContent(0);\n\n\tawait const user: UserEventuser.click: (element: Element) => Promise<void>click(const button: HTMLElementbutton);\n\texpect<HTMLElement>(actual: HTMLElement, message?: string): Assertion<HTMLElement> (+1 overload)expect(const button: HTMLElementbutton).toHaveTextContent(1);\n});function render<C extends Component<any, any, string> | SvelteComponent<any, any, any>, Q extends Queries = typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>(Component: ComponentImport<C>, options?: ComponentOptions<C>, renderOptions?: RenderOptions<Q>): RenderResult<C, Q>const screen: Screen<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>const userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}const userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}const expect: ExpectStaticconst test: TestAPI// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});type Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypetype Component = SvelteComponent<Record<string, any>, any, any>\nconst Component: LegacyComponentTypetest<object>(name: string | Function, fn?: TestFunction<object> | undefined, options?: number): void (+1 overload)// Define a simple test\ntest('should add two numbers', () => {\n  expect(add(1, 2)).toBe(3);\n});// Define a test with options\ntest('should subtract two numbers', { retry: 3 }, () => {\n  expect(subtract(5, 2)).toBe(3);\n});const user: UserEventconst userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}const userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}setup: (options?: Options) => UserEventrender<SvelteComponent<Record<string, any>, any, any>, typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>(Component: ComponentImport<SvelteComponent<Record<string, any>, any, any>>, options?: ComponentOptions<SvelteComponent<Record<string, any>, any, any>> | undefined, renderOptions?: RenderOptions<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")> | undefined): RenderResult<...>const Component: LegacyComponentTypeconst button: HTMLElementconst screen: Screen<typeof import(\".pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/types/queries\")>getByRole<HTMLElement>(role: ByRoleMatcher, options?: ByRoleOptions | undefined): HTMLElement (+1 overload)expect<HTMLElement>(actual: HTMLElement, message?: string): Assertion<HTMLElement> (+1 overload)const button: HTMLElementconst user: UserEventclick: (element: Element) => Promise<void>const button: HTMLElementexpect<HTMLElement>(actual: HTMLElement, message?: string): Assertion<HTMLElement> (+1 overload)const button: HTMLElement\n```\n\nExample:\n```text\nconst userEvent: {\n    readonly setup: typeof setupMain;\n    readonly clear: typeof clear;\n    readonly click: typeof click;\n    readonly copy: typeof copy;\n    readonly cut: typeof cut;\n    readonly dblClick: typeof dblClick;\n    readonly deselectOptions: typeof deselectOptions;\n    readonly hover: typeof hover;\n    readonly keyboard: typeof keyboard;\n    ... 7 more ...;\n    readonly tab: typeof tab;\n}\n```\n\nExample:\n```text\n<script module>\n\timport { defineMeta } from '@storybook/addon-svelte-csf';\n\timport { expect, fn } from 'storybook/test';\n\n\timport LoginForm from './LoginForm.svelte';\n\n\tconst { Story } = defineMeta({\n\t\tcomponent: LoginForm,\n\t\targs: {\n\t\t\t// Pass a mock function to the `onSubmit` prop\n\t\t\tonSubmit: fn(),\n\t\t}\n\t});\n</script>\n\n<Story name=\"Empty Form\" />\n\n<Story\n\tname=\"Filled Form\"\n\tplay={async ({ args, canvas, userEvent }) => {\n\t\t// Simulate a user filling out the form\n\t\tawait userEvent.type(canvas.getByTestId('email'), 'email@provider.com');\n\t\tawait userEvent.type(canvas.getByTestId('password'), 'a-random-password');\n\t\tawait userEvent.click(canvas.getByRole('button'));\n\n\t\t// Run assertions\n\t\tawait expect(args.onSubmit).toHaveBeenCalledTimes(1);\n\t\tawait expect(canvas.getByText('You’re in!')).toBeInTheDocument();\n\t}}\n/>\n```\n\nExample:\n```text\nconst const config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}config = {\n\twebServer: {\n    command: string;\n    port: number;\n}webServer: {\n\t\tcommand: stringcommand: 'npm run build && npm run preview',\n\t\tport: numberport: 4173\n\t},\n\ttestDir: stringtestDir: 'tests',\n\ttestMatch: RegExptestMatch: /(.+\\.)?(test|spec)\\.[jt]s/\n};\n\nexport default const config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}config;const config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}const config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}webServer: {\n    command: string;\n    port: number;\n}webServer: {\n    command: string;\n    port: number;\n}command: stringport: numbertestDir: stringtestMatch: RegExpconst config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}const config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}\n```\n\nExample:\n```text\nconst config: {\n    webServer: {\n        command: string;\n        port: number;\n    };\n    testDir: string;\n    testMatch: RegExp;\n}\n```\n\nExample:\n```text\nwebServer: {\n    command: string;\n    port: number;\n}\n```\n\nExample:\n```text\nimport { import expectexpect, import testtest } from '@playwright/test';\n\nimport testtest('home page has expected h1', async ({ page }) => {\n\tawait page: anypage.goto('/');\n\tawait import expectexpect(page: anypage.locator('h1')).toBeVisible();\n});import expectimport testimport testpage: anyimport expectpage: any\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.187Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":40,"totalLines":1042,"estimatedTokens":11306}}90{"id":"doc-svelte_svelte_docs-018850d2","source":"documentation","title":"svelte • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte","text":"Example:\n```text\nimport {\n\tclass SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>This was the base class for Svelte components in Svelte 4. Svelte 5+ components\nare completely different under the hood. For typing, use Component instead.\nTo instantiate components, use mount instead.\nSee migration guide for more info.\nreferenceSvelteComponent,\n\tclass SvelteComponentTyped<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>@deprecatedUse Component instead. See migration guide for more information.referenceSvelteComponentTyped,\n\tfunction afterUpdate(fn: () => void): voidSchedules a callback to run immediately after the component has been updated.\nThe first time the callback runs will be after the initial onMount.\nIn runes mode use $effect instead.\n@deprecatedUse $effect insteadreferenceafterUpdate,\n\tfunction beforeUpdate(fn: () => void): voidSchedules a callback to run immediately before the component is updated after any state change.\nThe first time the callback runs will be before the initial onMount.\nIn runes mode use $effect.pre instead.\n@deprecatedUse $effect.pre insteadreferencebeforeUpdate,\n\tfunction createContext<T>(): [() => T, (context: T) => T]Returns a [get, set] pair of functions for working with context in a type-safe way.\nget will throw an error if no parent component called set.\n@since5.40.0referencecreateContext,\n\tfunction createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>Creates an event dispatcher that can be used to dispatch component events.\nEvent dispatchers are functions that can take two arguments: name and detail.\nComponent events created with createEventDispatcher create a\nCustomEvent.\nThese events do not bubble.\nThe detail argument corresponds to the CustomEvent.detail\nproperty and can contain any type of data.\nThe event dispatcher can be typed to narrow the allowed event names and the type of the detail argument:\nconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();@deprecatedUse callback props and/or the $host() rune instead — see migration guidereferencecreateEventDispatcher,\n\tfunction createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {\n    render: () => string;\n    setup?: (element: Element) => void | (() => void);\n}): Snippet<Params>Create a snippet programmatically\nreferencecreateRawSnippet,\n\tfunction flushSync<T = void>(fn?: (() => T) | undefined): TSynchronously flush any pending updates.\nReturns void if no callback is provided, otherwise returns the result of calling the callback.\nreferenceflushSync,\n\tfunction fork(fn: () => void): ForkCreates a ‘fork’, in which state changes are evaluated but not applied to the DOM.\nThis is useful for speculatively loading data (for example) when you suspect that\nthe user is about to take some action.\nFrameworks like SvelteKit can use this to preload data when the user touches or\nhovers over a link, making any subsequent navigation feel instantaneous.\nThe fn parameter is a synchronous function that modifies some state. The\nstate changes will be reverted after the fork is initialised, then reapplied\nif and when the fork is eventually committed.\nWhen it becomes clear that a fork will not be committed (e.g. because the\nuser navigated elsewhere), it must be discarded to avoid leaking memory.\n@since5.42referencefork,\n\tfunction getAbortSignal(): AbortSignalReturns an AbortSignal that aborts when the current derived or effect re-runs or is destroyed.\nMust be called while a derived or effect is running.\n<script>\n\timport { getAbortSignal } from 'svelte';\n\n\tlet { id } = $props();\n\n\tasync function getData(id) {\n\t\tconst response = await fetch(`/items/${id}`, {\n\t\t\tsignal: getAbortSignal()\n\t\t});\n\n\t\treturn await response.json();\n\t}\n\n\tconst data = $derived(await getData(id));\n</script>referencegetAbortSignal,\n\tfunction getAllContexts<T extends Map<any, any> = Map<any, any>>(): TRetrieves the whole context map that belongs to the closest parent component.\nMust be called during component initialisation. Useful, for example, if you\nprogrammatically create a component and want to pass the existing context to it.\nreferencegetAllContexts,\n\tfunction getContext<T>(key: any): TRetrieves the context that belongs to the closest parent component with the specified key.\nMust be called during component initialisation.\ncreateContext is a type-safe alternative.\nreferencegetContext,\n\tfunction hasContext(key: any): booleanChecks whether a given key has been set in the context of a parent component.\nMust be called during component initialisation.\nreferencehasContext,\n\tfunction hydratable<T>(key: string, fn: () => T): Treferencehydratable,\n\tfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): ExportsHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component\nreferencehydrate,\n\tfunction mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount,\n\tfunction onDestroy(fn: () => any): voidSchedules a callback to run immediately before the component is unmounted.\nOut of onMount, beforeUpdate, afterUpdate and onDestroy, this is the\nonly one that runs inside a server-side component.\nreferenceonDestroy,\n\tfunction onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount, like $effect, schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike $effect, the provided function only runs once.\nIt must be called during the component’s initialisation (but doesn’t need to live inside the component;\nit can be called from an external module). If a function is returned synchronously from onMount,\nit will be called when the component is unmounted.\nonMount functions do not run during server-side rendering.\nreferenceonMount,\n\tfunction setContext<T>(key: any, context: T): TAssociates an arbitrary context object with the current component and the specified key\nand returns that object. The context is then available to children of the component\n(including slotted content) with getContext.\nLike lifecycle functions, this must be called during component initialisation.\ncreateContext is a type-safe alternative.\nreferencesetContext,\n\tfunction settled(): Promise<void>Returns a promise that resolves once any state changes, and asynchronous work resulting from them,\nhave resolved and the DOM has been updated\n@since5.36referencesettled,\n\tfunction tick(): Promise<void>Returns a promise that resolves once any pending state changes have been applied.\nreferencetick,\n\tfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount,\n\tfunction untrack<T>(fn: () => T): TWhen used inside a $derived or $effect,\nany state read inside fn will not be treated as a dependency.\n$effect(() => {\n  // this will run when `data` changes, but not when `time` changes\n  save(data, {\n\ttimestamp: untrack(() => time)\n  });\n});referenceuntrack\n} from 'svelte';class SvelteComponent<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>Componentmountclass SvelteComponentTyped<Props extends Record<string, any> = Record<string, any>, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>Componentfunction afterUpdate(fn: () => void): voidonMount$effect$effectfunction beforeUpdate(fn: () => void): voidonMount$effect.pre$effect.prefunction createContext<T>(): [() => T, (context: T) => T][get, set]getsetfunction createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>namedetailcreateEventDispatcherdetaildetailconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();const dispatch: anyloaded: nullchange: stringoptional: number | null$host()function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {\n    render: () => string;\n    setup?: (element: Element) => void | (() => void);\n}): Snippet<Params>function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {\n    render: () => string;\n    setup?: (element: Element) => void | (() => void);\n}): Snippet<Params>function flushSync<T = void>(fn?: (() => T) | undefined): Tfunction fork(fn: () => void): Forkfnfunction getAbortSignal(): AbortSignalAbortSignal<script>\n\timport { getAbortSignal } from 'svelte';\n\n\tlet { id } = $props();\n\n\tasync function getData(id) {\n\t\tconst response = await fetch(`/items/${id}`, {\n\t\t\tsignal: getAbortSignal()\n\t\t});\n\n\t\treturn await response.json();\n\t}\n\n\tconst data = $derived(await getData(id));\n</script>function getAllContexts<T extends Map<any, any> = Map<any, any>>(): Tfunction getContext<T>(key: any): TkeycreateContextfunction hasContext(key: any): booleankeyfunction hydratable<T>(key: string, fn: () => T): Tfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exportsfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exportsaccessors: truefunction mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction onDestroy(fn: () => any): voidonMountbeforeUpdateafterUpdateonDestroyfunction onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount$effect$effectonMountonMountfunction setContext<T>(key: any, context: T): TcontextkeygetContextcreateContextfunction settled(): Promise<void>function tick(): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });function untrack<T>(fn: () => T): T$derived$effectfn$effect(() => {\n  // this will run when `data` changes, but not when `time` changes\n  save(data, {\n\ttimestamp: untrack(() => time)\n  });\n});\n```\n\nExample:\n```text\nconst const dispatch: anydispatch = createEventDispatcher<{\n loaded: nullloaded: null; // does not take a detail argument\n change: stringchange: string; // takes a detail argument of type string, which is required\n optional: number | nulloptional: number | null; // takes an optional detail argument of type number\n}>();const dispatch: anyloaded: nullchange: stringoptional: number | null\n```\n\nExample:\n```text\nfunction createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {\n    render: () => string;\n    setup?: (element: Element) => void | (() => void);\n}): Snippet<Params>\n```\n\nExample:\n```text\n<script>\n\timport { getAbortSignal } from 'svelte';\n\n\tlet { id } = $props();\n\n\tasync function getData(id) {\n\t\tconst response = await fetch(`/items/${id}`, {\n\t\t\tsignal: getAbortSignal()\n\t\t});\n\n\t\treturn await response.json();\n\t}\n\n\tconst data = $derived(await getData(id));\n</script>\n```\n\nExample:\n```text\nfunction hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {\n    target: Document | Element | ShadowRoot;\n    props?: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n} : {\n    target: Document | Element | ShadowRoot;\n    props: Props;\n    events?: Record<string, (e: any) => any>;\n    context?: Map<any, any>;\n    intro?: boolean;\n    recover?: boolean;\n    transformError?: (error: unknown) => unknown;\n}): Exports\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\n$effect(() => {\n  // this will run when `data` changes, but not when `time` changes\n  save(data, {\n\ttimestamp: untrack(() => time)\n  });\n});\n```\n\nExample:\n```text\nclass SvelteComponent<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> {…}\n```\n\nExample:\n```text\nstatic element?: typeof HTMLElement;\n```\n\nExample:\n```text\n[prop: string]: any;\n```\n\nExample:\n```text\nconstructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);\n```\n\nExample:\n```text\n$destroy(): void;\n```\n\nExample:\n```text\n$on<K extends Extract<keyof Events, string>>(\n\ttype: K,\n\tcallback: (e: Events[K]) => void\n): () => void;\n```\n\nExample:\n```text\n$set(props: Partial<Props>): void;\n```\n\nExample:\n```text\nclass SvelteComponentTyped<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> extends SvelteComponent<Props, Events, Slots> {}\n```\n\nExample:\n```text\nfunction afterUpdate(fn: () => void): void;\n```\n\nExample:\n```text\nfunction beforeUpdate(fn: () => void): void;\n```\n\nExample:\n```text\nfunction createContext<T>(): [() => T, (context: T) => T];\n```\n\nExample:\n```text\nfunction createEventDispatcher<\n\tEventMap extends Record<string, any> = any\n>(): EventDispatcher<EventMap>;\n```\n\nExample:\n```text\nfunction createRawSnippet<Params extends unknown[]>(\n\tfn: (...params: Getters<Params>) => {\n\t\trender: () => string;\n\t\tsetup?: (element: Element) => void | (() => void);\n\t}\n): Snippet<Params>;\n```\n\nExample:\n```text\nfunction flushSync<T = void>(fn?: (() => T) | undefined): T;\n```\n\nExample:\n```text\nfunction fork(fn: () => void): Fork;\n```\n\nExample:\n```text\nfunction getAbortSignal(): AbortSignal;\n```\n\nExample:\n```text\nfunction getAllContexts<\n\tT extends Map<any, any> = Map<any, any>\n>(): T;\n```\n\nExample:\n```text\nfunction getContext<T>(key: any): T;\n```\n\nExample:\n```text\nfunction hasContext(key: any): boolean;\n```\n\nExample:\n```text\nfunction hydratable<T>(key: string, fn: () => T): T;\n```\n\nExample:\n```text\nfunction hydrate<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: {} extends Props\n\t\t? {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops?: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t\ttransformError?: (error: unknown) => unknown;\n\t\t\t}\n\t\t: {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t\ttransformError?: (error: unknown) => unknown;\n\t\t\t}\n): Exports;\n```\n\nExample:\n```text\nfunction mount<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: MountOptions<Props>\n): Exports;\n```\n\nExample:\n```text\nfunction onDestroy(fn: () => any): void;\n```\n\nExample:\n```text\nfunction onMount<T>(\n\tfn: () =>\n\t\t| NotFunction<T>\n\t\t| Promise<NotFunction<T>>\n\t\t| (() => any)\n): void;\n```\n\nExample:\n```text\nfunction setContext<T>(key: any, context: T): T;\n```\n\nExample:\n```text\nfunction settled(): Promise<void>;\n```\n\nExample:\n```text\nfunction tick(): Promise<void>;\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount, function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody });\n\n// later...\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app, { outro?: boolean | undefinedoutro: true });function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>outro?: boolean | undefined\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nfunction unmount(\n\tcomponent: Record<string, any>,\n\toptions?:\n\t\t| {\n\t\t\t\toutro?: boolean;\n\t\t  }\n\t\t| undefined\n): Promise<void>;\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t// this will run when `data` changes, but not when `time` changes\n\tsave(data, {\n\t\ttimestamp: anytimestamp: untrack(() => time)\n\t});\n});function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));timestamp: any\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\nExample:\n```text\nfunction untrack<T>(fn: () => T): T;\n```\n\nExample:\n```text\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />\n```\n\nExample:\n```text\ninterface Component<\n\tProps extends Record<string, any> = {},\n\tExports extends Record<string, any> = {},\n\tBindings extends keyof Props | '' = string\n> {…}\n```\n\nExample:\n```text\n(\n\tthis: void,\n\tinternals: ComponentInternals,\n\tprops: Props\n): {\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$on?(type: string, callback: (e: any) => void): () => void;\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$set?(props: Partial<Props>): void;\n} & Exports;\n```\n\nExample:\n```text\nelement?: typeof HTMLElement;\n```\n\nExample:\n```text\ninterface ComponentConstructorOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> {…}\n```\n\nExample:\n```text\ntarget: Element | Document | ShadowRoot;\n```\n\nExample:\n```text\nanchor?: Element;\n```\n\nExample:\n```text\nprops?: Props;\n```\n\nExample:\n```text\ncontext?: Map<any, any>;\n```\n\nExample:\n```text\nhydrate?: boolean;\n```\n\nExample:\n```text\nintro?: boolean;\n```\n\nExample:\n```text\nrecover?: boolean;\n```\n\nExample:\n```text\nsync?: boolean;\n```\n\nExample:\n```text\nidPrefix?: string;\n```\n\nExample:\n```text\n$$inline?: boolean;\n```\n\nExample:\n```text\ntransformError?: (error: unknown) => unknown;\n```\n\nExample:\n```text\ntype ComponentEvents<Comp extends SvelteComponent> =\n\tComp extends SvelteComponent<any, infer Events>\n\t\t? Events\n\t\t: never;\n```\n\nExample:\n```text\ntype ComponentInternals = Branded<{}, 'ComponentInternals'>;\n```\n\nExample:\n```text\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: string\n```\n\nExample:\n```text\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };\n```\n\nExample:\n```text\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\nExample:\n```text\ntype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentType\n```\n\nExample:\n```text\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component, type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\nfunction function withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidwithProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent extends interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />Component<any>>(\n\tcomponent: TComponent extends Component<any>component: function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent,\n\tprops: ComponentProps<TComponent>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });ComponentProps<function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidTComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidwithProps(const MyComponent: LegacyComponentTypeMyComponent, { foo: stringfoo: 'bar' });interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypefunction withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />component: TComponent extends Component<any>function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidprops: ComponentProps<TComponent>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps } from 'svelte';\nimport type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeMyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst const props: Record<string, any>props: type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverConvenience type to get the props the given component expects.\nExample: Ensure a variable contains the props expected by MyComponent:\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' }; In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.\nExample: A generic function that accepts some component and infers the type of its props:\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });referenceComponentProps<typeof const MyComponent: LegacyComponentTypeMyComponent> = { foo: stringfoo: 'bar' };type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });type MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypetype MyComponent = SvelteComponent<Record<string, any>, any, any>\nconst MyComponent: LegacyComponentTypeconst props: Record<string, any>type ComponentProps<Comp extends SvelteComponent | Component<any, any>> = Comp extends SvelteComponent<infer Props extends Record<string, any>, any, any> ? Props : Comp extends Component<infer Props extends Record<string, any>, any, string> ? Props : neverMyComponentimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };ComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });const MyComponent: LegacyComponentTypefoo: stringComponentProps<MyComponent>MyComponentimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });function (type parameter) TComponent in withProps<TComponent extends Component<any>>(component: TComponent, props: ComponentProps<TComponent>): voidfunction withProps<LegacyComponentType>(component: LegacyComponentType, props: Record<string, any>): voidconst MyComponent: LegacyComponentTypefoo: string\n```\n\nExample:\n```text\ntype ComponentProps<\n\tComp extends SvelteComponent | Component<any, any>\n> =\n\tComp extends SvelteComponent<infer Props>\n\t\t? Props\n\t\t: Comp extends Component<infer Props, any>\n\t\t\t? Props\n\t\t\t: never;\n```\n\nExample:\n```text\ntype ComponentType<\n\tComp extends SvelteComponent = SvelteComponent\n> = (new (\n\toptions: ComponentConstructorOptions<\n\t\tComp extends SvelteComponent<infer Props>\n\t\t\t? Props\n\t\t\t: Record<string, any>\n\t>\n) => Comp) & {\n\t/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */\n\telement?: typeof HTMLElement;\n};\n```\n\nExample:\n```text\ninterface EventDispatcher<\n\tEventMap extends Record<string, any>\n> {…}\n```\n\nExample:\n```text\n<Type extends keyof EventMap>(\n\t...args: null extends EventMap[Type]\n\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t: undefined extends EventMap[Type]\n\t\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t\t: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]\n): boolean;\n```\n\nExample:\n```text\ninterface Fork {…}\n```\n\nExample:\n```text\ncommit(): Promise<void>;\n```\n\nExample:\n```text\ndiscard(): void;\n```\n\nExample:\n```text\ntype MountOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> = {\n\t/**\n\t * Target element where the component will be mounted.\n\t */\n\ttarget: Document | Element | ShadowRoot;\n\t/**\n\t * Optional node inside `target`. When specified, it is used to render the component immediately before it.\n\t */\n\tanchor?: Node;\n\t/**\n\t * Allows the specification of events.\n\t * @deprecated Use callback props instead.\n\t */\n\tevents?: Record<string, (e: any) => any>;\n\t/**\n\t * Can be accessed via `getContext()` at the component level.\n\t */\n\tcontext?: Map<any, any>;\n\t/**\n\t * Whether or not to play transitions on initial render.\n\t * @default true\n\t */\n\tintro?: boolean;\n\t/**\n\t * A function that transforms errors caught by error boundaries before they are passed to the `failed` snippet.\n\t * Defaults to the identity function.\n\t */\n\ttransformError?: (\n\t\terror: unknown\n\t) => unknown | Promise<unknown>;\n} & ({} extends Props\n\t? {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops?: Props;\n\t\t}\n\t: {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops: Props;\n\t\t});\n```\n\nExample:\n```text\nlet { let banner: Snippet<[{\n    text: string;\n}]>banner }: { banner: Snippet<[{\n    text: string;\n}]>banner: type Snippet = /*unresolved*/ anySnippet<[{ text: stringtext: string }]> } = function $props(): any\nnamespace $propsDeclares the props that a component accepts. Example:\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see{@link https://svelte.dev/docs/svelte/$props Documentation}$props();let banner: Snippet<[{\n    text: string;\n}]>let banner: Snippet<[{\n    text: string;\n}]>banner: Snippet<[{\n    text: string;\n}]>banner: Snippet<[{\n    text: string;\n}]>type Snippet = /*unresolved*/ anytext: stringfunction $props(): any\nnamespace $propsfunction $props(): any\nnamespace $propslet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\nlet banner: Snippet<[{\n    text: string;\n}]>\n```\n\nExample:\n```text\nbanner: Snippet<[{\n    text: string;\n}]>\n```\n\nExample:\n```text\nfunction $props(): any\nnamespace $props\n```\n\nExample:\n```text\nlet { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();\n```\n\nExample:\n```text\ninterface Snippet<Parameters extends unknown[] = []> {…}\n```\n\nExample:\n```text\n(\n\tthis: void,\n\t// this conditional allows tuples but not arrays. Arrays would indicate a\n\t// rest parameter type, which is not supported. If rest parameters are added\n\t// in the future, the condition can be removed.\n\t...args: number extends Parameters['length'] ? never : Parameters\n): {\n\t'{@render ...} must be called with a Snippet': \"import type { Snippet } from 'svelte'\";\n} & typeof SnippetReturn;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":83,"totalLines":1287,"estimatedTokens":14002}}91{"id":"doc-compiler_warnings_svelte_docs-e577ae66","source":"documentation","title":"Compiler warnings • Svelte Docs","url":"https://svelte.dev/docs/svelte/compiler-warnings","text":"Example:\n```text\n<!-- svelte-ignore a11y_autofocus -->\n<input autofocus />\n```\n\nExample:\n```text\n<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->\n<div onclick>...</div>\n```\n\nExample:\n```text\nAvoid using accesskey\n```\n\nExample:\n```text\n<!-- A11y: Avoid using accesskey -->\n<div accesskey=\"z\"></div>\n```\n\nExample:\n```text\nAn element with an aria-activedescendant attribute should have a tabindex value\n```\n\nExample:\n```text\n<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->\n<div aria-activedescendant=\"some-id\"></div>\n```\n\nExample:\n```text\n`<%name%>` should not have aria-* attributes\n```\n\nExample:\n```text\n<!-- A11y: <meta> should not have aria-* attributes -->\n<meta aria-hidden=\"false\" />\n```\n\nExample:\n```text\n'%value%' is an invalid value for 'autocomplete' on `<input type=\"%type%\">`\n```\n\nExample:\n```text\nAvoid using autofocus\n```\n\nExample:\n```text\n<!-- A11y: Avoid using autofocus -->\n<input autofocus />\n```\n\nExample:\n```text\nVisible, non-interactive element `<%element%>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate\n```\n\nExample:\n```text\n<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->\n<div onclick={() => {}}></div>\n```\n\nExample:\n```text\nButtons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute\n```\n\nExample:\n```text\nAvoid `<%name%>` elements\n```\n\nExample:\n```text\n<!-- A11y: Avoid <marquee> elements -->\n<marquee></marquee>\n```\n\nExample:\n```text\n`<figcaption>` must be first or last child of `<figure>`\n```\n\nExample:\n```text\n`<figcaption>` must be an immediate child of `<figure>`\n```\n\nExample:\n```text\n<!-- A11y: <figcaption> must be an immediate child of <figure> -->\n<div>\n\t<figcaption>Image caption</figcaption>\n</div>\n```\n\nExample:\n```text\n`<%name%>` element should not be hidden\n```\n\nExample:\n```text\n<!-- A11y: <h2> element should not be hidden -->\n<h2 aria-hidden=\"true\">invisible header</h2>\n```\n\nExample:\n```text\nScreenreaders already announce `<img>` elements as an image\n```\n\nExample:\n```text\n<img src=\"foo\" alt=\"Foo eating a sandwich.\" />\n\n<!-- aria-hidden, won't be announced by screen reader -->\n<img src=\"bar\" aria-hidden=\"true\" alt=\"Picture of me taking a photo of an image\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Photo of foo being weird.\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"bar\" alt=\"Image of me at a bar!\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Picture of baz fixing a bug.\" />\n```\n\nExample:\n```text\nThe value of '%attribute%' must be a %type%\n```\n\nExample:\n```text\n<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->\n<div aria-hidden=\"yes\"></div>\n```\n\nExample:\n```text\nThe value of '%attribute%' must be either 'true' or 'false'. It cannot be empty\n```\n\nExample:\n```text\nThe value of '%attribute%' must be a string that represents a DOM element ID\n```\n\nExample:\n```text\nThe value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs\n```\n\nExample:\n```text\nThe value of '%attribute%' must be an integer\n```\n\nExample:\n```text\nThe value of '%attribute%' must be exactly one of %values%\n```\n\nExample:\n```text\nThe value of '%attribute%' must be a space-separated list of one or more of %values%\n```\n\nExample:\n```text\nThe value of '%attribute%' must be exactly one of true, false, or mixed\n```\n\nExample:\n```text\nElements with the '%role%' interactive role must have a tabindex value\n```\n\nExample:\n```text\n<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->\n<div role=\"button\" onkeypress={() => {}} />\n```\n\nExample:\n```text\n'%href_value%' is not a valid %href_attribute% attribute\n```\n\nExample:\n```text\n<!-- A11y: '' is not a valid href attribute -->\n<a href=\"\">invalid</a>\n```\n\nExample:\n```text\nA form label must be associated with a control\n```\n\nExample:\n```text\n<label for=\"id\">B</label>\n\n<label>C <input type=\"text\" /></label>\n\n<!-- A11y: A form label must be associated with a control. -->\n<label>A</label>\n```\n\nExample:\n```text\n`<video>` elements must have a `<track kind=\"captions\">`\n```\n\nExample:\n```text\n<video><track kind=\"captions\" /></video>\n\n<audio muted></audio>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video></video>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video><track /></video>\n```\n\nExample:\n```text\n`<%name%>` should not have role attribute\n```\n\nExample:\n```text\n<!-- A11y: <meta> should not have role attribute -->\n<meta role=\"tooltip\" />\n```\n\nExample:\n```text\nThe scope attribute should only be used with `<th>` elements\n```\n\nExample:\n```text\n<!-- A11y: The scope attribute should only be used with <th> elements -->\n<div scope=\"row\" />\n```\n\nExample:\n```text\n`<%name%>` element should have %article% %sequence% attribute\n```\n\nExample:\n```text\n<!-- A11y: <input type=\\\"image\\\"> element should have an alt, aria-label or aria-labelledby attribute -->\n<input type=\"image\" />\n\n<!-- A11y: <html> element should have a lang attribute -->\n<html></html>\n\n<!-- A11y: <a> element should have an href attribute -->\n<a>text</a>\n```\n\nExample:\n```text\n`<%name%>` element should contain text\n```\n\nExample:\n```text\n<!-- A11y: <a> element should have child content -->\n<a href=\"/foo\"></a>\n\n<!-- A11y: <h1> element should have child content -->\n<h1></h1>\n```\n\nExample:\n```text\n'%event%' event must be accompanied by '%accompanied_by%' event\n```\n\nExample:\n```text\n<!-- A11y: onmouseover must be accompanied by onfocus -->\n<div onmouseover={handleMouseover} />\n\n<!-- A11y: onmouseout must be accompanied by onblur -->\n<div onmouseout={handleMouseout} />\n```\n\nExample:\n```text\nAbstract role '%role%' is forbidden\n```\n\nExample:\n```text\n`<%element%>` cannot have role '%role%'\n```\n\nExample:\n```text\n<!-- A11y: <textarea> cannot have role 'listitem' -->\n<textarea role=\"listitem\"></textarea>\n```\n\nExample:\n```text\nNon-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners\n```\n\nExample:\n```text\n<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->\n<li onclick={() => {}}></li>\n\n<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->\n<div role=\"listitem\" onclick={() => {}}></div>\n```\n\nExample:\n```text\nNon-interactive element `<%element%>` cannot have interactive role '%role%'\n```\n\nExample:\n```text\n<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->\n<h3 role=\"searchbox\">Button</h3>\n```\n\nExample:\n```text\nnoninteractive element cannot have nonnegative tabIndex value\n```\n\nExample:\n```text\n<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->\n<div tabindex=\"0\"></div>\n```\n\nExample:\n```text\nRedundant role '%role%'\n```\n\nExample:\n```text\n<!-- A11y: Redundant role 'button' -->\n<button role=\"button\">...</button>\n\n<!-- A11y: Redundant role 'img' -->\n<img role=\"img\" src=\"foo.jpg\" />\n```\n\nExample:\n```text\n`<%element%>` with a %handler% handler must have an ARIA role\n```\n\nExample:\n```text\n<!-- A11y: <div> with click handler must have an ARIA role -->\n<div onclick={() => ''}></div>\n```\n\nExample:\n```text\nAvoid tabindex values above zero\n```\n\nExample:\n```text\n<!-- A11y: avoid tabindex values above zero -->\n<div tabindex=\"1\"></div>\n```\n\nExample:\n```text\nElements with the ARIA role \"%role%\" must have the following attributes defined: %props%\n```\n\nExample:\n```text\n<!-- A11y: A11y: Elements with the ARIA role \"checkbox\" must have the following attributes defined: \"aria-checked\" -->\n<span role=\"checkbox\" aria-labelledby=\"foo\" tabindex=\"0\"></span>\n```\n\nExample:\n```text\nThe attribute '%attribute%' is not supported by the role '%role%'\n```\n\nExample:\n```text\n<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->\n<div role=\"link\" aria-multiline></div>\n\n<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->\n<li aria-required></li>\n```\n\nExample:\n```text\nThe attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`\n```\n\nExample:\n```text\nUnknown aria attribute 'aria-%attribute%'\n```\n\nExample:\n```text\nUnknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?\n```\n\nExample:\n```text\n<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->\n<input type=\"image\" aria-labeledby=\"foo\" />\n```\n\nExample:\n```text\nUnknown role '%role%'\n```\n\nExample:\n```text\nUnknown role '%role%'. Did you mean '%suggestion%'?\n```\n\nExample:\n```text\n<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->\n<div role=\"toooltip\"></div>\n```\n\nExample:\n```text\nThe \"is\" attribute is not supported cross-browser and should be avoided\n```\n\nExample:\n```text\nYou are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?\n```\n\nExample:\n```text\nAttributes should not contain ':' characters to prevent ambiguity with Svelte directives\n```\n\nExample:\n```text\n'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?\n```\n\nExample:\n```text\nQuoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes\n```\n\nExample:\n```text\nA bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\n```\n\nExample:\n```text\nThe rest operator (...) will create a new object and binding '%name%' with the original object will not work\n```\n\nExample:\n```text\nEmpty block\n```\n\nExample:\n```text\n`<%name%>` will be treated as an HTML element unless it begins with a capital letter\n```\n\nExample:\n```text\nUnused CSS selector \"%name%\"\n```\n\nExample:\n```text\n<div class=\"post\">{@html content}</div>\n\n<style>\n  .post :global {\n\tp {...}\n  }\n</style>\n```\n\nExample:\n```text\nUsing a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.\n```\n\nExample:\n```text\nThis element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.\n```\n\nExample:\n```text\n<!-- this HTML... -->\n<p><p>hello</p>\n\n<!-- results in this DOM structure -->\n<p></p>\n<p>hello</p>\n```\n\nExample:\n```text\nSelf-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`\n```\n\nExample:\n```text\n<div>\n\t<span class=\"icon\" /> some text!\n</div>\n```\n\nExample:\n```text\n<div>\n\t<span class=\"icon\"> some text! </span>\n</div>\n```\n\nExample:\n```text\nnpx sv migrate self-closing-tags\n```\n\nExample:\n```text\nUsing `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead\n```\n\nExample:\n```text\nComponent has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`\n```\n\nExample:\n```text\n`%code%` is no longer valid — please use `%suggestion%` instead\n```\n\nExample:\n```text\nSvelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.\n```\n\nExample:\n```text\n%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning\n```\n\nExample:\n```text\n`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates\n```\n\nExample:\n```text\n<script>\n\tlet reactive = $state('reactive');\n\tlet stale = 'stale';\n</script>\n\n<p>This value updates: {reactive}</p>\n<p>This value does not update: {stale}</p>\n\n<button onclick={() => {\n\tstale = 'updated';\n\treactive = 'updated';\n}}>update</button>\n```\n\nExample:\n```text\nThe `accessors` option has been deprecated. It will have no effect in runes mode\n```\n\nExample:\n```text\nThe `immutable` option has been deprecated. It will have no effect in runes mode\n```\n\nExample:\n```text\nThe `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?\n```\n\nExample:\n```text\nThe `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them\n```\n\nExample:\n```text\nThe `hydratable` option has been removed. Svelte components are always hydratable now\n```\n\nExample:\n```text\nThe `loopGuardTimeout` option has been removed\n```\n\nExample:\n```text\n`generate: \"dom\"` and `generate: \"ssr\"` options have been renamed to \"client\" and \"server\" respectively\n```\n\nExample:\n```text\nAvoid 'new class' — instead, declare the class at the top level scope\n```\n\nExample:\n```text\nAvoid declaring classes below the top level scope\n```\n\nExample:\n```text\nReactive declarations only exist at the top level of the instance script\n```\n\nExample:\n```text\nReassignments of module-level declarations will not cause reactive statements to update\n```\n\nExample:\n```text\n`context=\"module\"` is deprecated, use the `module` attribute instead\n```\n\nExample:\n```text\n<script context=\"module\" module>\n\tlet foo = 'bar';\n</script>\n```\n\nExample:\n```text\nUnrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it\n```\n\nExample:\n```text\nUsing `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead\n```\n\nExample:\n```text\nThis reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?\n```\n\nExample:\n```text\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\n\t// warning: state_referenced_locally\n\tsetContext('count', count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\n\t// warning: state_referenced_locally\n\tsetContext('count', count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\nExample:\n```text\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will never update -->\n<p>The count is {count}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will never update -->\n<p>The count is {count}</p>\n```\n\nExample:\n```text\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\tsetContext('count', () => count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\tsetContext('count', () => count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\nExample:\n```text\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will update -->\n<p>The count is {count()}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will update -->\n<p>The count is {count()}</p>\n```\n\nExample:\n```text\nIt looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity\n```\n\nExample:\n```text\n`<svelte:component>` is deprecated in runes mode — components are dynamic by default\n```\n\nExample:\n```text\n{#each items as item}\n\t<svelte:component this={item.condition ? Y : Z} />\n\t{@const Component = item.condition ? Y : Z}\n\t<Component />\n{/each}\n```\n\nExample:\n```text\n<script>\n\t// ...\n\tlet condition = $state(false);\n\tconst Component = $derived(condition ? Y : Z);\n</script>\n\n<svelte:component this={condition ? Y : Z} />\n<Component />\n```\n\nExample:\n```text\n`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte\n```\n\nExample:\n```text\n`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead\n```\n\nExample:\n```text\n`%code%` is not a recognised code\n```\n\nExample:\n```text\n`%code%` is not a recognised code (did you mean `%suggestion%`?)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":133,"totalLines":850,"estimatedTokens":4187}}92{"id":"doc-svelte_reactivity_svelte_docs-e57358bd","source":"documentation","title":"svelte/reactivity • Svelte Docs","url":"https://svelte.dev/docs/svelte/svelte-reactivity","text":"Example:\n```text\nimport {\n\tclass MediaQueryCreates a media query and provides a current property that reflects whether or not it matches.\nUse it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.\nIf you can use the media query in CSS to achieve the same effect, do that.\n<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>@extendsReactiveValue<boolean> *@since5.7.0referenceMediaQuery,\n\tclass SvelteDateA reactive version of the built-in Date object.\nReading the date (whether with methods like date.getTime() or date.toString(), or via things like Intl.DateTimeFormat)\nin an effect or derived\nwill cause it to be re-evaluated when the value of the date changes.\n<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>referenceSvelteDate,\n\tclass SvelteMap<K, V>A reactive version of the built-in Map object.\nReading contents of the map (by iterating, or by reading map.size or calling map.get(...) or map.has(...) as in the tic-tac-toe example below) in an effect or derived\nwill cause it to be re-evaluated as necessary when the map is updated.\nNote that values in a reactive map are not made deeply reactive.\n<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}referenceSvelteMap,\n\tclass SvelteSet<T>A reactive version of the built-in Set object.\nReading contents of the set (by iterating, or by reading set.size or calling set.has(...) as in the example below) in an effect or derived\nwill cause it to be re-evaluated as necessary when the set is updated.\nNote that values in a reactive set are not made deeply reactive.\n<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}referenceSvelteSet,\n\tclass SvelteURLA reactive version of the built-in URL object.\nReading properties of the URL (such as url.href or url.pathname) in an effect or derived\nwill cause it to be re-evaluated as necessary when the URL changes.\nThe searchParams property is an instance of SvelteURLSearchParams.\nExample:\n<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />referenceSvelteURL,\n\tclass SvelteURLSearchParamsA reactive version of the built-in URLSearchParams object.\nReading its contents (by iterating, or by calling params.get(...) or params.getAll(...) as in the example below) in an effect or derived\nwill cause it to be re-evaluated as necessary when the params are updated.\n<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}referenceSvelteURLSearchParams,\n\tfunction createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that integrates external event-based systems with Svelte’s reactivity.\nIt’s particularly useful for integrating with web APIs like MediaQuery, IntersectionObserver, or WebSocket.\nIf subscribe is called inside an effect (including indirectly, for example inside a getter),\nthe start callback will be called with an update function. Whenever update is called, the effect re-runs.\nIf start returns a cleanup function, it will be called when the effect is destroyed.\nIf subscribe is called in multiple effects, start will only be called once as long as the effects\nare active, and the returned teardown function will only be called when all effects are destroyed.\nIt’s best understood with an example. Here’s an implementation of MediaQuery:\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}@since5.7.0referencecreateSubscriber\n} from 'svelte/reactivity';class MediaQuerycurrent<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>class SvelteDateDatedate.getTime()date.toString()Intl.DateTimeFormat<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>class SvelteMap<K, V>Mapmap.sizemap.get(...)map.has(...)<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}class SvelteSet<T>Setset.sizeset.has(...)<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}class SvelteURLURLurl.hrefurl.pathnamesearchParams<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />class SvelteURLSearchParamsURLSearchParamsparams.get(...)params.getAll(...)<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidsubscribeMediaQueryIntersectionObserverWebSocketsubscribestartupdateupdatestartsubscribestartMediaQueryimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}\n```\n\nExample:\n```text\n<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>\n```\n\nExample:\n```text\n<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>\n```\n\nExample:\n```text\n<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}\n```\n\nExample:\n```text\n<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />\n```\n\nExample:\n```text\n<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}\n```\n\nExample:\n```text\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}\n```\n\nExample:\n```text\nclass MediaQuery extends ReactiveValue<boolean> {…}\n```\n\nExample:\n```text\nconstructor(query: string, fallback?: boolean | undefined);\n```\n\nExample:\n```text\nclass SvelteDate extends Date {…}\n```\n\nExample:\n```text\nconstructor(...params: any[]);\n```\n\nExample:\n```text\nclass SvelteMap<K, V> extends Map<K, V> {…}\n```\n\nExample:\n```text\nconstructor(value?: Iterable<readonly [K, V]> | null | undefined);\n```\n\nExample:\n```text\nset(key: K, value: V): this;\n```\n\nExample:\n```text\nclass SvelteSet<T> extends Set<T> {…}\n```\n\nExample:\n```text\nconstructor(value?: Iterable<T> | null | undefined);\n```\n\nExample:\n```text\nadd(value: T): this;\n```\n\nExample:\n```text\nclass SvelteURL extends URL {…}\n```\n\nExample:\n```text\nget searchParams(): SvelteURLSearchParams;\n```\n\nExample:\n```text\nclass SvelteURLSearchParams extends URLSearchParams {…}\n```\n\nExample:\n```text\n[REPLACE](params: URLSearchParams): void;\n```\n\nExample:\n```text\nimport { function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that integrates external event-based systems with Svelte’s reactivity.\nIt’s particularly useful for integrating with web APIs like MediaQuery, IntersectionObserver, or WebSocket.\nIf subscribe is called inside an effect (including indirectly, for example inside a getter),\nthe start callback will be called with an update function. Whenever update is called, the effect re-runs.\nIf start returns a cleanup function, it will be called when the effect is destroyed.\nIf subscribe is called in multiple effects, start will only be called once as long as the effects\nare active, and the returned teardown function will only be called when all effects are destroyed.\nIt’s best understood with an example. Here’s an implementation of MediaQuery:\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}@since5.7.0referencecreateSubscriber } from 'svelte/reactivity';\nimport { function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)Attaches an event handler to the window and returns a function that removes the handler. Using this\nrather than addEventListener will preserve the correct order relative to handlers added declaratively\n(with attributes like onclick), which use event delegation for performance reasons\nreferenceon } from 'svelte/events';\n\nexport class class MediaQueryMediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query: anyquery) {\n\t\tthis.#query = var window: Window & typeof globalThisThe window property of a Window object points to the window object itself.\nMDN Reference\nwindow.function matchMedia(query: string): MediaQueryListThe Window interface’s matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.\nMDN Reference\nmatchMedia(`(${query: anyquery})`);\n\n\t\tthis.#subscribe = function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidReturns a subscribe function that integrates external event-based systems with Svelte’s reactivity.\nIt’s particularly useful for integrating with web APIs like MediaQuery, IntersectionObserver, or WebSocket.\nIf subscribe is called inside an effect (including indirectly, for example inside a getter),\nthe start callback will be called with an update function. Whenever update is called, the effect re-runs.\nIf start returns a cleanup function, it will be called when the effect is destroyed.\nIf subscribe is called in multiple effects, start will only be called once as long as the effects\nare active, and the returned teardown function will only be called when all effects are destroyed.\nIt’s best understood with an example. Here’s an implementation of MediaQuery:\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}@since5.7.0referencecreateSubscriber((update: () => voidupdate) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst const off: () => voidoff = on<MediaQueryList, \"change\">(element: MediaQueryList, type: \"change\", handler: (this: MediaQueryList, event: MediaQueryListEvent & {\n    currentTarget: MediaQueryList;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)Attaches an event handler to an element and returns a function that removes the handler. Using this\nrather than addEventListener will preserve the correct order relative to handlers added declaratively\n(with attributes like onclick), which use event delegation for performance reasons\nreferenceon(this.#query, 'change', update: () => voidupdate);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => const off: () => voidoff();\n\t\t});\n\t}\n\n\tget MediaQuery.current: booleancurrent() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.MediaQueryList.matches: booleanThe matches read-only property of the MediaQueryList interface is a boolean value that returns true if the document currently matches the media query list, or false if not.\nMDN Reference\nmatches;\n\t}\n}function createSubscriber(start: (update: () => void) => (() => void) | void): () => voidsubscribeMediaQueryIntersectionObserverWebSocketsubscribestartupdateupdatestartsubscribestartMediaQueryimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)function on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)addEventListeneronclickclass MediaQueryquery: anyvar window: Window & typeof globalThiswindowfunction matchMedia(query: string): MediaQueryListmatchMedia()query: anyfunction createSubscriber(start: (update: () => void) => (() => void) | void): () => voidsubscribeMediaQueryIntersectionObserverWebSocketsubscribestartupdateupdatestartsubscribestartMediaQueryimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}update: () => voidconst off: () => voidon<MediaQueryList, \"change\">(element: MediaQueryList, type: \"change\", handler: (this: MediaQueryList, event: MediaQueryListEvent & {\n    currentTarget: MediaQueryList;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)on<MediaQueryList, \"change\">(element: MediaQueryList, type: \"change\", handler: (this: MediaQueryList, event: MediaQueryListEvent & {\n    currentTarget: MediaQueryList;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)addEventListeneronclickupdate: () => voidconst off: () => voidMediaQuery.current: booleanMediaQueryList.matches: booleanmatches\n```\n\nExample:\n```text\nfunction on<Type extends keyof WindowEventMap>(window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type] & {\n    currentTarget: Window;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)\n```\n\nExample:\n```text\non<MediaQueryList, \"change\">(element: MediaQueryList, type: \"change\", handler: (this: MediaQueryList, event: MediaQueryListEvent & {\n    currentTarget: MediaQueryList;\n}) => any, options?: AddEventListenerOptions | undefined): () => void (+4 overloads)\n```\n\nExample:\n```text\nfunction createSubscriber(\n\tstart: (update: () => void) => (() => void) | void\n): () => void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":757,"estimatedTokens":5930}}93{"id":"doc-runtime_errors_svelte_docs-cdcb7752","source":"documentation","title":"Runtime errors • Svelte Docs","url":"https://svelte.dev/docs/svelte/runtime-errors","text":"Example:\n```text\nCannot create a `$derived(...)` with an `await` expression outside of an effect tree\n```\n\nExample:\n```text\nUsing `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead\n```\n\nExample:\n```text\nComponent %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)\n```\n\nExample:\n```text\nA component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`\n```\n\nExample:\n```text\nCalling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5\n```\n\nExample:\n```text\nAttempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.\n```\n\nExample:\n```text\nA derived value cannot reference itself recursively\n```\n\nExample:\n```text\nKeyed each block has duplicate key at indexes %a% and %b%\n```\n\nExample:\n```text\nKeyed each block has duplicate key `%value%` at indexes %a% and %b%\n```\n\nExample:\n```text\nKeyed each block has key that is not idempotent — the key for item at index %index% was `%a%` but is now `%b%`. Keys must be the same each time for a given item\n```\n\nExample:\n```text\n`%rune%` cannot be used inside an effect cleanup function\n```\n\nExample:\n```text\nEffect cannot be created inside a `$derived` value that was not itself created inside an effect\n```\n\nExample:\n```text\n`%rune%` can only be used inside an effect (e.g. during component initialisation)\n```\n\nExample:\n```text\n`$effect.pending()` can only be called inside an effect or derived\n```\n\nExample:\n```text\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\n```\n\nExample:\n```text\nlet let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\n\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t// this both reads and writes `count`,\n\t// so will run in an infinite loop\n\tlet count: numbercount += 1;\n});let count: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let count: number\n```\n\nExample:\n```text\nfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect\n```\n\nExample:\n```text\n$effect(() => console.log('The count is now ' + count));\n```\n\nExample:\n```text\nlet let array: string[]array = function $state<string[]>(initial: string[]): string[] (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(['hello']);\n\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\tlet array: string[]array.Array<string>.push(...items: string[]): numberAppends new elements to the end of an array, and returns the new length of the array.\n@paramitems New elements to add to the array.push('goodbye');\n});let array: string[]function $state<string[]>(initial: string[]): string[] (+1 overload)\nnamespace $statefunction $state<string[]>(initial: string[]): string[] (+1 overload)\nnamespace $statelet count = $state(0);function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let array: string[]Array<string>.push(...items: string[]): number\n```\n\nExample:\n```text\nfunction $state<string[]>(initial: string[]): string[] (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nfunction $effect(fn: () => void | (() => void)): void\nnamespace $effectRuns code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values.\nThe timing of the execution is after the DOM has been updated.\nExample:\n$effect(() => console.log('The count is now ' + count));If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.\nDoes not run during server-side rendering.\n@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$effect(() => {\n\t// this is okay, because sorting an already-sorted array\n\t// won't result in a mutation\n\tlet array: string[]array.Array<string>.sort(compareFn?: ((a: string, b: string) => number) | undefined): string[]Sorts an array in place.\nThis method mutates the array and returns a reference to the same array.\n@paramcompareFn Function used to determine the order of the elements. It is expected to return\na negative value if the first argument is less than the second argument, zero if they're equal, and a positive\nvalue otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order.\nts [11,2,22,1].sort((a, b) => a - b) sort();\n});function $effect(fn: () => void | (() => void)): void\nnamespace $effectfunction $effect(fn: () => void | (() => void)): void\nnamespace $effect$state$derived$effect(() => console.log('The count is now ' + count));let array: string[]Array<string>.sort(compareFn?: ((a: string, b: string) => number) | undefined): string[]ts [11,2,22,1].sort((a, b) => a - b)\n```\n\nExample:\n```text\nCannot use `flushSync` inside an effect\n```\n\nExample:\n```text\nCannot commit a fork that was already discarded\n```\n\nExample:\n```text\nCannot create a fork inside an effect or when state changes are pending\n```\n\nExample:\n```text\n`getAbortSignal()` can only be called inside an effect or derived\n```\n\nExample:\n```text\nExpected to find a hydratable with key `%key%` during hydration, but did not.\n```\n\nExample:\n```text\n<script>\n  import { hydratable } from 'svelte';\n\n\tif (BROWSER) {\n\t\t// bad! nothing can become interactive until this asynchronous work is done\n\t\tawait hydratable('foo', get_slow_random_number);\n\t}\n</script>\n```\n\nExample:\n```text\nFailed to hydrate the application\n```\n\nExample:\n```text\nCould not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`\n```\n\nExample:\n```text\n`%name%(...)` cannot be used in runes mode\n```\n\nExample:\n```text\nCannot do `bind:%key%={undefined}` when `%key%` has a fallback value\n```\n\nExample:\n```text\nRest element properties of `$props()` such as `%property%` are readonly\n```\n\nExample:\n```text\nThe `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files\n```\n\nExample:\n```text\n`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression\n```\n\nExample:\n```text\nProperty descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.\n```\n\nExample:\n```text\nCannot set prototype of `$state` object\n```\n\nExample:\n```text\nUpdating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\n\tlet even = $state(true);\n\n\tlet odd = $derived.by(() => {\n\t\teven = count % 2 === 0;\n\t\treturn !even;\n\t});\n</script>\n\n<button onclick={() => count++}>{count}</button>\n\n<p>{count} is even: {even}</p>\n<p>{count} is odd: {odd}</p>\n```\n\nExample:\n```text\nlet let even: booleaneven = function $derived<boolean>(expression: boolean): boolean\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(let count: numbercount % 2 === 0);\nlet let odd: booleanodd = function $derived<boolean>(expression: boolean): boolean\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(!let even: booleaneven);let even: booleanfunction $derived<boolean>(expression: boolean): boolean\nnamespace $derivedfunction $derived<boolean>(expression: boolean): boolean\nnamespace $derived$derived(...)let double = $derived(count * 2);let count: numberlet odd: booleanfunction $derived<boolean>(expression: boolean): boolean\nnamespace $derivedfunction $derived<boolean>(expression: boolean): boolean\nnamespace $derived$derived(...)let double = $derived(count * 2);let even: boolean\n```\n\nExample:\n```text\nfunction $derived<boolean>(expression: boolean): boolean\nnamespace $derived\n```\n\nExample:\n```text\nlet double = $derived(count * 2);\n```\n\nExample:\n```text\nA `<svelte:boundary>` `reset` function cannot be called while an error is still being handled\n```\n\nExample:\n```text\n<svelte:boundary onerror={async (error, reset) => {\n\tfixTheError();\n\tawait tick();\n\treset();\n}}>\n\n</svelte:boundary>\n```\n\nExample:\n```text\nThe node API `AsyncLocalStorage` is not available, but is required to use async server rendering.\n```\n\nExample:\n```text\nEncountered asynchronous work while rendering synchronously.\n```\n\nExample:\n```text\n`<svelte:element this=\"%tag%\">` is not a valid element name — the element will not be rendered\n```\n\nExample:\n```text\nThe `html` property of server render results has been deprecated. Use `body` instead.\n```\n\nExample:\n```text\nAttempted to set `hydratable` with key `%key%` twice with different values.\n\n%stack%\n```\n\nExample:\n```text\n<script>\n  import { hydratable } from 'svelte';\n\n  // which one should \"win\" and be serialized in the rendered response?\n  const one = hydratable('not-unique', () => 1);\n  const two = hydratable('not-unique', () => 2);\n</script>\n```\n\nExample:\n```text\nFailed to serialize `hydratable` data for key `%key%`.\n\n`hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.\n\nCause:\n%stack%\n```\n\nExample:\n```text\n`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.\n```\n\nExample:\n```text\nThe `idPrefix` option cannot include `--`.\n```\n\nExample:\n```text\n`%name%(...)` is not available on the server\n```\n\nExample:\n```text\nCould not resolve `render` context.\n```\n\nExample:\n```text\nCannot use `%name%(...)` unless the `experimental.async` compiler option is `true`\n```\n\nExample:\n```text\nCannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n```\n\nExample:\n```text\n<List {items} let:entry>\n\t<span>{entry}</span>\n</List>\n```\n\nExample:\n```text\n<script>\n\tlet { items, children } = $props();\n</script>\n\n<ul>\n\t{#each items as item}\n\t\t<li>{@render children(item)}</li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { items, children } = $props();\n</script>\n\n<ul>\n\t{#each items as item}\n\t\t<li>{@render children(item)}</li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\nA snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n```\n\nExample:\n```text\nAn invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: \"%message%\"\n```\n\nExample:\n```text\n`%name%(...)` can only be used during component initialisation\n```\n\nExample:\n```text\n<script>\n\timport { onMount } from 'svelte';\n\n\tfunction handleClick() {\n\t\t// This is wrong\n\t\tonMount(() => {})\n\t}\n\n\t// This is correct\n\tonMount(() => {})\n</script>\n\n<button onclick={handleClick}>click me</button>\n```\n\nExample:\n```text\nContext was not set in a parent component\n```\n\nExample:\n```text\nAttempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n{children}\n```\n\nExample:\n```text\n<ChildComponent>\n  {#snippet label()}\n\t<span>Hi!</span>\n  {/snippet}\n</ChildComponent>\n```\n\nExample:\n```text\n<script>\n  let { label } = $props();\n</script>\n\n<!-- This component doesn't expect a snippet, but the parent provided one -->\n<p>{label}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n  let { label } = $props();\n</script>\n\n<!-- This component doesn't expect a snippet, but the parent provided one -->\n<p>{label}</p>\n```\n\nExample:\n```text\n`%name%` is not a store with a `subscribe` method\n```\n\nExample:\n```text\nThe `this` prop on `<svelte:element>` must be a string, if defined\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.195Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":73,"totalLines":525,"estimatedTokens":3647}}94{"id":"doc-compiler_errors_svelte_docs-78ec0bbb","source":"documentation","title":"Compiler errors • Svelte Docs","url":"https://svelte.dev/docs/svelte/compiler-errors","text":"Example:\n```text\nAn element can only have one 'animate' directive\n```\n\nExample:\n```text\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block\n```\n\nExample:\n```text\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?\n```\n\nExample:\n```text\n'contenteditable' attribute cannot be dynamic if element uses two-way binding\n```\n\nExample:\n```text\n'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings\n```\n\nExample:\n```text\nAttributes need to be unique\n```\n\nExample:\n```text\nAttribute shorthand cannot be empty\n```\n\nExample:\n```text\nEvent attribute must be a JavaScript expression, not a string\n```\n\nExample:\n```text\n'multiple' attribute must be static if select uses two-way binding\n```\n\nExample:\n```text\n'%name%' is not a valid attribute name\n```\n\nExample:\n```text\nComma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses\n```\n\nExample:\n```text\n<div class={size, color}>...</div>\n```\n\nExample:\n```text\n<div class={[size, color]}>...</div>\n```\n\nExample:\n```text\n<div class={(size, color)}>...</div>\n```\n\nExample:\n```text\n'type' attribute must be a static text value if input uses two-way binding\n```\n\nExample:\n```text\nAttribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression\n```\n\nExample:\n```text\n`bind:group` can only bind to an Identifier or MemberExpression\n```\n\nExample:\n```text\nCannot `bind:group` to a snippet parameter\n```\n\nExample:\n```text\nCan only bind to an Identifier or MemberExpression or a `{get, set}` pair\n```\n\nExample:\n```text\n`bind:%name%` is not a valid binding\n```\n\nExample:\n```text\n`bind:%name%` is not a valid binding. %explanation%\n```\n\nExample:\n```text\n`bind:%name%={get, set}` must not have surrounding parentheses\n```\n\nExample:\n```text\n`bind:%name%` can only be used with %elements%\n```\n\nExample:\n```text\nCan only bind to state or props\n```\n\nExample:\n```text\n`$bindable()` can only be used inside a `$props()` declaration\n```\n\nExample:\n```text\n%name% cannot appear more than once within a block\n```\n\nExample:\n```text\n{:...} block is invalid at this position (did you forget to close the preceding element or block?)\n```\n\nExample:\n```text\n'elseif' should be 'else if'\n```\n\nExample:\n```text\n{#%name% ...} block cannot be %location%\n```\n\nExample:\n```text\nBlock was left open\n```\n\nExample:\n```text\nExpected a `%character%` character immediately following the opening bracket\n```\n\nExample:\n```text\nUnexpected block closing tag\n```\n\nExample:\n```text\nThis type of directive is not valid on components\n```\n\nExample:\n```text\nCyclical dependency detected: %cycle%\n```\n\nExample:\n```text\n{@const ...} must consist of a single variable declaration\n```\n\nExample:\n```text\n`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`\n```\n\nExample:\n```text\nThe `{@const %name% = ...}` declaration is not available in this snippet\n```\n\nExample:\n```text\n<svelte:boundary>\n\t{@const foo = 'bar'}\n\n\t{#snippet failed()}\n\t\t{foo}\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\n<svelte:boundary>\n\t{#snippet children()}\n\t\t{@const foo = 'bar'}\n\t{/snippet}\n\n\t{#snippet failed()}\n\t\t{foo}\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\n<Component>\n\t{@const foo = 'bar'}\n\n\t{#snippet someProp()}\n\t\t<!-- error -->\n\t\t{foo}\n\t{/snippet}\n</Component>\n```\n\nExample:\n```text\nCannot assign to %thing%\n```\n\nExample:\n```text\nCannot bind to %thing%\n```\n\nExample:\n```text\nDeclaration cannot be empty\n```\n\nExample:\n```text\nExpected a valid CSS identifier\n```\n\nExample:\n```text\nA `:global` selector cannot follow a `%name%` combinator\n```\n\nExample:\n```text\nA top-level `:global {...}` block can only contain rules, not declarations\n```\n\nExample:\n```text\nA `:global` selector cannot be part of a selector list with entries that don't contain `:global`\n```\n\nExample:\n```text\n:global, x {\n\ty {\n\t\tcolor: red;\n\t}\n}\n```\n\nExample:\n```text\n:global {\n\ty {\n\t\tcolor: red;\n\t}\n}\n\nx y {\n\tcolor: red;\n}\n```\n\nExample:\n```text\nA `:global` selector cannot modify an existing selector\n```\n\nExample:\n```text\nA `:global` selector can only be modified if it is a descendant of other selectors\n```\n\nExample:\n```text\nA `:global` selector cannot be inside a pseudoclass\n```\n\nExample:\n```text\n`:global(...)` can be at the start or end of a selector sequence, but not in the middle\n```\n\nExample:\n```text\n`:global(...)` must contain exactly one selector\n```\n\nExample:\n```text\n`:global(...)` must not contain type or universal selectors when used in a compound selector\n```\n\nExample:\n```text\nNesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`\n```\n\nExample:\n```text\nInvalid selector\n```\n\nExample:\n```text\n`:global(...)` must not be followed by a type selector\n```\n\nExample:\n```text\n{@debug ...} arguments must be identifiers, not arbitrary expressions\n```\n\nExample:\n```text\n`%name%` has already been declared\n```\n\nExample:\n```text\nCannot declare a variable with the same name as an import from `<script module>`\n```\n\nExample:\n```text\nDeclaration tags must be `let` or `const` declarations\n```\n\nExample:\n```text\nDeclaration tags cannot be used in legacy mode\n```\n\nExample:\n```text\nCannot export derived state from a module. To expose the current derived value, export a function returning its value\n```\n\nExample:\n```text\nDirective value must be a JavaScript expression enclosed in curly braces\n```\n\nExample:\n```text\n`%type%` name cannot be empty\n```\n\nExample:\n```text\nThe $ name is reserved, and cannot be used for variables and imports\n```\n\nExample:\n```text\nThe $ prefix is reserved, and cannot be used for variables and imports\n```\n\nExample:\n```text\nCannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)\n```\n\nExample:\n```text\n<script>\n\tlet array = [1, 2, 3];\n</script>\n\n{#each array as entry}\n\t<!-- reassignment -->\n\t<button on:click={() => entry = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={entry}>\n{/each}\n```\n\nExample:\n```text\n<script>\n\tlet array = $state([1, 2, 3]);\n</script>\n\n{#each array as entry, i}\n\t<!-- reassignment -->\n\t<button onclick={() => array[i] = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={array[i]}>\n{/each}\n```\n\nExample:\n```text\nAn `{#each ...}` block without an `as` clause cannot have a key\n```\n\nExample:\n```text\n`$effect()` can only be used as an expression statement\n```\n\nExample:\n```text\n`</%name%>` attempted to close an element that was not open\n```\n\nExample:\n```text\n`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)\n```\n\nExample:\n```text\n`<%name%>` was left open\n```\n\nExample:\n```text\nEvent modifiers other than 'once' can only be used on DOM elements\n```\n\nExample:\n```text\nValid event modifiers are %list%\n```\n\nExample:\n```text\nThe '%modifier1%' and '%modifier2%' modifiers cannot be used together\n```\n\nExample:\n```text\nExpected attribute value\n```\n\nExample:\n```text\nExpected 'if', 'each', 'await', 'key' or 'snippet'\n```\n\nExample:\n```text\nExpected an identifier\n```\n\nExample:\n```text\nExpected identifier or destructure pattern\n```\n\nExample:\n```text\nExpected 'html', 'render', 'attach', 'const', or 'debug'\n```\n\nExample:\n```text\nExpected token %token%\n```\n\nExample:\n```text\nExpected whitespace\n```\n\nExample:\n```text\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`\n```\n\nExample:\n```text\n`%name%` is not defined\n```\n\nExample:\n```text\n`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`\n```\n\nExample:\n```text\n`$host()` can only be used inside custom element component instances\n```\n\nExample:\n```text\n`use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions\n```\n\nExample:\n```text\n`<%name%>` does not support non-event attributes or spread attributes\n```\n\nExample:\n```text\nImports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\n```\n\nExample:\n```text\n`$inspect.trace(...)` cannot be used inside a generator function\n```\n\nExample:\n```text\n`$inspect.trace(...)` must be the first statement of a function body\n```\n\nExample:\n```text\nThe arguments keyword cannot be used within the template or at the top level of a component\n```\n\nExample:\n```text\n%message%\n```\n\nExample:\n```text\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode\n```\n\nExample:\n```text\nCannot use `export let` in runes mode — use `$props()` instead\n```\n\nExample:\n```text\nCannot use `$$props` in runes mode\n```\n\nExample:\n```text\n`$:` is not allowed in runes mode, use `$derived` or `$effect` instead\n```\n\nExample:\n```text\nCannot use `$$restProps` in runes mode\n```\n\nExample:\n```text\n`let:` directive at invalid position\n```\n\nExample:\n```text\nMixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax\n```\n\nExample:\n```text\nA component cannot have a default export\n```\n\nExample:\n```text\n%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.\n```\n\nExample:\n```text\nInvalid compiler option: %details%\n```\n\nExample:\n```text\nUnrecognised compiler option %keypath%\n```\n\nExample:\n```text\nCannot use `%rune%()` more than once\n```\n\nExample:\n```text\n`$props.id()` can only be used at the top level of components as a variable declaration initializer\n```\n\nExample:\n```text\nDeclaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)\n```\n\nExample:\n```text\n`$props()` can only be used with an object destructuring pattern\n```\n\nExample:\n```text\n`$props()` assignment must not contain nested properties or computed keys\n```\n\nExample:\n```text\n`$props()` can only be used at the top level of components as a variable declaration initializer\n```\n\nExample:\n```text\nCalling a snippet function using apply, bind or call is not allowed\n```\n\nExample:\n```text\n`{@render ...}` tags can only contain call expressions\n```\n\nExample:\n```text\ncannot use spread arguments in `{@render ...}` tags\n```\n\nExample:\n```text\n`%rune%` cannot be called with arguments\n```\n\nExample:\n```text\n`%rune%` must be called with %args%\n```\n\nExample:\n```text\nCannot access a computed property of a rune\n```\n\nExample:\n```text\n`%name%` is not a valid rune\n```\n\nExample:\n```text\n`%rune%` cannot be called with a spread argument\n```\n\nExample:\n```text\nCannot use `%rune%` rune in non-runes mode\n```\n\nExample:\n```text\nCannot use rune without parentheses\n```\n\nExample:\n```text\nThe `%name%` rune has been removed\n```\n\nExample:\n```text\n`%name%` is now `%replacement%`\n```\n\nExample:\n```text\n%name% cannot be used in runes mode\n```\n\nExample:\n```text\nA component can have a single top-level `<script>` element and/or a single top-level `<script module>` element\n```\n\nExample:\n```text\nIf the `%name%` attribute is supplied, it must be a boolean attribute\n```\n\nExample:\n```text\nIf the context attribute is supplied, its value must be \"module\"\n```\n\nExample:\n```text\nThe `%name%` attribute is reserved and cannot be used\n```\n\nExample:\n```text\nDuplicate slot name '%name%' in <%component%>\n```\n\nExample:\n```text\nslot attribute must be a static value\n```\n\nExample:\n```text\nElement with a slot='...' attribute must be a child of a component or a descendant of a custom element\n```\n\nExample:\n```text\nFound default slot content alongside an explicit slot=\"default\"\n```\n\nExample:\n```text\n`<slot>` can only receive attributes and (optionally) let directives\n```\n\nExample:\n```text\n`default` is a reserved word — it cannot be used as a slot name\n```\n\nExample:\n```text\nCannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely\n```\n\nExample:\n```text\nCannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block\n```\n\nExample:\n```text\nAn exported snippet can only reference things declared in a `<script module>`, or other exportable snippets\n```\n\nExample:\n```text\n<script module>\n\texport { greeting };\n</script>\n\n<script>\n\tlet message = 'hello';\n</script>\n\n{#snippet greeting(name)}\n\t<p>{message} {name}!</p>\n{/snippet}\n```\n\nExample:\n```text\nSnippets do not support rest parameters; use an array instead\n```\n\nExample:\n```text\nCannot reassign or bind to snippet parameter\n```\n\nExample:\n```text\nThis snippet is shadowing the prop `%prop%` with the same name\n```\n\nExample:\n```text\n`%name%` has already been declared on this class\n```\n\nExample:\n```text\nclass class CounterCounter {\n\tCounter.count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\n}class CounterCounter.count: numberfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nclass class CounterCounter {\n\tconstructor() {\n\t\tthis.Counter.count: anycount = function $state<0>(initial: 0): 0 (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(0);\n\t}\n}class CounterCounter.count: anyfunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statefunction $state<0>(initial: 0): 0 (+1 overload)\nnamespace $statelet count = $state(0);\n```\n\nExample:\n```text\nCannot assign to a state field before its declaration\n```\n\nExample:\n```text\nCannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties\n```\n\nExample:\n```text\n`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.\n```\n\nExample:\n```text\nCannot subscribe to stores that are not declared at the top level of the component\n```\n\nExample:\n```text\nCannot reference store value inside `<script module>`\n```\n\nExample:\n```text\nCannot reference store value outside a `.svelte` file\n```\n\nExample:\n```text\n`style:` directive can only use the `important` modifier\n```\n\nExample:\n```text\nA component can have a single top-level `<style>` element\n```\n\nExample:\n```text\n`<svelte:body>` does not support non-event attributes or spread attributes\n```\n\nExample:\n```text\nValid attributes on `<svelte:boundary>` are `onerror` and `failed`\n```\n\nExample:\n```text\nAttribute value must be a non-string expression\n```\n\nExample:\n```text\nInvalid component definition — must be an `{expression}`\n```\n\nExample:\n```text\n`<svelte:component>` must have a 'this' attribute\n```\n\nExample:\n```text\n`<svelte:element>` must have a 'this' attribute with a value\n```\n\nExample:\n```text\n`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive\n```\n\nExample:\n```text\n`<svelte:fragment>` must be the direct child of a component\n```\n\nExample:\n```text\n`<svelte:head>` cannot have attributes nor directives\n```\n\nExample:\n```text\nA component can only have one `<%name%>` element\n```\n\nExample:\n```text\n<%name%> cannot have children\n```\n\nExample:\n```text\n`<%name%>` tags cannot be inside elements or blocks\n```\n\nExample:\n```text\nValid `<svelte:...>` tag names are %list%\n```\n\nExample:\n```text\n\"tag\" option is deprecated — use \"customElement\" instead\n```\n\nExample:\n```text\n`<svelte:options>` can only receive static attributes\n```\n\nExample:\n```text\nValue must be %list%, if specified\n```\n\nExample:\n```text\n\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\n```\n\nExample:\n```text\n\"props\" must be a statically analyzable object literal of the form \"{ [key: string]: { attribute?: string; reflect?: boolean; type?: \"String\" | \"Boolean\" | \"Number\" | \"Array\" | \"Object\" }\"\n```\n\nExample:\n```text\n\"shadow\" must be either \"open\", \"none\" or `ShadowRootInit` object.\n```\n\nExample:\n```text\nTag name must be lowercase and hyphenated\n```\n\nExample:\n```text\nTag name is reserved\n```\n\nExample:\n```text\n`<svelte:options>` unknown attribute '%name%'\n```\n\nExample:\n```text\n`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components\n```\n\nExample:\n```text\nExpected a valid element or component name. Components must have a valid variable name or dot notation expression\n```\n\nExample:\n```text\n{@%name% ...} tag cannot be %location%\n```\n\nExample:\n```text\nA `<textarea>` can have either a value attribute or (equivalently) child content, but not both\n```\n\nExample:\n```text\n`<title>` cannot have attributes nor directives\n```\n\nExample:\n```text\n`<title>` can only contain text and {tags}\n```\n\nExample:\n```text\nCannot use `%type%:` alongside existing `%existing%:` directive\n```\n\nExample:\n```text\nCannot use multiple `%type%:` directives on a single element\n```\n\nExample:\n```text\nTypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)\n```\n\nExample:\n```text\nUnexpected end of input\n```\n\nExample:\n```text\n'%word%' is a reserved word in JavaScript and cannot be used here\n```\n\nExample:\n```text\nUnterminated string constant\n```\n\nExample:\n```text\nVoid elements cannot have children or closing tags\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.197Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":192,"totalLines":1041,"estimatedTokens":4674}}95{"id":"doc-runtime_warnings_svelte_docs-b7aedd56","source":"documentation","title":"Runtime warnings • Svelte Docs","url":"https://svelte.dev/docs/svelte/runtime-warnings","text":"Example:\n```text\nAssignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.\n```\n\nExample:\n```text\n<script>\n\tlet object = $state({ array: null });\n\n\tfunction add() {\n\t\t(object.array ??= []).push(object.array.length);\n\t}\n</script>\n\n<button onclick={add}>add</button>\n<p>items: {JSON.stringify(object.items)}</p>\n```\n\nExample:\n```text\nfunction function add(): voidadd() {\n\tlet object: {\n    array: number[];\n}object.array: number[]array ??= [];\n\tlet object: {\n    array: number[];\n}object.array: number[]array.Array<number>.push(...items: number[]): numberAppends new elements to the end of an array, and returns the new length of the array.\n@paramitems New elements to add to the array.push(let object: {\n    array: number[];\n}object.array: number[]array.Array<number>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.\nlength);\n}function add(): voidlet object: {\n    array: number[];\n}let object: {\n    array: number[];\n}array: number[]let object: {\n    array: number[];\n}let object: {\n    array: number[];\n}array: number[]Array<number>.push(...items: number[]): numberlet object: {\n    array: number[];\n}let object: {\n    array: number[];\n}array: number[]Array<number>.length: number\n```\n\nExample:\n```text\nlet object: {\n    array: number[];\n}\n```\n\nExample:\n```text\nDetected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`\n```\n\nExample:\n```text\nlet let total: numbertotal = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await let a: Promise<number>a + let b: numberb);let total: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let a: Promise<number>let b: number\n```\n\nExample:\n```text\nfunction $derived<number>(expression: number): number\nnamespace $derived\n```\n\nExample:\n```text\nlet double = $derived(count * 2);\n```\n\nExample:\n```text\nasync function function sum(): Promise<number>sum() {\n\treturn await let a: Promise<number>a + let b: numberb;\n}\n\nlet let total: numbertotal = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function sum(): Promise<number>sum());function sum(): Promise<number>let a: Promise<number>let b: numberlet total: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function sum(): Promise<number>\n```\n\nExample:\n```text\n/**\n * @param {Promise<number>} a\n * @param {number} b\n */\nasync function function sum(a: Promise<number>, b: number): Promise<number>@parama @paramb sum(a: Promise<number>@parama a, b: number@paramb b) {\n\treturn await a: Promise<number>@parama a + b: number@paramb b;\n}\n\nlet let total: numbertotal = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function sum(a: Promise<number>, b: number): Promise<number>@parama @paramb sum(let a: Promise<number>a, let b: numberb));function sum(a: Promise<number>, b: number): Promise<number>a: Promise<number>b: numbera: Promise<number>b: numberlet total: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function sum(a: Promise<number>, b: number): Promise<number>let a: Promise<number>let b: number\n```\n\nExample:\n```text\nAn async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\n```\n\nExample:\n```text\nlet let a: numbera = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function one(): Promise<number>one());\nlet let b: numberb = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await function two(): Promise<number>two());let a: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function one(): Promise<number>let b: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);function two(): Promise<number>\n```\n\nExample:\n```text\nlet let aPromise: Promise<number>aPromise = function $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(function one(): Promise<number>one());\nlet let bPromise: Promise<number>bPromise = function $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(function two(): Promise<number>two());\n\nlet let a: numbera = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await let aPromise: Promise<number>aPromise);\nlet let b: numberb = function $derived<number>(expression: number): number\nnamespace $derivedDeclares derived state, i.e. one that depends on other state variables.\nThe expression inside $derived(...) should be free of side-effects.\nExample:\nlet double = $derived(count * 2);@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression$derived(await let bPromise: Promise<number>bPromise);let aPromise: Promise<number>function $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derivedfunction $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derived$derived(...)let double = $derived(count * 2);function one(): Promise<number>let bPromise: Promise<number>function $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derivedfunction $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derived$derived(...)let double = $derived(count * 2);function two(): Promise<number>let a: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let aPromise: Promise<number>let b: numberfunction $derived<number>(expression: number): number\nnamespace $derivedfunction $derived<number>(expression: number): number\nnamespace $derived$derived(...)let double = $derived(count * 2);let bPromise: Promise<number>\n```\n\nExample:\n```text\nfunction $derived<Promise<number>>(expression: Promise<number>): Promise<number>\nnamespace $derived\n```\n\nExample:\n```text\n`%binding%` is binding to a non-reactive property\n```\n\nExample:\n```text\n`%binding%` (%location%) is binding to a non-reactive property\n```\n\nExample:\n```text\nYour `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead\n```\n\nExample:\n```text\nReading a derived belonging to a now-destroyed effect may result in stale values\n```\n\nExample:\n```text\n%handler% should be a function. Did you mean to %suggestion%?\n```\n\nExample:\n```text\nExpected to find a hydratable with key `%key%` during hydration, but did not.\n```\n\nExample:\n```text\n<script>\n  import { hydratable } from 'svelte';\n\n\tif (BROWSER) {\n\t\t// bad! nothing can become interactive until this asynchronous work is done\n\t\tawait hydratable('foo', get_slow_random_number);\n\t}\n</script>\n```\n\nExample:\n```text\nThe `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value\n```\n\nExample:\n```text\n<script>\n\tlet { src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = src;\n\n\t\t// unset it...\n\t\tsrc = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tsrc = initial;\n\t\t});\n\t}\n</script>\n\n<img {src} />\n```\n\nExample:\n```text\nThe value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\nExample:\n```text\nThe value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\nExample:\n```text\n<script>\n\tlet { markup } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = markup;\n\n\t\t// unset it...\n\t\tmarkup = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n```\n\nExample:\n```text\nHydration failed because the initial UI does not match what was rendered on the server\n```\n\nExample:\n```text\nHydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%\n```\n\nExample:\n```text\nThe `render` function passed to `createRawSnippet` should return HTML for a single element\n```\n\nExample:\n```text\nDetected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.\n```\n\nExample:\n```text\nTried to unmount a component that was not mounted\n```\n\nExample:\n```text\n%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)\n```\n\nExample:\n```text\nMutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n\tlet person = $state({ name: 'Florida', surname: 'Man' });\n</script>\n\n<Child {person} />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n\tlet person = $state({ name: 'Florida', surname: 'Man' });\n</script>\n\n<Child {person} />\n```\n\nExample:\n```text\n<script>\n\tlet { person } = $props();\n</script>\n\n<input bind:value={person.name}>\n<input bind:value={person.surname}>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { person } = $props();\n</script>\n\n<input bind:value={person.name}>\n<input bind:value={person.surname}>\n```\n\nExample:\n```text\nThe `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.\n```\n\nExample:\n```text\nReactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results\n```\n\nExample:\n```text\n<script>\n\tlet value = { foo: 'bar' };\n\tlet proxy = $state(value);\n\n\tvalue === proxy; // always false\n</script>\n```\n\nExample:\n```text\nTried to unmount a state proxy, rather than a component\n```\n\nExample:\n```text\nlet let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component = function $state<{\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(initial: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any> (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const Component: LegacyComponentTypeComponent, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget }));\n\n// later...\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>component);let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>function $state<{\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(initial: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any> (+1 overload)\nnamespace $statefunction $state<{\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(initial: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any> (+1 overload)\nnamespace $statelet count = $state(0);mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst Component: LegacyComponentTypetarget: Document | Element | ShadowRootfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>let component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nlet component: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nfunction $state<{\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(initial: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any> (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\nA `<svelte:boundary>` `reset` function only resets the boundary the first time it is called\n```\n\nExample:\n```text\n<script>\n\tlet reset;\n</script>\n\n<button onclick={reset}>reset</button>\n\n<svelte:boundary onerror={(e, r) => (reset = r)}>\n\t<!-- contents -->\n\n\t{#snippet failed(e)}\n\t\t<p>oops! {e.message}</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\nThe `slide` transition does not work correctly for elements with `display: %value%`\n```\n\nExample:\n```text\n`<svelte:element this=\"%tag%\">` is a void element — it cannot have content\n```\n\nExample:\n```text\nValue cannot be cloned with `$state.snapshot` — the original value was returned\n```\n\nExample:\n```text\nThe following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:\n\n%properties%\n```\n\nExample:\n```text\nconst const object: {\n    property: string;\n    window: Window & typeof globalThis;\n}object = function $state<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(initial: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: Window & typeof globalThis;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ property: stringproperty: 'this is cloneable', window: Window & typeof globalThiswindow })\nconst const snapshot: {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                readonly maxTouchPoints: number;\n                readonly mediaCapabilities: {\n                    decodingInfo: {};\n                    encodingInfo: {};\n                };\n                readonly mediaDevices: {\n                    ondevicechange: {} | null;\n                    ... 6 more ...;\n                    dispatchEvent: {};\n                };\n                ... 36 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}snapshot = namespace $state\nfunction $state<T>(initial: T): T (+1 overload)Declares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state.function $state.snapshot<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(state: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                ... 39 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}To take a static snapshot of a deeply reactive $state proxy, use $state.snapshot:\nExample:\n<script>\n  let counter = $state({ count: 0 });\n\n  function onclick() {\n\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\tconsole.log($state.snapshot(counter));\n  };\n</script>If state has a toJSON method, the snapshot will clone the value returned from toJSON instead of the original object.\n@see{@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation}@paramstate The value to snapshotsnapshot(const object: {\n    property: string;\n    window: Window & typeof globalThis;\n}object);const object: {\n    property: string;\n    window: Window & typeof globalThis;\n}const object: {\n    property: string;\n    window: Window & typeof globalThis;\n}function $state<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(initial: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: Window & typeof globalThis;\n} (+1 overload)\nnamespace $statefunction $state<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(initial: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: Window & typeof globalThis;\n} (+1 overload)\nnamespace $statelet count = $state(0);property: stringwindow: Window & typeof globalThisconst snapshot: {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                readonly maxTouchPoints: number;\n                readonly mediaCapabilities: {\n                    decodingInfo: {};\n                    encodingInfo: {};\n                };\n                readonly mediaDevices: {\n                    ondevicechange: {} | null;\n                    ... 6 more ...;\n                    dispatchEvent: {};\n                };\n                ... 36 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}const snapshot: {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                readonly maxTouchPoints: number;\n                readonly mediaCapabilities: {\n                    decodingInfo: {};\n                    encodingInfo: {};\n                };\n                readonly mediaDevices: {\n                    ondevicechange: {} | null;\n                    ... 6 more ...;\n                    dispatchEvent: {};\n                };\n                ... 36 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}namespace $state\nfunction $state<T>(initial: T): T (+1 overload)namespace $state\nfunction $state<T>(initial: T): T (+1 overload)let count = $state(0);function $state.snapshot<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(state: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                ... 39 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}function $state.snapshot<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(state: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                ... 39 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}$state$state.snapshot<script>\n  let counter = $state({ count: 0 });\n\n  function onclick() {\n\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\tconsole.log($state.snapshot(counter));\n  };\n</script>statetoJSONtoJSONconst object: {\n    property: string;\n    window: Window & typeof globalThis;\n}const object: {\n    property: string;\n    window: Window & typeof globalThis;\n}\n```\n\nExample:\n```text\nconst object: {\n    property: string;\n    window: Window & typeof globalThis;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(initial: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: Window & typeof globalThis;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nconst snapshot: {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                readonly maxTouchPoints: number;\n                readonly mediaCapabilities: {\n                    decodingInfo: {};\n                    encodingInfo: {};\n                };\n                readonly mediaDevices: {\n                    ondevicechange: {} | null;\n                    ... 6 more ...;\n                    dispatchEvent: {};\n                };\n                ... 36 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}\n```\n\nExample:\n```text\nnamespace $state\nfunction $state<T>(initial: T): T (+1 overload)\n```\n\nExample:\n```text\nfunction $state.snapshot<{\n    property: string;\n    window: Window & typeof globalThis;\n}>(state: {\n    property: string;\n    window: Window & typeof globalThis;\n}): {\n    property: string;\n    window: {\n        [x: number]: {\n            [x: number]: ...;\n            readonly clientInformation: {\n                readonly clipboard: {\n                    read: {};\n                    readText: {};\n                    write: {};\n                    writeText: {};\n                    addEventListener: {};\n                    dispatchEvent: {};\n                    removeEventListener: {};\n                };\n                readonly credentials: {\n                    create: {};\n                    get: {};\n                    preventSilentAccess: {};\n                    store: {};\n                };\n                readonly doNotTrack: string | null;\n                readonly geolocation: {\n                    clearWatch: {};\n                    getCurrentPosition: {};\n                    watchPosition: {};\n                };\n                readonly login: {\n                    setStatus: {};\n                };\n                ... 39 more ...;\n                readonly storage: {\n                    ...;\n                };\n            };\n            ... 218 more ...;\n            readonly sessionStorage: {\n                ...;\n            };\n        };\n        ... 1014 more ...;\n        undefined: undefined;\n    };\n}\n```\n\nExample:\n```text\n<script>\n  let counter = $state({ count: 0 });\n\n  function onclick() {\n\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\tconsole.log($state.snapshot(counter));\n  };\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.198Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":61,"totalLines":1129,"estimatedTokens":9425}}96{"id":"doc-overview_svelte_cli_docs-a2d2f60d","source":"documentation","title":"Overview • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/overview","text":"Example:\n```text\nnpx sv <command> <args>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.198Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":15}}97{"id":"doc-env_static_public_sveltekit_docs-c183fdb6","source":"documentation","title":"$env/static/public • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$env-static-public","text":"Example:\n```text\nENVIRONMENT=production\nPUBLIC_BASE_URL=http://site.com\n```\n\nExample:\n```text\nimport { import ENVIRONMENTENVIRONMENT, import PUBLIC_BASE_URLPUBLIC_BASE_URL } from '$env/static/public';\n\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import ENVIRONMENTENVIRONMENT); // => throws error during build\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import PUBLIC_BASE_URLPUBLIC_BASE_URL); // => \"http://site.com\"import ENVIRONMENTimport PUBLIC_BASE_URLvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import ENVIRONMENTvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import PUBLIC_BASE_URL\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.199Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":238,"estimatedTokens":2526}}98{"id":"doc-sv_migrate_svelte_cli_docs-799126cb","source":"documentation","title":"sv migrate • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv-migrate","text":"Example:\n```text\nnpx sv migrate\n```\n\nExample:\n```text\nnpx sv migrate [migration]\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.199Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":25}}99{"id":"doc-claude_code_svelte_ai_docs-b1d4fa08","source":"documentation","title":"Claude Code • Svelte AI Docs","url":"https://svelte.dev/docs/ai/claude-plugin","text":"Example:\n```text\n/plugin marketplace add sveltejs/ai-tools\n```\n\nExample:\n```text\n/plugin install svelte\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.199Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":31}}100{"id":"doc-ai_tools_svelte_cli_docs-0d2e0821","source":"documentation","title":"ai-tools • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/ai-tools","text":"Example:\n```text\nnpx sv add ai-tools\n```\n\nExample:\n```text\nnpx sv add ai-tools=\"ide:cursor,vscode\"\n```\n\nExample:\n```text\nnpx sv add ai-tools=\"ide:claude-code+delivery:plugin\"\n```\n\nExample:\n```text\nnpx sv add ai-tools=\"ide:cursor+delivery:tools+tools:mcp,svelte-file-editor\"\n```\n\nExample:\n```text\nnpx sv add ai-tools=\"mcpSetup:local\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.199Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":88}}101{"id":"doc-github_copilot_cli_svelte_ai_docs-120b506b","source":"documentation","title":"GitHub Copilot CLI • Svelte AI Docs","url":"https://svelte.dev/docs/ai/copilot-plugin","text":"Example:\n```text\nhttps://github.com/sveltejs/ai-tools\n```\n\nExample:\n```text\ncopilot plugin marketplace add sveltejs/ai-tools\n```\n\nExample:\n```text\ncopilot plugin install svelte@ai-tools\n```\n\nExample:\n```text\n/plugin marketplace add sveltejs/ai-tools\n/plugin install svelte@ai-tools\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.199Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":22,"estimatedTokens":75}}102{"id":"doc-types_sveltekit_docs-c8f510a7","source":"documentation","title":"Types • SvelteKit Docs","url":"https://svelte.dev/docs/kit/types","text":"Example:\n```text\n/**\n * @type {import('@sveltejs/kit').RequestHandler<{\n *   foo: string;\n *   bar: string;\n *   baz: string\n * }>}\n */\nexport async function GET({ params: {\n    foo: string;\n    bar: string;\n    baz: string;\n}The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\t// ...\n}params: {\n    foo: string;\n    bar: string;\n    baz: string;\n}params: {\n    foo: string;\n    bar: string;\n    baz: string;\n}/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\nparams: {\n    foo: string;\n    bar: string;\n    baz: string;\n}\n```\n\nExample:\n```text\nimport type { type RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>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.\nIt receives Params as the first generic argument, which you can skip by using generated types instead.\nreferenceRequestHandler } from '@sveltejs/kit';\nexport const GET: type RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>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.\nIt receives Params as the first generic argument, which you can skip by using generated types instead.\nreferenceRequestHandler<{\n  foo: stringfoo: string;\n  bar: stringbar: string;\n  baz: stringbaz: string\n}> = async ({ params: {\n    foo: string;\n    bar: string;\n    baz: string;\n}The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\t// ...\n};type RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>(event: RequestEvent) => Response+server.jsGETPUTPATCHParamstype RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>(event: RequestEvent) => Response+server.jsGETPUTPATCHParamsfoo: stringbar: stringbaz: stringparams: {\n    foo: string;\n    bar: string;\n    baz: string;\n}params: {\n    foo: string;\n    bar: string;\n    baz: string;\n}/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\nimport type * as module \"@sveltejs/kit\"Kit from '@sveltejs/kit';\n\ntype type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}RouteParams = {\n\tfoo: stringfoo: string;\n\tbar: stringbar: string;\n\tbaz: stringbaz: string;\n};\n\nexport type type RequestHandler = (event: Kit.RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler = module \"@sveltejs/kit\"Kit.type RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: Kit.RequestEvent<Params, RouteId>) => MaybePromise<Response>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.\nIt receives Params as the first generic argument, which you can skip by using generated types instead.\nRequestHandler<type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}RouteParams>;\nexport type type PageLoad = (event: Kit.LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = module \"@sveltejs/kit\"Kit.type Load<Params extends LayoutParams<\"/\"> = Record<string, string>, InputData extends Record<string, unknown> | null = Record<string, any> | null, ParentData extends Record<string, unknown> = Record<...>, OutputData extends Record<string, unknown> | void = void | Record<...>, RouteId extends RouteId | null = string | null> = (event: Kit.LoadEvent<Params, InputData, ParentData, RouteId>) => MaybePromise<OutputData>The generic form of PageLoad and LayoutLoad. You should import those from ./$types (see generated types)\nrather than using Load directly.\nLoad<type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}RouteParams>;module \"@sveltejs/kit\"type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}foo: stringbar: stringbaz: stringtype RequestHandler = (event: Kit.RequestEvent<RouteParams, string | null>) => MaybePromise<Response>module \"@sveltejs/kit\"type RequestHandler<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: Kit.RequestEvent<Params, RouteId>) => MaybePromise<Response>(event: RequestEvent) => Response+server.jsGETPUTPATCHParamstype RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}type PageLoad = (event: Kit.LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>module \"@sveltejs/kit\"type Load<Params extends LayoutParams<\"/\"> = Record<string, string>, InputData extends Record<string, unknown> | null = Record<string, any> | null, ParentData extends Record<string, unknown> = Record<...>, OutputData extends Record<string, unknown> | void = void | Record<...>, RouteId extends RouteId | null = string | null> = (event: Kit.LoadEvent<Params, InputData, ParentData, RouteId>) => MaybePromise<OutputData>PageLoadLayoutLoad./$typesLoadtype RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}type RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}\n```\n\nExample:\n```text\ntype RouteParams = {\n    foo: string;\n    bar: string;\n    baz: string;\n}\n```\n\nExample:\n```text\n/** @type {import('./$types').RequestHandler} */\nexport async function GET({ params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\t// ...\n}params: RouteParams/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\nimport type { type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const GET: type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler = async ({ params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\t// ...\n};type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>params: RouteParams/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) {\n\t// ...\n}function load(event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: RouteParams/blog/[slug]{ slug: string }fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeaders\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) => {\n\t// ...\n};type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: RouteParams/blog/[slug]{ slug: string }fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeaders\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data, form }: PageProps = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\t/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n\tlet { data, form } = $props();\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageData, ActionData } from './$types';\n\n\tlet { data, form }: { data: PageData, form: ActionData } = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n  /** @type {import('./$types').PageData} */\n  export let data;\n  /** @type {import('./$types').ActionData} */\n  export let form;\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageData, ActionData } from './$types';\n\n  \n  export let data: PageData;\n  \n  export let form: ActionData;\n</script>\n```\n\nExample:\n```text\n{\n\t\"compilerOptions\": {\n\t\t\"paths\": {\n\t\t\t\"$lib\": [\"../src/lib\"],\n\t\t\t\"$lib/*\": [\"../src/lib/*\"]\n\t\t},\n\t\t\"rootDirs\": [\"..\", \"./types\"]\n\t},\n\t\"include\": [\n\t\t\"ambient.d.ts\",\n\t\t\"non-ambient.d.ts\",\n\t\t\"./types/**/$types.d.ts\",\n\t\t\"../vite.config.js\",\n\t\t\"../vite.config.ts\",\n\t\t\"../src/**/*.js\",\n\t\t\"../src/**/*.ts\",\n\t\t\"../src/**/*.svelte\",\n\t\t\"../tests/**/*.js\",\n\t\t\"../tests/**/*.ts\",\n\t\t\"../tests/**/*.svelte\"\n\t],\n\t\"exclude\": [\n\t\t\"../node_modules/**\",\n\t\t\"../src/service-worker.js\",\n\t\t\"../src/service-worker/**/*.js\",\n\t\t\"../src/service-worker.ts\",\n\t\t\"../src/service-worker/**/*.ts\",\n\t\t\"../src/service-worker.d.ts\",\n\t\t\"../src/service-worker/**/*.d.ts\"\n\t]\n}\n```\n\nExample:\n```text\n{\n\t\"compilerOptions\": {\n\t\t// this ensures that types are explicitly\n\t\t// imported with `import type`, which is\n\t\t// necessary as Svelte/Vite cannot\n\t\t// otherwise compile components correctly\n\t\t\"verbatimModuleSyntax\": true,\n\n\t\t// Vite compiles one TypeScript module\n\t\t// at a time, rather than compiling\n\t\t// the entire module graph\n\t\t\"isolatedModules\": true,\n\n\t\t// Tell TS it's used only for type-checking\n\t\t\"noEmit\": true,\n\n\t\t// This ensures both `vite build`\n\t\t// and `svelte-package` work correctly\n\t\t\"lib\": [\"esnext\", \"DOM\", \"DOM.Iterable\"],\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"module\": \"esnext\",\n\t\t\"target\": \"esnext\"\n\t}\n}\n```\n\nExample:\n```text\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};\n```\n\nExample:\n```text\ninterface Error {…}\n```\n\nExample:\n```text\nmessage: string;\n```\n\nExample:\n```text\ninterface Locals {}\n```\n\nExample:\n```text\ninterface PageData {}\n```\n\nExample:\n```text\ninterface PageState {}\n```\n\nExample:\n```text\ninterface Platform {}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.200Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":25,"totalLines":387,"estimatedTokens":3997}}103{"id":"doc-cursor_svelte_ai_docs-e4db57b0","source":"documentation","title":"Cursor • Svelte AI Docs","url":"https://svelte.dev/docs/ai/cursor-plugin","text":"Example:\n```text\n/add-plugin svelte\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.200Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":14}}104{"id":"doc-cli_svelte_ai_docs-1ee7c74d","source":"documentation","title":"CLI • Svelte AI Docs","url":"https://svelte.dev/docs/ai/cli","text":"Example:\n```text\nnpx -y @sveltejs/mcp\n```\n\nExample:\n```text\nnpx -y @sveltejs/mcp <command> [options]\n```\n\nExample:\n```text\nnpx -y @sveltejs/mcp --help\nnpx -y @sveltejs/mcp <command> --help\nnpx -y @sveltejs/mcp --version\n```\n\nExample:\n```text\nnpx -y @sveltejs/mcp list-sections\n```\n\nExample:\n```text\nnpx -y @sveltejs/mcp get-documentation 'svelte/$state'\n# or\nnpx -y @sveltejs/mcp get-documentation 'svelte/$state,svelte/await-expressions'\n```\n\nExample:\n```text\nnpx -y @sveltejs/mcp svelte-autofixer 'src/routes/+page.svelte'\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.200Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":35,"estimatedTokens":136}}105{"id":"doc-sv_create_svelte_cli_docs-2eda09fa","source":"documentation","title":"sv create • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv-create","text":"Example:\n```text\nnpx sv create [options] [path]\n```\n\nExample:\n```text\nnpx sv create --from-playground=\"https://svelte.dev/playground/hello-world\"\n```\n\nExample:\n```text\nnpx sv create --add eslint prettier [path]\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.200Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":57}}106{"id":"doc-codex_cli_svelte_ai_docs-0dd3a775","source":"documentation","title":"Codex CLI • Svelte AI Docs","url":"https://svelte.dev/docs/ai/codex-plugin","text":"Example:\n```text\ncodex plugin marketplace add sveltejs/ai-tools\n```\n\nExample:\n```text\ncodex\n/plugins\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.200Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":12,"estimatedTokens":30}}107{"id":"doc-configuration_sveltekit_docs-329dda89","source":"documentation","title":"Configuration • SvelteKit Docs","url":"https://svelte.dev/docs/kit/configuration","text":"Example:\n```text\nimport const adapter: () => import(\"@sveltejs/kit\").Adapteradapter from '@sveltejs/adapter-auto';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: function adapter(): import(\"@sveltejs/kit\").Adapteradapter()\n\t}\n};\n\nexport default const config: Configconfig;const adapter: () => import(\"@sveltejs/kit\").Adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildfunction adapter(): import(\"@sveltejs/kit\").Adapterconst config: Config\n```\n\nExample:\n```text\nimport const adapter: () => import(\"@sveltejs/kit\").Adapteradapter from '@sveltejs/adapter-auto';\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';\nimport { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig } from 'vite';\n\nexport default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig({\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [\n\t\tfunction sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit({\n\t\t\tcompilerOptions?: Omit<CompileOptions, \"filename\" | \"format\" | \"generate\"> | undefinedThe options to be passed to the Svelte compiler. A few options are set by default,\nincluding dev and css. However, some options are non-configurable, like\nfilename, format, generate, and cssHash (in dev).\n@seehttps://svelte.dev/docs/svelte/svelte-compiler#CompileOptionscompilerOptions: {\n\t\t\t\texperimental?: {\n    async?: boolean;\n} | undefinedExperimental options\n@since5.36experimental: {\n\t\t\t\t\tasync?: boolean | undefinedAllow await keyword in deriveds, template expressions, and the top level of components\n@since5.36async: true\n\t\t\t\t}\n\t\t\t},\n\t\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: function adapter(): import(\"@sveltejs/kit\").Adapteradapter(),\n\t\t\tKitConfig.experimental?: ({\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} & ExperimentalOptions) | undefinedExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\nThese options are considered experimental and breaking changes to them can occur in any release\nexperimental: {\n\t\t\t\tremoteFunctions?: boolean | undefinedWhether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.\n@defaultfalseremoteFunctions: true\n\t\t\t}\n\t\t})\n\t]\n});const adapter: () => import(\"@sveltejs/kit\").Adapterfunction sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-sveltefunction defineConfig(config: UserConfig): UserConfig (+5 overloads)function defineConfig(config: UserConfig): UserConfig (+5 overloads)UserConfig.plugins?: PluginOption[] | undefinedfunction sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-sveltecompilerOptions?: Omit<CompileOptions, \"filename\" | \"format\" | \"generate\"> | undefineddevcssfilenameformatgeneratecssHashexperimental?: {\n    async?: boolean;\n} | undefinedexperimental?: {\n    async?: boolean;\n} | undefinedasync?: boolean | undefinedawaitKitConfig.adapter?: Adapter | undefinedvite buildfunction adapter(): import(\"@sveltejs/kit\").AdapterKitConfig.experimental?: ({\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} & ExperimentalOptions) | undefinedKitConfig.experimental?: ({\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} & ExperimentalOptions) | undefinedremoteFunctions?: boolean | undefined\n```\n\nExample:\n```text\nexperimental?: {\n    async?: boolean;\n} | undefined\n```\n\nExample:\n```text\nKitConfig.experimental?: ({\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} & ExperimentalOptions) | undefined\n```\n\nExample:\n```text\ninterface Config extends SvelteConfig {…}\n```\n\nExample:\n```text\nkit?: KitConfig;\n```\n\nExample:\n```text\n[key: string]: any;\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.alias?: Record<string, string> | undefinedAn object containing zero or more aliases used to replace values in import statements. These aliases are automatically passed to Vite and TypeScript.\nsvelte.config/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\talias: {\n\t  // this will match a file\n\t  'my-file': 'path/to/my-file.js',\n\n\t  // this will match a directory and its contents\n\t  // (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t  'my-directory': 'path/to/my-directory',\n\n\t  // an alias ending /* will only match\n\t  // the contents of a directory, not the directory itself\n\t  'my-directory/*': 'path/to/my-directory/*'\n\t}\n  }\n}; You will need to run npm run dev to have SvelteKit automatically generate the required alias configuration in jsconfig.json or tsconfig.json.\n@default{}alias: {\n\t\t\t// this will match a file\n\t\t\t'my-file': 'path/to/my-file.js',\n\n\t\t\t// this will match a directory and its contents\n\t\t\t// (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t\t\t'my-directory': 'path/to/my-directory',\n\n\t\t\t// an alias ending /* will only match\n\t\t\t// the contents of a directory, not the directory itself\n\t\t\t'my-directory/*': 'path/to/my-directory/*'\n\t\t}\n\t}\n};const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.alias?: Record<string, string> | undefinedimport/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\talias: {\n\t  // this will match a file\n\t  'my-file': 'path/to/my-file.js',\n\n\t  // this will match a directory and its contents\n\t  // (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t  'my-directory': 'path/to/my-directory',\n\n\t  // an alias ending /* will only match\n\t  // the contents of a directory, not the directory itself\n\t  'my-directory/*': 'path/to/my-directory/*'\n\t}\n  }\n};npm run devjsconfig.jsontsconfig.json\n```\n\nExample:\n```text\n/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\talias: {\n\t  // this will match a file\n\t  'my-file': 'path/to/my-file.js',\n\n\t  // this will match a directory and its contents\n\t  // (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t  'my-directory': 'path/to/my-directory',\n\n\t  // an alias ending /* will only match\n\t  // the contents of a directory, not the directory itself\n\t  'my-directory/*': 'path/to/my-directory/*'\n\t}\n  }\n};\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.csp?: {\n    mode?: \"hash\" | \"nonce\" | \"auto\";\n    directives?: CspDirectives;\n    reportOnly?: CspDirectives;\n} | undefinedContent Security Policy configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...\nsvelte.config/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tcsp: {\n\t  directives: {\n\t\t'script-src': ['self']\n\t  },\n\t  // must be specified with either the `report-uri` or `report-to` directives, or both\n\t  reportOnly: {\n\t\t'script-src': ['self'],\n\t\t'report-uri': ['/']\n\t  }\n\t}\n  }\n};\n\nexport default config;...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on mode) for any inline styles and scripts it generates.\nTo add a nonce for scripts and links manually included in src/app.html, you may use the placeholder %sveltekit.nonce% (for example <script nonce=\"%sveltekit.nonce%\">).\nWhen pages are prerendered, the CSP header is added via a <meta http-equiv> tag (note that in this case, frame-ancestors, report-uri and sandbox directives will be ignored).\n When mode is 'auto', SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.\n Note that most Svelte transitions work by creating an inline <style> element. If you use these in your app, you must either leave the style-src directive unspecified or add unsafe-inline.\nIf this level of configuration is insufficient and you have more dynamic requirements, you can use the handle hook to roll your own CSP.\ncsp: {\n\t\t\tdirectives?: CspDirectives | undefinedDirectives that will be added to Content-Security-Policy headers.\ndirectives: {\n\t\t\t\t'script-src': ['self']\n\t\t\t},\n\t\t\t// must be specified with either the `report-uri` or `report-to` directives, or both\n\t\t\treportOnly?: CspDirectives | undefinedDirectives that will be added to Content-Security-Policy-Report-Only headers.\nreportOnly: {\n\t\t\t\t'script-src': ['self'],\n\t\t\t\t'report-uri': ['/']\n\t\t\t}\n\t\t}\n\t}\n};\n\nexport default const config: Configconfig;const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.csp?: {\n    mode?: \"hash\" | \"nonce\" | \"auto\";\n    directives?: CspDirectives;\n    reportOnly?: CspDirectives;\n} | undefinedKitConfig.csp?: {\n    mode?: \"hash\" | \"nonce\" | \"auto\";\n    directives?: CspDirectives;\n    reportOnly?: CspDirectives;\n} | undefined/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tcsp: {\n\t  directives: {\n\t\t'script-src': ['self']\n\t  },\n\t  // must be specified with either the `report-uri` or `report-to` directives, or both\n\t  reportOnly: {\n\t\t'script-src': ['self'],\n\t\t'report-uri': ['/']\n\t  }\n\t}\n  }\n};\n\nexport default config;modesrc/app.html%sveltekit.nonce%<script nonce=\"%sveltekit.nonce%\"><meta http-equiv>frame-ancestorsreport-urisandboxmode'auto'<style>style-srcunsafe-inlinehandledirectives?: CspDirectives | undefinedContent-Security-PolicyreportOnly?: CspDirectives | undefinedContent-Security-Policy-Report-Onlyconst config: Config\n```\n\nExample:\n```text\nKitConfig.csp?: {\n    mode?: \"hash\" | \"nonce\" | \"auto\";\n    directives?: CspDirectives;\n    reportOnly?: CspDirectives;\n} | undefined\n```\n\nExample:\n```text\n/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tcsp: {\n\t  directives: {\n\t\t'script-src': ['self']\n\t  },\n\t  // must be specified with either the `report-uri` or `report-to` directives, or both\n\t  reportOnly: {\n\t\t'script-src': ['self'],\n\t\t'report-uri': ['/']\n\t  }\n\t}\n  }\n};\n\nexport default config;\n```\n\nExample:\n```text\nmode?: 'hash' | 'nonce' | 'auto';\n```\n\nExample:\n```text\ndirectives?: CspDirectives;\n```\n\nExample:\n```text\nreportOnly?: CspDirectives;\n```\n\nExample:\n```text\ncheckOrigin?: boolean;\n```\n\nExample:\n```text\ntrustedOrigins?: string[];\n```\n\nExample:\n```text\ndir?: string;\n```\n\nExample:\n```text\npublicPrefix?: string;\n```\n\nExample:\n```text\nprivatePrefix?: string;\n```\n\nExample:\n```text\nexplicitEnvironmentVariables?: boolean;\n```\n\nExample:\n```text\ntracing?: {…}\n```\n\nExample:\n```text\nserver?: boolean;\n```\n\nExample:\n```text\ninstrumentation?: {…}\n```\n\nExample:\n```text\nremoteFunctions?: boolean;\n```\n\nExample:\n```text\nforkPreloads?: boolean;\n```\n\nExample:\n```text\nhandleRenderingErrors?: boolean;\n```\n\nExample:\n```text\nsrc?: string;\n```\n\nExample:\n```text\nassets?: string;\n```\n\nExample:\n```text\nhooks?: {…}\n```\n\nExample:\n```text\nclient?: string;\n```\n\nExample:\n```text\nserver?: string;\n```\n\nExample:\n```text\nuniversal?: string;\n```\n\nExample:\n```text\nlib?: string;\n```\n\nExample:\n```text\nparams?: string;\n```\n\nExample:\n```text\nroutes?: string;\n```\n\nExample:\n```text\nserviceWorker?: string;\n```\n\nExample:\n```text\nappTemplate?: string;\n```\n\nExample:\n```text\nerrorTemplate?: string;\n```\n\nExample:\n```text\npreloadStrategy?: 'modulepreload' | 'preload-js' | 'preload-mjs';\n```\n\nExample:\n```text\nbundleStrategy?: 'split' | 'single' | 'inline';\n```\n\nExample:\n```text\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';\nimport { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig } from 'vite';\n\nexport default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig({\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit()],\n\tbuild?: BuildEnvironmentOptions | undefinedBuild specific options\nbuild: {\n\t\t// inline all imported assets\n\t\tBuildEnvironmentOptions.assetsInlineLimit?: number | ((filePath: string, content: Buffer) => boolean | undefined) | undefinedStatic asset files smaller than this number (in bytes) will be inlined as\nbase64 strings. If a callback is passed, a boolean can be returned to opt-in\nor opt-out of inlining. If nothing is returned the default logic applies.\nDefault limit is 4096 (4 KiB). Set to 0 to disable.\n@default4096assetsInlineLimit: var Infinity: numberInfinity\n\t}\n});function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-sveltefunction defineConfig(config: UserConfig): UserConfig (+5 overloads)function defineConfig(config: UserConfig): UserConfig (+5 overloads)UserConfig.plugins?: PluginOption[] | undefinedfunction sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-sveltebuild?: BuildEnvironmentOptions | undefinedBuildEnvironmentOptions.assetsInlineLimit?: number | ((filePath: string, content: Buffer) => boolean | undefined) | undefined40960var Infinity: number\n```\n\nExample:\n```text\n<script>\n\t// import the asset through Vite\n\timport favicon from './favicon.png';\n</script>\n\n<svelte:head>\n\t<!-- this asset will be inlined as a base64 URL -->\n\t<link rel=\"icon\" href={favicon} />\n</svelte:head>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\t// import the asset through Vite\n\timport favicon from './favicon.png';\n</script>\n\n<svelte:head>\n\t<!-- this asset will be inlined as a base64 URL -->\n\t<link rel=\"icon\" href={favicon} />\n</svelte:head>\n```\n\nExample:\n```text\nassets?: '' | `http://${string}` | `https://${string}`;\n```\n\nExample:\n```text\nbase?: '' | `/${string}`;\n```\n\nExample:\n```text\nrelative?: boolean;\n```\n\nExample:\n```text\nconcurrency?: number;\n```\n\nExample:\n```text\ncrawl?: boolean;\n```\n\nExample:\n```text\nentries?: var Array: ArrayConstructorArray<'*' | `/${string}`>;var Array: ArrayConstructor\n```\n\nExample:\n```text\nhandleHttpError?: PrerenderHttpErrorHandlerValue;\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.prerender?: {\n    concurrency?: number;\n    crawl?: boolean;\n    entries?: Array<\"*\" | `/${string}`>;\n    handleHttpError?: PrerenderHttpErrorHandlerValue;\n    handleMissingId?: PrerenderMissingIdHandlerValue;\n    handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n    handleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n    handleInvalidUrl?: PrerenderInvalidUrlHandlerValue;\n    origin?: string;\n} | undefinedSee Prerendering.\nprerender: {\n\t\t\thandleHttpError?: PrerenderHttpErrorHandlerValue | undefinedHow to respond to HTTP errors encountered while prerendering the app.\n\n'fail' — fail the build\n'ignore' - silently ignore the failure and continue\n'warn' — continue, but print a warning\n(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\n\nsvelte.config/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tprerender: {\n\t  handleHttpError: ({ path, referrer, message }) => {\n\t\t// ignore deliberate link to shiny 404 page\n\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t  return;\n\t\t}\n\n\t\t// otherwise fail the build\n\t\tthrow new Error(message);\n\t  }\n\t}\n  }\n};@default\"fail\"@since1.15.7handleHttpError: ({ path: stringpath, referrer: string | nullreferrer, message: stringmessage }) => {\n\t\t\t\t// ignore deliberate link to shiny 404 page\n\t\t\t\tif (path: stringpath === '/not-found' && referrer: string | nullreferrer === '/blog/how-we-built-our-404-page') {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// otherwise fail the build\n\t\t\t\tthrow new var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)Error(message: stringmessage);\n\t\t\t}\n\t\t}\n\t}\n};const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.prerender?: {\n    concurrency?: number;\n    crawl?: boolean;\n    entries?: Array<\"*\" | `/${string}`>;\n    handleHttpError?: PrerenderHttpErrorHandlerValue;\n    handleMissingId?: PrerenderMissingIdHandlerValue;\n    handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n    handleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n    handleInvalidUrl?: PrerenderInvalidUrlHandlerValue;\n    origin?: string;\n} | undefinedKitConfig.prerender?: {\n    concurrency?: number;\n    crawl?: boolean;\n    entries?: Array<\"*\" | `/${string}`>;\n    handleHttpError?: PrerenderHttpErrorHandlerValue;\n    handleMissingId?: PrerenderMissingIdHandlerValue;\n    handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n    handleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n    handleInvalidUrl?: PrerenderInvalidUrlHandlerValue;\n    origin?: string;\n} | undefinedhandleHttpError?: PrerenderHttpErrorHandlerValue | undefined'fail''ignore''warn'(details) => voiddetailsstatuspathreferrerreferenceTypemessagethrow/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tprerender: {\n\t  handleHttpError: ({ path, referrer, message }) => {\n\t\t// ignore deliberate link to shiny 404 page\n\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t  return;\n\t\t}\n\n\t\t// otherwise fail the build\n\t\tthrow new Error(message);\n\t  }\n\t}\n  }\n};path: stringreferrer: string | nullmessage: stringpath: stringreferrer: string | nullvar Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)message: string\n```\n\nExample:\n```text\nKitConfig.prerender?: {\n    concurrency?: number;\n    crawl?: boolean;\n    entries?: Array<\"*\" | `/${string}`>;\n    handleHttpError?: PrerenderHttpErrorHandlerValue;\n    handleMissingId?: PrerenderMissingIdHandlerValue;\n    handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n    handleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n    handleInvalidUrl?: PrerenderInvalidUrlHandlerValue;\n    origin?: string;\n} | undefined\n```\n\nExample:\n```text\n/// type: import('@sveltejs/kit').Config\nconst config = {\n  kit: {\n\tprerender: {\n\t  handleHttpError: ({ path, referrer, message }) => {\n\t\t// ignore deliberate link to shiny 404 page\n\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t  return;\n\t\t}\n\n\t\t// otherwise fail the build\n\t\tthrow new Error(message);\n\t  }\n\t}\n  }\n};\n```\n\nExample:\n```text\nvar Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)\n```\n\nExample:\n```text\nhandleMissingId?: PrerenderMissingIdHandlerValue;\n```\n\nExample:\n```text\nhandleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n```\n\nExample:\n```text\nhandleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n```\n\nExample:\n```text\nhandleInvalidUrl?: PrerenderInvalidUrlHandlerValue;\n```\n\nExample:\n```text\nvar origin: stringMDN Reference\norigin?: string;var origin: string\n```\n\nExample:\n```text\ntype?: 'pathname' | 'hash';\n```\n\nExample:\n```text\nresolution?: 'client' | 'server';\n```\n\nExample:\n```text\nconfig?: (config: Record<string, any>config: type Record<K extends keyof any, T> = { [P in K]: T; }Construct a type with a set of properties K of type T\nRecord<string, any>) => Record<string, any> | void;config: Record<string, any>type Record<K extends keyof any, T> = { [P in K]: T; }\n```\n\nExample:\n```text\n<script>\n\timport { beforeNavigate } from '$app/navigation';\n\timport { updated } from '$app/state';\n\n\tbeforeNavigate(({ willUnload, to }) => {\n\t\tif (updated.current && !willUnload && to?.url) {\n\t\t\tlocation.href = to.url.href;\n\t\t}\n\t});\n</script>\n```\n\nExample:\n```text\nconst name: void@deprecatedname?: string;const name: void\n```\n\nExample:\n```text\nimport * as module \"node:child_process\"child_process from 'node:child_process';\n\nexport default {\n\tkit: {\n    version: {\n        name: string;\n    };\n}kit: {\n\t\tversion: {\n    name: string;\n}version: {\n\t\t\tname: stringname: module \"node:child_process\"child_process.function execSync(command: string): NonSharedBuffer (+3 overloads)The child_process.execSync() method is generally identical to \n{@link \nexec\n}\n with the exception that the method will not return\nuntil the child process has fully closed. When a timeout has been encountered\nand killSignal is sent, the method won’t return until the process has\ncompletely exited. If the child process intercepts and handles the SIGTERM signal and doesn’t exit, the parent process will wait until the child process\nhas exited.\nIf the process times out or has a non-zero exit code, this method will throw.\nThe Error object will contain the entire result from \n{@link \nspawnSync\n}\n.\nNever pass unsanitized user input to this function. Any input containing shell\nmetacharacters may be used to trigger arbitrary command execution.\n@sincev0.11.12@paramcommand The command to run.@returnThe stdout from the command.execSync('git rev-parse HEAD').Buffer<ArrayBuffer>.toString(encoding?: BufferEncoding, start?: number, end?: number): stringDecodes buf to a string according to the specified character encoding inencoding. start and end may be passed to decode only a subset of buf.\nIf encoding is 'utf8' and a byte sequence in the input is not valid UTF-8,\nthen each invalid byte is replaced with the replacement character U+FFFD.\nThe maximum length of a string instance (in UTF-16 code units) is available\nas \n{@link \nconstants.MAX_STRING_LENGTH\n}\n.\nimport { Buffer } from 'node:buffer';\n\nconst buf1 = Buffer.allocUnsafe(26);\n\nfor (let i = 0; i < 26; i++) {\n  // 97 is the decimal ASCII value for 'a'.\n  buf1[i] = i + 97;\n}\n\nconsole.log(buf1.toString('utf8'));\n// Prints: abcdefghijklmnopqrstuvwxyz\nconsole.log(buf1.toString('utf8', 0, 5));\n// Prints: abcde\n\nconst buf2 = Buffer.from('tést');\n\nconsole.log(buf2.toString('hex'));\n// Prints: 74c3a97374\nconsole.log(buf2.toString('utf8', 0, 3));\n// Prints: té\nconsole.log(buf2.toString(undefined, 0, 3));\n// Prints: té@sincev0.1.90@paramencoding The character encoding to use.@paramstart The byte offset to start decoding at.@paramend The byte offset to stop decoding at (not inclusive).toString().String.trim(): stringRemoves the leading and trailing white space and line terminator characters from a string.\ntrim()\n\t\t}\n\t}\n};module \"node:child_process\"kit: {\n    version: {\n        name: string;\n    };\n}kit: {\n    version: {\n        name: string;\n    };\n}version: {\n    name: string;\n}version: {\n    name: string;\n}name: stringmodule \"node:child_process\"function execSync(command: string): NonSharedBuffer (+3 overloads)child_process.execSync()killSignalSIGTERMErrorBuffer<ArrayBuffer>.toString(encoding?: BufferEncoding, start?: number, end?: number): stringbufencodingstartendbufencoding'utf8'U+FFFDimport { Buffer } from 'node:buffer';\n\nconst buf1 = Buffer.allocUnsafe(26);\n\nfor (let i = 0; i < 26; i++) {\n  // 97 is the decimal ASCII value for 'a'.\n  buf1[i] = i + 97;\n}\n\nconsole.log(buf1.toString('utf8'));\n// Prints: abcdefghijklmnopqrstuvwxyz\nconsole.log(buf1.toString('utf8', 0, 5));\n// Prints: abcde\n\nconst buf2 = Buffer.from('tést');\n\nconsole.log(buf2.toString('hex'));\n// Prints: 74c3a97374\nconsole.log(buf2.toString('utf8', 0, 3));\n// Prints: té\nconsole.log(buf2.toString(undefined, 0, 3));\n// Prints: téString.trim(): string\n```\n\nExample:\n```text\nkit: {\n    version: {\n        name: string;\n    };\n}\n```\n\nExample:\n```text\nversion: {\n    name: string;\n}\n```\n\nExample:\n```text\nimport { Buffer } from 'node:buffer';\n\nconst buf1 = Buffer.allocUnsafe(26);\n\nfor (let i = 0; i < 26; i++) {\n  // 97 is the decimal ASCII value for 'a'.\n  buf1[i] = i + 97;\n}\n\nconsole.log(buf1.toString('utf8'));\n// Prints: abcdefghijklmnopqrstuvwxyz\nconsole.log(buf1.toString('utf8', 0, 5));\n// Prints: abcde\n\nconst buf2 = Buffer.from('tést');\n\nconsole.log(buf2.toString('hex'));\n// Prints: 74c3a97374\nconsole.log(buf2.toString('utf8', 0, 3));\n// Prints: té\nconsole.log(buf2.toString(undefined, 0, 3));\n// Prints: té\n```\n\nExample:\n```text\npollInterval?: number;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.202Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":70,"totalLines":932,"estimatedTokens":6911}}108{"id":"doc-sv_add_svelte_cli_docs-65f1a7ff","source":"documentation","title":"sv add • Svelte CLI Docs","url":"https://svelte.dev/docs/cli/sv-add","text":"Example:\n```text\nnpx sv add\n```\n\nExample:\n```text\nnpx sv add [add-ons]\n```\n\nExample:\n```text\n# Install a community add-on by org name (it will look at @org/sv)\nnpx sv add @supacool\n\n# Use a local add-on (for development or internal use)\nnpx sv add file:../path/to/my-addon\n\n# Mix and match official and community add-ons\nnpx sv add eslint @supacool\n\n# Also works when creating a new project directly\nnpx sv create --add eslint @supacool\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.202Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":26,"estimatedTokens":114}}109{"id":"doc-data_title-07d4853f","source":"documentation","title":"{data.title}","url":"https://svelte.dev/docs/kit/state-management/llms.txt","text":"{data.title} Reading time: {Math.round(estimatedReadingTime)} minutes\n\n{/key} ``` ## Storing state in the URL If you have state that should survive a reload and/or affect SSR, such as filters or sorting rules on a table, URL search parameters (like `?sort=price&order=ascending`) are a good place to put them. You can put them in `` or `` attributes, or set them programmatically via `goto('?key=value')`. They can be accessed inside `load` functions via the `url` parameter, and inside components via `page.url.searchParams`. ## Storing ephemeral state in snapshots Some UI state, such as 'is the accordion open?', is disposable — if the user navigates away or refreshes the page, it doesn't matter if the state is lost. In some cases, you _do_ want the data to persist if the user navigates to a different page and comes back, but storing the state in the URL or in a database would be overkill. For this, SvelteKit provides [snapshots](snapshots), which let you associate component state with a history entry.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.202Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":257}}110{"id":"doc-hello_and_welcome_to_my_site-6b83e8d3","source":"documentation","title":"Hello and welcome to my site!","url":"https://svelte.dev/docs/kit/routing/llms.txt","text":"# Hello and welcome to my site!\n\nAbout my site\n\n# About this site\n\n` elements to navigate between routes, rather than a framework-specific `` component. Pages can receive data from `load` functions via the `data` prop. ```svelte {data.title} {@html data.content} ``` As of 2.24, pages also receive a `params` prop which is typed based on the route parameters. This is particularly useful alongside [remote functions](remote-functions): ```svelte {post.title} {@html post.content} ``` > [!LEGACY] > `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` property manually with `PageData` instead, see [$types](#\\$types). > > In Svelte 4, you'd use `export let data` instead. ### +page.js Often, a page will need to load some data before it can be rendered. For this, we add a `+page.js` module that exports a `load` function: ```js /// /routes/blog/[slug]/+page.js import { error } from '@sveltejs/kit'; /** @type {import('./$types').PageLoad} */ export function load({ params }) { if (params.slug === 'hello-world') { return { title: 'Hello world!', content: 'Welcome to our blog. Lorem ipsum dolor sit amet...' }; } error(404, 'Not found'); } ``` This function runs alongside `+page.svelte`, which means it runs on the server during server-side rendering and in the browser during client-side navigation. See [`load`](load) for full details of the API. As well as `load`, `+page.js` can export values that configure the page's `export const prerender = true` or `false` or `'auto'` - `export const ssr = true` or `false` - `export const csr = true` or `false` You can find more information about these in [page options](page-options). ### +page.server.js If your `load` function can only run on the server — for example, if it needs to fetch data from a database or you need to access private [environment variables]($env-static-private) like API keys — then you can rename `+page.js` to `+page.server.js` and change the `PageLoad` type to `PageServerLoad`. ```js /// /routes/blog/[slug]/+page.server.js // @filename: ambient.d.ts declare global { const getPostFromDatabase: (slug: string) => { } } export {}; // @filename: index.js // ---cut--- import { error } from '@sveltejs/kit'; /** @type {import('./$types').PageServerLoad} */ export async function load({ params }) { const post = await getPostFromDatabase(params.slug); if (post) { return post; } error(404, 'Not found'); } ``` During client-side navigation, SvelteKit will load this data from the server, which means that the returned value must be serializable using [devalue](https://github.com/rich-harris/devalue). See [`load`](load) for full details of the API. Like `+page.js`, `+page.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`. A `+page.server.js` file can also export _actions_. If `load` lets you read data from the server, `actions` let you write data _to_ the server using the `\n\n` element. To learn how to use them, see the [form actions](form-actions) section. ## +error If an error occurs during `load`, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an `+error.svelte` file: ```svelte {page.status}: {page.error.message} ``` > [!LEGACY] > `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead. SvelteKit will 'walk up the tree' looking for the closest error boundary — if the file above didn't exist it would try `src/routes/blog/+error.svelte` and then `src/routes/+error.svelte` before rendering the default error page. If _that_ fails (or if the error was thrown from the `load` function of the root `+layout`, which sits 'above' the root `+error`), SvelteKit will bail out and render a static fallback error page, which you can customise by creating a `src/error.html` file. If the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it). If no route can be found (404), `src/routes/+error.svelte` (or the default error page, if that file does not exist) will be used. > [!NOTE] `+error.svelte` is _not_ used when an error occurs inside [`handle`](hooks#handle) or a [+server.js](#server) request handler. You can read more about error handling [here](errors). ## +layout So far, we've treated pages as entirely standalone components — upon navigation, the existing `+page.svelte` component will be destroyed, and a new one will take its place. But in many apps, there are elements that should be visible on _every_ page, such as top-level navigation or a footer. Instead of repeating them in every `+page.svelte`, we can put them in _layouts_. ### +layout.svelte To create a layout that applies to every page, make a file called `src/routes/+layout.svelte`. The default layout (the one that SvelteKit uses if you don't bring your own) looks like this... ```svelte {@render children()} ``` ...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar: ```svelte Home About Settings {@render children()} ``` If we create pages for `/`, `/about` and `/settings`... ```html /// /routes/+page.svelte Home ``` ```html /// /routes/about/+page.svelte About ``` ```html /// /routes/settings/+page.svelte Settings ``` ...the nav will always be visible, and clicking between the three pages will only result in the `` being replaced. Layouts can be _nested_. Suppose we don't just have a single `/settings` page, but instead have nested pages like `/settings/profile` and `/settings/notifications` with a shared submenu (for a real-life example, see [github.com/settings](https://github.com/settings)). We can create a layout that only applies to pages below `/settings` (while inheriting the root layout with the top-level nav): ```svelte Settings {#each data.sections as section} {section.title} {/each} {@render children()} ``` > [!LEGACY] > `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\\$types). You can see how `data` is populated by looking at the `+layout.js` example in the next section just below. By default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you. ### +layout.js Just like `+page.svelte` loading data from `+page.js`, your `+layout.svelte` component can get data from a [`load`](load) function in `+layout.js`. ```js /// /routes/settings/+layout.js /** @type {import('./$types').LayoutLoad} */ export function load() { return { sections: [ { slug: 'profile', title: 'Profile' }, { slug: 'notifications', title: 'Notifications' } ] }; } ``` If a `+layout.js` exports [page options](page-options) — `prerender`, `ssr` and `csr` — they will be used as defaults for child pages. Data returned from a layout's `load` function is also available to all its child pages: ```svelte ``` > [!NOTE] Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently rerun [`load`](load) functions when necessary. ### +layout.server.js To run your layout's `load` function on the server, move it to `+layout.server.js`, and change the `LayoutLoad` type to `LayoutServerLoad`. Like `+layout.js`, `+layout.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`. ## +server As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, and `HEAD` that take a [`RequestEvent`](@sveltejs-kit#RequestEvent) argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object. For example we could create an `/api/random-number` route with a `GET` handler: ```js /// /routes/api/random-number/+server.js import { error } from '@sveltejs/kit'; /** @type {import('./$types').RequestHandler} */ export function GET({ url }) { const min = Number(url.searchParams.get('min') ?? '0'); const max = Number(url.searchParams.get('max') ?? '1'); const d = max - min; if (isNaN(d) || d < 0) { error(400, 'min and max must be numbers, and min must be less than max'); } const random = min + Math.random() * d; return new Response(String(random)); } ``` The first argument to `Response` can be a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), making it possible to stream large amounts of data or create server-sent events (unless deploying to platforms that buffer responses, like AWS Lambda). You can use the [`error`](@sveltejs-kit#error), [`redirect`](@sveltejs-kit#redirect) and [`json`](@sveltejs-kit#json) methods from `@sveltejs/kit` for convenience (but you don't have to). If an error is thrown (either `error(...)` or an unexpected error), the response will be a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. The [`+error.svelte`](#error) component will _not_ be rendered in this case. You can read more about error handling [here](errors). > [!NOTE] When creating an `OPTIONS` handler, note that Vite will inject `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` headers — these will not be present in production unless you add them. > [!NOTE] `+layout` files have no effect on `+server.js` files. If you want to run some logic before each request, add it to the server [`handle`](hooks#handle) hook. ### Receiving data By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API: ```svelte + = {total} Calculate ``` ```js /// /routes/api/add/+server.js import { json } from '@sveltejs/kit'; /** @type {import('./$types').RequestHandler} */ export async function POST({ request }) { const { a, b } = await request.json(); return json(a + b); } ``` > [!NOTE] In general, [form actions](form-actions) are a better way to submit data from the browser to the server. > [!NOTE] If a `GET` handler is exported, a `HEAD` request will return the `content-length` of the `GET` handler's response body. ### Fallback method handler Exporting the `fallback` handler will match any unhandled request methods, including methods like `MOVE` which have no dedicated export from `+server.js`. ```js /// /routes/api/add/+server.js import { json, text } from '@sveltejs/kit'; /** @type {import('./$types').RequestHandler} */ export async function POST({ request }) { const { a, b } = await request.json(); return json(a + b); } // This handler will respond to PUT, PATCH, DELETE, etc. /** @type {import('./$types').RequestHandler} */ export async function fallback({ request }) { return text(`I caught your ${request.method} request!`); } ``` > [!NOTE] For `HEAD` requests, the `GET` handler takes precedence over the `fallback` handler. ### Content negotiation `+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following `PUT`/`PATCH`/`DELETE`/`OPTIONS` requests are always handled by `+server.js` since they do not apply to pages - `GET`/`POST`/`HEAD` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`. - Responses to `GET` requests will include a `Vary: Accept` header, so that proxies and browsers cache HTML and JSON responses separately. ## $types Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files. For example, annotating `let { data } = $props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`: ```svelte ``` > [!NOTE] > The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page: > > ```js > /// file: +page.svelte > /** @type {{ ('./$types').PageData, ('./$types').ActionData }} */ > let { data, form } = $props(); > ``` > > Or, for a layout: > > ```js > /// file: +layout.svelte > /** @type {{ ('./$types').LayoutData, }} */ > let { data, children } = $props(); > ``` In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed. If you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`. You can read more about omitting `$types` in our [blog post](/blog/zero-config-type-safety) about it. ## Other files Any other files inside a route directory are ignored by SvelteKit. This means you can colocate components and utility modules with the routes that need them. If components and modules are needed by multiple routes, it's a good idea to put them in [`$lib`]($lib). ## Further reading - [Tutorial: Routing](/tutorial/kit/pages) - [Tutorial: API routes](/tutorial/kit/get-handlers) - [Docs: Advanced routing](advanced-routing)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.204Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":11,"estimatedTokens":3504}}111{"id":"doc-https_svelte_dev_docs_svelte_v5_migration_guide_-e1914569","source":"documentation","title":"https://svelte.dev/docs/svelte/v5-migration-guide/llms.txt","url":"https://svelte.dev/docs/svelte/v5-migration-guide/llms.txt","text":"count++}> clicks: {count}\n\n{ size += power---.detail---; if (size > 75) burst = true; }} ={(power) => { if (size > 0) size -= power---.detail---; }} /> {#if burst} new balloon 💥 {:else} 🎈 {/if} ``` ```svelte ---dispatch('inflate', power)---+++inflate(power)+++}> inflate ---dispatch('deflate', power)---+++deflate(power)+++}> deflate power--}>- Pump power: {power} power++}>+ ``` ### Bubbling events Instead of doing `` to 'forward' the event from the element to the component, the component should accept an `onclick` callback prop: ```svelte click me ``` Note that this also means you can 'spread' event handlers onto the element along with other props instead of tediously forwarding each event separately: ```svelte click me ``` ### Event modifiers In Svelte 4, you can add event modifiers to handlers: ```svelte ... ``` Modifiers are specific to `on:` and so do not work with modern event handlers. Adding things like `event.preventDefault()` inside the handler itself is preferable, since all the logic lives in one place rather than being split between handler and modifiers. Since event handlers are just functions, you can create your own wrappers as necessary: ```svelte ... ``` There are three modifiers — `capture`, `passive` and `nonpassive` — that can't be expressed as wrapper functions, since they need to be applied when the event handler is bound rather than when it runs. For `capture`, we add the modifier to the event name: ```svelte ... ``` Changing the [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) option of an event handler, meanwhile, is not something to be done lightly. If you have a use case for it — and you probably don't! — then you will need to use an action to apply the event handler yourself. ### Multiple event handlers In Svelte 4, this is possible: ```svelte ... ``` Duplicate attributes/properties on elements — which now includes event handlers — are not allowed. Instead, do this: ```svelte { one(e); two(e); }} > ... ``` When spreading props, local event handlers must go _after_ the spread, or they risk being overwritten: ```svelte { doStuff(e); props.onclick?.(e); }} > ... ``` > [!DETAILS] Why we did this > `createEventDispatcher` was always a bit boilerplate-y: > > - import the function > - call the function to get a dispatch function > - call said dispatch function with a string and possibly a payload > - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent` > > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way props are now the more sensible thing to do. > > The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only usable on DOM elements. > > Multiple listeners for the same event are also no longer possible, but it was something of an anti-pattern anyway, since it impedes there are many attributes, it becomes harder to spot that there are two handlers unless they are right next to each other. It also implies that the two handlers are independent, when in fact something like `event.stopImmediatePropagation()` inside `one` would prevent `two` from being called. > > By deprecating `createEventDispatcher` and the `on:` directive in favour of callback props and normal element properties, we: > > - reduce Svelte's learning curve > - remove boilerplate, particularly around `createEventDispatcher` > - remove the overhead of creating `CustomEvent` objects for events that may not even have listeners > - add the ability to spread event handlers > - add the ability to know which event handlers were provided to a component > - add the ability to express whether a given event handler is required or optional > - increase type safety (previously, it was effectively impossible for Svelte to guarantee that a component didn't emit a particular event) ## Snippets instead of slots In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets, which are more powerful and flexible, and so slots are deprecated in Svelte 5. They continue to work, however, and you can pass snippets to a component that uses slots: ```svelte ``` ```svelte default child content {#snippet foo({ message })} message from child: {message} {/snippet} ``` (The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.) When using custom elements, you should still use `` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it. ### Default content In Svelte 4, the easiest way to pass a piece of UI to the child was using a ``. In Svelte 5, this is done using the `children` prop instead, which is then shown with `{@render children()}`: ```svelte ------ +++{@render children?.()}+++ ``` ### Multiple content placeholders If you wanted multiple UI placeholders, you had to use named slots. In Svelte 5, use props instead, name them however you like and `{@render ...}` them: ```svelte ------ +++{@render header()}+++ ------ +++{@render main()}+++ ------ +++{@render footer()}+++ ``` ### Passing data back up In Svelte 4, you would pass data to a `` and then retrieve it with `let:` in the parent component. In Svelte 5, snippets take on that responsibility: ```svelte +++{#snippet item(text)}+++ {text} +++{/snippet}+++ ---No items yet--- +++{#snippet empty()} No items yet {/snippet}+++ ``` ```svelte {#if items.length} {#each items as entry} ------ +++{@render item(entry)}+++ {/each} {:else} ------ +++{@render empty?.()}+++ {/if} ``` > [!DETAILS] Why we did this > Slots were easy to get started with, but the more advanced the use case became, the more involved and confusing the syntax became: > > - the `let:` syntax was confusing to many people as it _creates_ a variable whereas all other `:` directives _receive_ a variable > - the scope of a variable declared with `let:` wasn't clear. In the example above, it may look like you can use the `item` slot prop in the `empty` slot, but that's not true > - named slots had to be applied to an element using the `slot` attribute. Sometimes you didn't want to create an element, so we had to add the `` API > - named slots could also be applied to a component, which changed the semantics of where `let:` directives are available (even today us maintainers often don't know which way around it works) > > Snippets solve all of these problems by being much more readable and clear. At the same time they're more powerful as they allow you to define sections of UI that you can render _anywhere_, not just passing them as props to a component. ## Migration script By now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive — something you don't want to do by hand. We thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following bump core dependencies in your `package.json` - migrate to runes (`let` → `$state` etc) - migrate to event attributes for DOM elements (`on:click` → `onclick`) - migrate slot creations to render tags (`` → `{@render children()}`) - migrate slot usages to snippets (`...` → `{#snippet x()}...{/snippet}`) - migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`) You can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button. Not everything can be migrated automatically, and some migrations need manual cleanup afterwards. The following sections describe these in more detail. ### run You may see that the migration script converts some of your `$:` statements to a `run` function which is imported from `svelte/legacy`. This happens if the migration script couldn't reliably migrate the statement to a `$derived` and concluded this is a side effect instead. In some cases this may be wrong and it's best to change this to use a `$derived` instead. In other cases it may be right, but since `$:` statements also ran on the server but `$effect` does not, it isn't safe to transform it as such. Instead, `run` is used as a stopgap solution. `run` mimics most of the characteristics of `$:`, in that it runs on the server once, and runs as `$effect.pre` on the client (`$effect.pre` runs _before_ changes are applied to the DOM; most likely you want to use `$effect` instead). ```svelte ``` ### Event modifiers Event modifiers are not applicable to event attributes (e.g. you can't do `onclick|preventDefault={...}`). Therefore, when migrating event directives to event attributes, we need a function-replacement for these modifiers. These are imported from `svelte/legacy`, and should be migrated away from in favor of e.g. just using `event.preventDefault()`. ```svelte { +++event.preventDefault();+++ // ... })} > click me ``` ### Things that are not automigrated The migration script does not convert `createEventDispatcher`. You need to adjust those parts manually. It doesn't do it because it's too risky because it could result in breakage for users of the component, which the migration script cannot find out. The migration script does not convert `beforeUpdate/afterUpdate`. It doesn't do it because it's impossible to determine the actual intent of the code. As a rule of thumb you can often go with a combination of `$effect.pre` (runs at the same time as `beforeUpdate` did) and `tick` (imported from `svelte`, allows you to wait until changes are applied to the DOM and then do some work). ## Components are no longer classes In Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate components, you should use `mount` or `hydrate` (imported from `svelte`) instead. If you see this error using SvelteKit, try updating to the latest version of SvelteKit first, which adds support for Svelte 5. If you're using Svelte without SvelteKit, you'll likely have a `main.js` file (or similar) which you need to adjust: ```js +++import { mount } from 'svelte';+++ import App from './App.svelte' ---const app = new App({ (\"app\") });--- +++const app = mount(App, { (\"app\") });+++ export default app; ``` `mount` and `hydrate` have the exact same API. The difference is that `hydrate` will pick up the Svelte's server-rendered HTML inside its target and hydrate it. Both return an object with the exports of the component and potentially property accessors (if compiled with `accessors: true`). They do not come with the `$on`, `$set` and `$destroy` methods you may know from the class component API. These are its `$on`, instead of listening to events, pass them via the `events` property on the options argument. ```js +++import { mount } from 'svelte';+++ import App from './App.svelte' ---const app = new App({ (\"app\") }); app.$on('event', callback);--- +++const app = mount(App, { (\"app\"), events: { } });+++ ``` > [!NOTE] Note that using `events` is discouraged — instead, [use callbacks](#Event-changes) For `$set`, use `$state` instead to create a reactive property object and manipulate it. If you're doing this inside a `.js` or `.ts` file, adjust the ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`. ```js +++import { mount } from 'svelte';+++ import App from './App.svelte' ---const app = new App({ (\"app\"), props: { foo: 'bar' } }); app.$set({ foo: 'baz' });--- +++const props = $state({ foo: 'bar' }); const app = mount(App, { (\"app\"), props }); props.foo = 'baz';+++ ``` For `$destroy`, use `unmount` instead. ```js +++import { mount, unmount } from 'svelte';+++ import App from './App.svelte' ---const app = new App({ (\"app\"), props: { foo: 'bar' } }); app.$destroy();--- +++const app = mount(App, { (\"app\") }); unmount(app);+++ ``` As a stop-gap-solution, you can also use `createClassComponent` or `asClassComponent` (imported from `svelte/legacy`) instead to keep the same API known from Svelte 4 after instantiating. ```js +++import { createClassComponent } from 'svelte/legacy';+++ import App from './App.svelte' ---const app = new App({ (\"app\") });--- +++const app = createClassComponent({ , (\"app\") });+++ export default app; ``` If this component is not under your control, you can use the `compatibility.componentApi` compiler option for auto-applied backwards compatibility, which means code using `new Component(...)` keeps working without adjustments (note that this adds a bit of overhead to each component). This will also add `$set` and `$on` methods for all component instances you get through `bind:this`. ```js /// svelte.config.js export default { compilerOptions: { compatibility: { } } }; ``` Note that `mount` and `hydrate` are _not_ synchronous, so things like `onMount` won't have been called by the time the function returns and the pending block of promises will not have been rendered yet (because `#await` waits a microtask to wait for a potentially immediately-resolved promise). If you need that guarantee, call `flushSync` (import from `'svelte'`) after calling `mount/hydrate`. ### Server API changes Similarly, components no longer have a `render` method when compiled for server-side rendering. Instead, pass the function to `render` from `svelte/server`: ```js +++import { render } from 'svelte/server';+++ import App from './App.svelte'; ---const { html, head } = App.render({ props: { message: 'hello' }});--- +++const { html, head } = render(App, { props: { message: 'hello' }});+++ ``` In Svelte 4, rendering a component to a string also returned the CSS of all components. In Svelte 5, this is no longer the case by default because most of the time you're using a tooling chain that takes care of it in other ways (like SvelteKit). If you need CSS to be returned from `render`, you can set the `css` compiler option to `'injected'` and it will add `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.205Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":3655}}112{"id":"doc-https_svelte_dev_docs_kit_page_options_llms_txt-ecaaf81d","source":"documentation","title":"https://svelte.dev/docs/kit/page-options/llms.txt","url":"https://svelte.dev/docs/kit/page-options/llms.txt","text":"` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an [`entries`](#entries) function from your dynamic route. While prerendering, the value of `building` imported from [`$app/environment`]($app-environment) will be `true`. ### Prerendering server routes Unlike the other page options, `prerender` also applies to `+server.js` files. These files are _not_ affected by layouts, but will inherit default values from the pages that fetch data from them, if any. For example if a `+page.js` contains this `load` function... ```js /// file: +page.js export const prerender = true; /** @type {import('./$types').PageLoad} */ export async function load({ fetch }) { const res = await fetch('/my-server-route.json'); return await res.json(); } ``` ...then `src/routes/my-server-route.json/+server.js` will be treated as prerenderable if it doesn't contain its own `export const prerender = false`. ### When not to prerender The basic rule is a page to be prerenderable, any two users hitting it directly must get the same content from the server. > [!NOTE] Not all pages are suitable for prerendering. Any content that is prerendered will be seen by all users. You can of course fetch personalized data in `onMount` in a prerendered page, but this may result in a poorer user experience since it will involve blank initial content or loading indicators. Note that you can still prerender pages that load data based on the page's parameters, such as a `src/routes/blog/[slug]/+page.svelte` route. Accessing [`url.searchParams`](load#Using-URL-data-url) during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in `onMount`). Pages with [actions](form-actions) cannot be prerendered, because a server must be able to handle the action `POST` requests. ### Route conflicts Because prerendering writes to the filesystem, it isn't possible to have two endpoints that would cause a directory and a file to have the same name. For example, `src/routes/foo/+server.js` and `src/routes/foo/bar/+server.js` would try to create `foo` and `foo/bar`, which is impossible. For that reason among others, it's recommended that you always include a file extension — `src/routes/foo.json/+server.js` and `src/routes/foo/bar.json/+server.js` would result in `foo.json` and `foo/bar.json` files living harmoniously side-by-side. For _pages_, we skirt around this problem by writing `foo/index.html` instead of `foo`. ### Troubleshooting If you encounter an error like 'The following routes were marked as prerenderable, but were not prerendered' it's because the route in question (or a parent layout, if it's a page) has `export const prerender = true` but the page wasn't reached by the prerendering crawler and thus wasn't prerendered. Since these routes cannot be dynamically server-rendered, this will cause errors when people try to access the route in question. There are a few ways to fix it: * Ensure that SvelteKit can find the route by following links from [`config.kit.prerender.entries`](configuration#prerender) or the [`entries`](#entries) page option. Add links to dynamic routes (i.e. pages with `[parameters]` ) to this option if they are not found through crawling the other entry points, else they are not prerendered because SvelteKit doesn't know what value the parameters should have. Pages not marked as prerenderable will be ignored and their links to other pages will not be crawled, even if some of them would be prerenderable. * Ensure that SvelteKit can find the route by discovering a link to it from one of your other prerendered pages that have server-side rendering enabled. * Change `export const prerender = true` to `export const prerender = 'auto'`. Routes with `'auto'` can be dynamically server rendered ## entries SvelteKit will discover pages to prerender automatically, by starting at _entry points_ and crawling them. By default, all your non-dynamic routes are considered entry points — for example, if you have these routes... ```sh / # non-dynamic /blog # non-dynamic /blog/[slug] # dynamic, because of `[slug]` ``` ...SvelteKit will prerender `/` and `/blog`, and in the process discover links like `\n\n` which give it new pages to prerender. Most of the time, that's enough. In some situations, links to pages like `/blog/hello-world` might not exist (or might not exist on prerendered pages), in which case we need to tell SvelteKit about their existence. This can be done with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an `entries` function from a `+page.js`, a `+page.server.js` or a `+server.js` belonging to a dynamic route: ```js /// /routes/blog/[slug]/+page.server.js /** @type {import('./$types').EntryGenerator} */ export function entries() { return [ { slug: 'hello-world' }, { slug: 'another-blog-post' } ]; } export const prerender = true; ``` `entries` can be an `async` function, allowing you to (for example) retrieve a list of posts from a CMS or database, in the example above. ## ssr Normally, SvelteKit renders your page on the server before sending that HTML to the client where it's [hydrated](glossary#Hydration). This is also required for prerendering to save the full contents of a page. If you set `ssr` to `false`, it renders an empty 'shell' page instead. This is useful if your page is unable to be rendered on the server (because you use browser-only globals like `document` for example), but in most situations it's not recommended ([see appendix](glossary#SSR)). ```js /// file: +page.js export const ssr = false; // If both `ssr` and `csr` are `false`, nothing will be rendered! ``` If you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an [SPA](glossary#SPA). You should not do this if your goal is to build a [statically generated site](glossary#SSG). > [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead. ## csr Ordinarily, SvelteKit [hydrates](glossary#Hydration) your server-rendered HTML into an interactive client-side-rendered (CSR) page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can disable CSR: ```js /// file: +page.js export const csr = false; // If both `csr` and `ssr` are `false`, nothing will be rendered! ``` Disabling CSR does not ship any JavaScript to the client. This means: * The webpage should work with HTML and CSS only. * `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.206Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":1803}}113{"id":"doc-slots_svelte_docs-47bfd42a","source":"documentation","title":"$$slots • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-$$slots","text":"Example:\n```text\n<Card>\n\t<h1 slot=\"title\">Blog Post Title</h1>\n\t<!-- No slot named \"description\" was provided so the optional slot will not be rendered. -->\n</Card>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.207Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":46}}114{"id":"doc-svelte_component_svelte_docs-57ede358","source":"documentation","title":"<svelte:component> • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-svelte-component","text":"Example:\n```text\n<svelte:component this={MyComponent} />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.207Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":19}}115{"id":"doc-https_svelte_dev_docs_kit_snapshots_llms_txt-ff6653dc","source":"documentation","title":"https://svelte.dev/docs/kit/snapshots/llms.txt","url":"https://svelte.dev/docs/kit/snapshots/llms.txt","text":"Comment <button>Post comment</button> </form> ``` When you navigate away from this page, the `capture` function is called immediately before the page updates, and the returned value is associated with the current entry in the browser's history stack. If you navigate back, the `restore` function is called with the stored value as soon as the page is updated. The data must be serializable as JSON so that it can be persisted to `sessionStorage`. This allows the state to be restored when the page is reloaded, or when the user navigates back from a different site. > [!NOTE] Avoid returning very large objects from `capture` — once captured, objects will be retained in memory for the duration of the session, and in extreme cases may be too large to persist to `sessionStorage`.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.208Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":199}}116{"id":"doc-svelte_fragment_svelte_docs-efe721e6","source":"documentation","title":"<svelte:fragment> • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-svelte-fragment","text":"Example:\n```text\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<Widget>\n\t<h1 slot=\"header\">Hello</h1>\n\t<svelte:fragment slot=\"footer\">\n\t\t<p>All rights reserved.</p>\n\t\t<p>Copyright (c) 2019 Svelte Industries</p>\n\t</svelte:fragment>\n</Widget>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Widget from './Widget.svelte';\n</script>\n\n<Widget>\n\t<h1 slot=\"header\">Hello</h1>\n\t<svelte:fragment slot=\"footer\">\n\t\t<p>All rights reserved.</p>\n\t\t<p>Copyright (c) 2019 Svelte Industries</p>\n\t</svelte:fragment>\n</Widget>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.208Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":31,"estimatedTokens":135}}117{"id":"doc-https_svelte_dev_docs_kit_environment_variables_-558af1db","source":"documentation","title":"https://svelte.dev/docs/kit/environment-variables/llms.txt","url":"https://svelte.dev/docs/kit/environment-variables/llms.txt","text":"` component shown here will be excluded from the JavaScript bundle unless `SHOW_DEBUG_OVERLAY` is truthy: ```svelte {#if SHOW_DEBUG_OVERLAY} {/if} ``` But if the variable is set before building the app... ```bash SHOW_DEBUG_OVERLAY=true npm run build ``` ...then the component will be included and shown. ### Documenting variables You can document the purpose of an environment variable by adding a `description`: ```ts /// /env.ts import { defineEnvVars } from '@sveltejs/kit/env'; export const variables = defineEnvVars({ CACHE_TTL_SECONDS: { description: 'How long to cache responses, in seconds' } }); ``` Hovering over `CACHE_TTL_SECONDS` in your app code will show the description.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.208Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":176}}118{"id":"doc-https_svelte_dev_docs_kit_shallow_routing_llms_t-0af41c2c","source":"documentation","title":"https://svelte.dev/docs/kit/shallow-routing/llms.txt","url":"https://svelte.dev/docs/kit/shallow-routing/llms.txt","text":"history.back()} /> {/if} ``` The modal can be dismissed by navigating back (unsetting `page.state.showModal`) or by interacting with it in a way that causes the `close` callback to run, which will navigate back programmatically. ## API The first argument to `pushState` is the URL, relative to the current URL. To stay on the current URL, use `''`. The second argument is the new page state, which can be accessed via the [page object]($app-state#page) as `page.state`. You can make page state type-safe by declaring an [`App.PageState`](types#PageState) interface (usually in `src/app.d.ts`). To set page state without creating a new history entry, use `replaceState` instead of `pushState`. > [!LEGACY] > `page.state` from `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$page.state` from `$app/stores` instead. ## Loading data for a route When shallow routing, you may want to render another `+page.svelte` inside the current page. For example, clicking on a photo thumbnail could pop up the detail view without navigating to the photo page. For this to work, you need to load the data that the `+page.svelte` expects. A convenient way to do this is to use [`preloadData`]($app-navigation#preloadData) inside the `click` handler of an `` element. If the element (or a parent) uses [`data-sveltekit-preload-data`](link-options#data-sveltekit-preload-data), the data will have already been requested, and `preloadData` will reuse that request. ```svelte {#each data.thumbnails as thumbnail} { if (innerWidth < 640 // bail if the screen is too small || e.shiftKey // or the link is opened in a new window || e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey) // should also consider clicking with a mouse scroll wheel ) return; // prevent navigation e.preventDefault(); const { href } = e.currentTarget; // run `load` functions (or rather, get the result of the `load` functions // that are already running because of `data-sveltekit-preload-data`) const result = await preloadData(href); if (result.type === 'loaded' && result.status === 200) { pushState(href, { }); } else { // something bad happened! try navigating goto(href); } }} > {/each} {#if page.state.selected} history.back()}> {/if} ``` ## Caveats During server-side rendering, `page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate. Shallow routing is a feature that requires JavaScript to work. Be mindful when using it and try to think of sensible fallback behavior in case JavaScript isn't available.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.208Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":679}}119{"id":"doc-https_svelte_dev_docs_kit_adapter_node_llms_txt-42689aaf","source":"documentation","title":"https://svelte.dev/docs/kit/adapter-node/llms.txt","url":"https://svelte.dev/docs/kit/adapter-node/llms.txt","text":", , ``` Some guides will tell you to read the left-most address, but this leaves you [vulnerable to spoofing](https://adam-p.ca/blog/2022/03/x-forwarded-for/): ``` , , , ``` We instead read from the _right_, accounting for the number of trusted proxies. In this case, we would use `XFF_DEPTH=3`. > [!NOTE] If you need to read the left-most address instead (and don't care about spoofing) — for example, to offer a geolocation service, where it's more important for the IP address to be _real_ than _trusted_, you can do so by inspecting the `x-forwarded-for` header within your app. ### `BODY_SIZE_LIMIT` The maximum request body size to accept in bytes including while streaming. The body size can also be specified with a unit suffix for kilobytes (`K`), megabytes (`M`), or gigabytes (`G`). For example, `512K` or `1M`. Defaults to 512kb. You can disable this option with a value of `Infinity` (0 in older versions of the adapter) and implement a custom check in [`handle`](hooks#handle) if you need something more advanced. ### `SHUTDOWN_TIMEOUT` The number of seconds to wait before forcefully closing any remaining connections after receiving a `SIGTERM` or `SIGINT` signal. Defaults to `30`. Internally the adapter calls [`closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections). See [Graceful shutdown](#Graceful-shutdown) for more details. ### `IDLE_TIMEOUT` When using systemd socket activation, `IDLE_TIMEOUT` specifies the number of seconds after which the app is automatically put to sleep when receiving no requests. If not set, the app runs continuously. See [Socket activation](#Socket-activation) for more details. ### `KEEP_ALIVE_TIMEOUT` and `HEADERS_TIMEOUT` The number of seconds for [`keepAliveTimeout`](https://nodejs.org/api/http.html#serverkeepalivetimeout) and [`headersTimeout`](https://nodejs.org/api/http.html#serverheaderstimeout). ## Options The adapter can be configured with various options: ```js // @errors: 2307 /// import adapter from '@sveltejs/adapter-node'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { ({ // default options are shown out: 'build', , envPrefix: '' }) } }; export default config; ``` ### out The directory to build the server to. It defaults to `build` — i.e. `node build` would start the server locally after it has been created. ### precompress Enables precompressing using gzip and brotli for assets and prerendered pages. It defaults to `true`. ### envPrefix If you need to change the name of the environment variables used to configure the deployment (for example, to deconflict with environment variables you don't control), you can specify a prefix: ```js envPrefix: 'MY_CUSTOM_'; ``` ```sh MY_CUSTOM_HOST=127.0.0.1 \\ MY_CUSTOM_PORT=4000 \\ MY_CUSTOM_ORIGIN=https://my.site \\ node build ``` ## Graceful shutdown By default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM` or `SIGINT` signal is received. It reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback)) 2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections)) 3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections)) > [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server). You can listen to the `sveltekit:shutdown` event which is emitted after the HTTP server has closed all connections. Unlike Node's `exit` event, the `sveltekit:shutdown` event supports asynchronous operations and is always emitted when all connections are closed even if the server has dangling work such as open database connections. ```js // @errors: 2304 process.on('sveltekit:shutdown', async (reason) => { await jobs.stop(); await db.close(); }); ``` The parameter `reason` has one of the following `SIGINT` - shutdown was triggered by a `SIGINT` signal - `SIGTERM` - shutdown was triggered by a `SIGTERM` signal - `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) ## Socket activation Most Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](https://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create. > [!NOTE] You can still use [`envPrefix`](#Options-envPrefix) with systemd socket activation. `LISTEN_PID` and `LISTEN_FDS` are always read without a prefix. To take advantage of socket activation follow these steps. 1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in. ```ini /// file: /etc/systemd/system/myapp.service [Service] Environment=NODE_ENV=production IDLE_TIMEOUT=60 ExecStart=/usr/bin/node /usr/bin/myapp/build ``` 2. Create an accompanying [socket unit](https://www.freedesktop.org/software/systemd/man/latest/systemd.socket.html). The adapter only accepts a single socket. ```ini /// file: /etc/systemd/system/myapp.socket [Socket] ListenStream=3000 [Install] WantedBy=sockets.target ``` 3. Make sure systemd has recognised both units by running `sudo systemctl daemon-reload`. Then enable the socket on boot and start it immediately using `sudo systemctl enable --now myapp.socket`. The app will then automatically start once the first request is made to `localhost:3000`. ## Custom server The adapter creates two files in your build directory — `index.js` and `handler.js`. Running `index.js` — e.g. `node build`, if you use the default build directory — will start a server on the configured port. Alternatively, you can import the `handler.js` file, which exports a handler suitable for use with [Express](https://github.com/expressjs/express), [Connect](https://github.com/senchalabs/connect) or [Polka](https://github.com/lukeed/polka) (or even just the built-in [`http.createServer`](https://nodejs.org/dist/latest/docs/api/http.html#httpcreateserveroptions-requestlistener)) and set up your own server: ```js // @errors: 2307 7006 /// import { handler } from './build/handler.js'; import express from 'express'; const app = express(); // add a route that lives separately from the SvelteKit app app.get('/healthcheck', (req, res) => { res.end('ok'); }); // let SvelteKit handle everything else, including serving prerendered pages and static assets app.use(handler); app.listen(3000, () => { console.log('listening on port 3000'); }); ``` > [!NOTE] When you use `handler.js` in a custom server, only the environment variables read by the handler itself take effect: `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, `PORT_HEADER`, `ADDRESS_HEADER`, `XFF_DEPTH`, and `BODY_SIZE_LIMIT`. > > The server-lifecycle variables (`PORT`, `HOST`, `SOCKET_PATH`, `SHUTDOWN_TIMEOUT`, `IDLE_TIMEOUT`, `KEEP_ALIVE_TIMEOUT`, `HEADERS_TIMEOUT`, `LISTEN_PID`, `LISTEN_FDS`) are only honored by the default `node build` server. Implement them yourself in a custom server if you need the same behavior — for example, the snippet above listens on a hardcoded `3000` regardless of `PORT`.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.209Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":2010}}120{"id":"doc-svelte_self_svelte_docs-04ee270a","source":"documentation","title":"<svelte:self> • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-svelte-self","text":"Example:\n```text\n<script>\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<svelte:self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport Self from './App.svelte'\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<Self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Self from './App.svelte'\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<Self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.209Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":45,"estimatedTokens":152}}121{"id":"doc-https_svelte_dev_docs_kit_single_page_apps_llms_-3dbd73a1","source":"documentation","title":"https://svelte.dev/docs/kit/single-page-apps/llms.txt","url":"https://svelte.dev/docs/kit/single-page-apps/llms.txt","text":"RewriteEngine On RewriteBase / RewriteRule ^200\\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /200.html [L]\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.209Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":44}}122{"id":"doc-https_svelte_dev_docs_kit_adapter_cloudflare_llm-4f6052eb","source":"documentation","title":"https://svelte.dev/docs/kit/adapter-cloudflare/llms.txt","url":"https://svelte.dev/docs/kit/adapter-cloudflare/llms.txt","text":"'] } }) } }; export default config; ``` ## Options ### config Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option. ### platformProxy Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options. ### fallback Whether to render a plaintext 404.html page or a rendered SPA fallback page for non-matching asset requests. For Cloudflare Workers, the default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) Wrangler configuration setting is set to `\"404-page\"`, this page will be served if a request fails to match an asset. If `assets.not_found_handling` is set to `\"single-page-application\"`, the adapter will render a SPA fallback `index.html` page regardless of the `fallback` option specified. For Cloudflare Pages, this page will only be served when a request that matches an entry in `routes.exclude` fails to match an asset. Most of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually exclude a set of prerendered pages without exceeding the 100 route limit, you may wish to use `spa` instead to avoid showing an unstyled 404 page to users. See Cloudflare Pages' [Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info. ### routes Only for Cloudflare Pages. Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`. - `include` defines routes that will invoke a function, and defaults to `['/*']` - `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special `` contains your app's build artifacts (the files generated by Vite) - `` contains the contents of your `static` directory - `` contains a list of pathnames from your [`_redirects` file](https://developers.cloudflare.com/pages/configuration/redirects/) at the root - `` contains a list of prerendered pages - `` (the default) contains all of the above You can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`. ## Cloudflare Workers ### Basic configuration When building for Cloudflare Workers, this adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this: ```jsonc /// { \"name\": \"\", \"main\": \".svelte-kit/cloudflare/_worker.js\", \"compatibility_flags\": [\"nodejs_als\"], \"compatibility_date\": \"\", \"assets\": { \"binding\": \"ASSETS\", \"directory\": \".svelte-kit/cloudflare\", } } ``` ### Deployment You can use the Wrangler CLI to deploy your application by running `npx wrangler deploy` or use the [Cloudflare Git integration](https://developers.cloudflare.com/workers/ci-cd/builds/) to enable automatic builds and deployments on push. ## Cloudflare Pages ### Deployment Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin. If you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like Framework preset – SvelteKit - Build command – `npm run build` or `vite build` - Build output directory – `.svelte-kit/cloudflare` Once configured, go to the **Runtime** section of your project settings, and add the `nodejs_als` compatibility flag to enable the [Node.js AsyncLocalStorage](https://developers.cloudflare.com/workers/configuration/compatibility-flags/#nodejs-asynclocalstorage). Alternatively, do this in your wrangler config using the `compatibility_flags` array. ### Further reading You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site on Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/). ### Notes Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/). ## Runtime APIs The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints: ```js // @filename: ambient.d.ts import { DurableObjectNamespace } from '@cloudflare/workers-types'; declare global { namespace App { interface Platform { env: { }; } } } // @filename: +server.js // ---cut--- // @errors: 2355 2322 /// file: +server.js /** @type {import('./$types').RequestHandler} */ export async function POST({ request, platform }) { const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x'); } ``` > [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables. To make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`: ```ts /// /app.d.ts +++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++ declare global { namespace App { interface Platform { +++ env: { };+++ } } } export {}; ``` ### Testing locally Cloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings. For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev ``` ### Worker size limits When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information. ### Accessing the file system You can't use `fs` in Cloudflare Workers. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It works by fetching the file from the deployed public assets location. Alternatively, you can [prerender](page-options#prerender) the routes in question. ## Migrating from Workers Sites Cloudflare no longer recommends using [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) and instead recommends using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). To migrate, replace `@sveltejs/adapter-cloudflare-workers` with `@sveltejs/adapter-cloudflare` and remove all `site` configuration settings from your Wrangler configuration file, then add the `assets.directory` and `assets.binding` configuration settings: ### svelte.config.js ```js // @errors: 2307 /// ---import adapter from '@sveltejs/adapter-cloudflare-workers';--- +++import adapter from '@sveltejs/adapter-cloudflare';+++ /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { () } }; export default config; ``` ### wrangler.toml ```toml /// ---site.bucket = \".cloudflare/public\"--- +++assets.directory = \".cloudflare/public\" assets.binding = \"ASSETS\" # Exclude this if you don't have a `main` key configured.+++ ``` ### wrangler.jsonc ```jsonc /// { --- \"site\": { \"bucket\": \".cloudflare/public\" },--- +++ \"assets\": { \"directory\": \".cloudflare/public\", \"binding\": \"ASSETS\" // Exclude this if you don't have a `main` key configured. }+++ } ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.210Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":2371}}123{"id":"doc-https_svelte_dev_docs_kit_link_options_llms_txt-824be965","source":"documentation","title":"https://svelte.dev/docs/kit/link-options/llms.txt","url":"https://svelte.dev/docs/kit/link-options/llms.txt","text":"` elements (rather than framework-specific `` components) are used to navigate between the routes of your app. If the user clicks on a link whose `href` is 'owned' by the app (as opposed to, say, a link to an external site) then SvelteKit will navigate to the new page by importing its code and then calling any `load` functions it needs to fetch data. You can customise the behaviour of links with `data-sveltekit-*` attributes. These can be applied to the `\n\n` itself, or to a parent element. These options also apply to `\n\n` elements with [`method=\"GET\"`](form-actions#GET-vs-POST). ## data-sveltekit-preload-data Before the browser registers that the user has clicked on a link, we can detect that they've hovered the mouse over it (on desktop) or that a `touchstart` or `mousedown` event was triggered. In both cases, we can make an educated guess that a `click` event is coming. SvelteKit can use this information to get a head start on importing the code and fetching the page's data, which can give us an extra couple of hundred milliseconds — the difference between a user interface that feels laggy and one that feels snappy. We can control this behaviour with the `data-sveltekit-preload-data` attribute, which can have one of two `\"hover\"` means that preloading will start if the mouse comes to a rest over a link. On mobile, preloading begins on `touchstart` - `\"tap\"` means that preloading will start as soon as a `touchstart` or `mousedown` event is registered The default project template has a `data-sveltekit-preload-data=\"hover\"` attribute applied to the `` element in `src/app.html`, meaning that every link is preloaded on hover by default: ```html %sveltekit.body% ``` Sometimes, calling `load` when the user hovers over a link might be undesirable, either because it's likely to result in false positives (a click needn't follow a hover) or because data is updating very quickly and a delay could mean staleness. In these cases, you can specify the `\"tap\"` value, which causes SvelteKit to call `load` only when the user taps or clicks on a link: ```html Get current stonk values ``` > [!NOTE] You can also programmatically invoke `preloadData` from `$app/navigation`. Data will never be preloaded if the user has chosen reduced data usage, meaning [`navigator.connection.saveData`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData) is `true`. ## data-sveltekit-preload-code Even in cases where you don't want to preload _data_ for a link, it can be beneficial to preload the _code_. The `data-sveltekit-preload-code` attribute works similarly to `data-sveltekit-preload-data`, except that it can take one of four values, in decreasing 'eagerness': - `\"eager\"` means that links will be preloaded straight away - `\"viewport\"` means that links will be preloaded once they enter the viewport - `\"hover\"` - as above, except that only code is preloaded - `\"tap\"` - as above, except that only code is preloaded Note that `viewport` and `eager` only apply to links that are present in the DOM immediately following navigation — if a link is added later (in an `{#if ...}` block, for example) it will not be preloaded until triggered by `hover` or `tap`. This is to avoid performance pitfalls resulting from aggressively observing the DOM for changes. > [!NOTE] Since preloading code is a prerequisite for preloading data, this attribute will only have an effect if it specifies a more eager value than any `data-sveltekit-preload-data` attribute that is present. As with `data-sveltekit-preload-data`, this attribute will be ignored if the user has chosen reduced data usage. ## data-sveltekit-reload Occasionally, we need to tell SvelteKit not to handle a link, but allow the browser to handle it. Adding a `data-sveltekit-reload` attribute to a link... ```html Path ``` ...will cause a full-page navigation when the link is clicked. Links with a `rel=\"external\"` attribute will receive the same treatment. In addition, they will be ignored during [prerendering](page-options#prerender). ## data-sveltekit-replacestate Sometimes you don't want navigation to create a new entry in the browser's session history. Adding a `data-sveltekit-replacestate` attribute to a link... ```html Path ``` ...will replace the current `history` entry rather than creating a new one with `pushState` when the link is clicked. ## data-sveltekit-keepfocus Sometimes you don't want [focus to be reset](accessibility#Focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input. Adding a `data-sveltekit-keepfocus` attribute to it... ```html\n\n` tag (and not a previously focused element) and screen reader and other assistive technology users often expect focus to be moved after a navigation. You should also only use this attribute on elements that still exist after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users. ## data-sveltekit-noscroll When navigating to internal links, SvelteKit mirrors the browser's default navigation will change the scroll position to 0,0 so that the user is at the very top left of the page (unless the link includes a `#hash`, in which case it will scroll to the element with a matching ID). In certain cases, you may wish to disable this behaviour. Adding a `data-sveltekit-noscroll` attribute to a link... ```html\n\na b c d e f\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.211Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":11,"estimatedTokens":1373}}124{"id":"doc-https_svelte_dev_docs_kit_form_actions_llms_txt-60740f16","source":"documentation","title":"https://svelte.dev/docs/kit/form-actions/llms.txt","url":"https://svelte.dev/docs/kit/form-actions/llms.txt","text":"Successfully logged in! Welcome back, {data.user.name}\n\n` the returned `form` data referred to with an `id` property or similar. ### Redirects Redirects (and errors) work exactly the same as in [`load`](load#Redirects): ```js // @errors: 2345 /// /routes/login/+page.server.js // @filename: ambient.d.ts declare module '$lib/server/db'; // @filename: index.js // ---cut--- import { fail, +++redirect+++ } from '@sveltejs/kit'; import * as db from '$lib/server/db'; /** @satisfies {import('./$types').Actions} */ export const actions = { ({ cookies, request, +++url+++ }) => { const data = await request.formData(); const email = data.get('email'); const password = data.get('password'); const user = await db.getUser(email); if (!user) { return fail(400, { email, }); } if (user.password !== db.hash(password)) { return fail(400, { email, }); } cookies.set('sessionid', await db.createSession(user), { path: '/' }); +++ if (url.searchParams.has('redirectTo')) { redirect(303, url.searchParams.get('redirectTo')); }+++ return { }; }, (event) => { // TODO register the user } }; ``` ## Loading data After an action runs, the page will be re-rendered (unless a redirect or an unexpected error occurs), with the action's return value available to the page as the `form` prop. This means that your page's `load` functions will run after the action completes. Note that `handle` runs before the action is invoked, and does not rerun before the `load` functions. This means that if, for example, you use `handle` to populate `event.locals` based on a cookie, you must update `event.locals` when you set or delete the cookie in an action: ```js /// /hooks.server.js // @filename: ambient.d.ts declare namespace App { interface Locals { user: { } | null } } // @filename: global.d.ts declare global { function getUser(sessionid: string | undefined): { }; } export {}; // @filename: index.js // ---cut--- /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { event.locals.user = await getUser(event.cookies.get('sessionid')); return resolve(event); } ``` ```js /// /routes/account/+page.server.js // @filename: ambient.d.ts declare namespace App { interface Locals { user: { } | null } } // @filename: index.js // ---cut--- /** @type {import('./$types').PageServerLoad} */ export function load(event) { return { }; } /** @satisfies {import('./$types').Actions} */ export const actions = { (event) => { event.cookies.delete('sessionid', { path: '/' }); event.locals.user = null; } }; ``` ## Progressive enhancement In the preceding sections we built a `/login` action that [works without client-side JavaScript](https://kryogenix.org/code/browser/everyonehasjs.html) — not a `fetch` in sight. That's great, but when JavaScript _is_ available we can progressively enhance our form interactions to provide a better user experience. ### The easiest way to progressively enhance a form is to add the `use:enhance` action: ```svelte /// /routes/login/+page.svelte ``` > [!NOTE] `use:enhance` can only be used with forms that have `method=\"POST\"` and point to actions defined in a `+page.server.js` file. It will not work with `method=\"GET\"`, which is the default for forms without a specified method. Attempting to use `use:enhance` on forms without `method=\"POST\"` or posting to a `+server.js` endpoint will result in an error. > [!NOTE] Yes, it's a little confusing that the `enhance` action and `` are both called 'action'. These docs are action-packed. Sorry. Without an argument, `use:enhance` will emulate the browser-native behaviour, just without the full-page reloads. It update the `form` property, `page.form` and `page.status` on a successful or invalid response, but only if the action is on the same page you're submitting from. For example, if your form looks like ``, the `form` prop and the `page.form` state will _not_ be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use [`applyAction`](#Progressive-enhancement-Customising-use:enhance) - reset the `` element - invalidate all data using `invalidateAll` on a successful response - call `goto` on a redirect response - render the nearest `+error` boundary if an error occurs - [reset focus](accessibility#Focus-management) to the appropriate element ### Customising To customise the behaviour, you can provide a `SubmitFunction` that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the `ActionResult`. ```svelte { // `formElement` is this `` element // `formData` is its `FormData` object that's about to be submitted // `action` is the URL to which the form is posted // calling `cancel()` will prevent the submission // `submitter` is the `HTMLElement` that caused the form to be submitted return async ({ result, update }) => { // `result` is an `ActionResult` object // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set }; }} > ``` You can use these functions to show and hide loading UI, and so on. If you return a callback, you override the default post-submission behavior. To get it back, call `update`, which accepts `invalidateAll` and `reset` parameters, or use `applyAction` on the result: ```svelte /// /routes/login/+page.svelte { return async ({ result }) => { // `result` is an `ActionResult` object +++ if (result.type === 'redirect') { goto(result.location); } else { await applyAction(result); }+++ }; }} > ``` The behaviour of `applyAction(result)` depends on `result.type`: - `success`, `failure` — sets `page.status` to `result.status` and updates `form` and `page.form` to `result.data` (regardless of where you are submitting from, in contrast to `update` from `enhance`) - `redirect` — calls `goto(result.location, { })` - `error` — renders the nearest `+error` boundary with `result.error` In all cases, [focus will be reset](accessibility#Focus-management). ### Custom event listener We can also implement progressive enhancement ourselves, without `use:enhance`, with a normal event listener on the ``: ```svelte\n\n` elements, using the client-side router instead of a full page navigation: ```html Search ``` Submitting this form will navigate to `/search?q=...` and invoke your load function but will not invoke an action. As with `\n\n` elements, you can set the [`data-sveltekit-reload`](link-options#data-sveltekit-reload), [`data-sveltekit-replacestate`](link-options#data-sveltekit-replacestate), [`data-sveltekit-keepfocus`](link-options#data-sveltekit-keepfocus) and [`data-sveltekit-noscroll`](link-options#data-sveltekit-noscroll) attributes on the `` to control the router's behaviour. ## Further reading - [Tutorial: Forms](/tutorial/kit/the-form-element)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.213Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":9,"estimatedTokens":1706}}125{"id":"doc-https_svelte_dev_docs_kit_debugging_llms_txt-7870abcf","source":"documentation","title":"https://svelte.dev/docs/kit/debugging/llms.txt","url":"https://svelte.dev/docs/kit/debugging/llms.txt","text":". ## Other Editors If you use a different editor, these community guides might be useful for [WebStorm Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug) - [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim) ## Google Chrome and Microsoft Edge Developer Tools It's possible to debug Node.js applications using a browser-based debugger. > [!NOTE] Note this only works with debugging client-side SvelteKit source maps. 1. Run the `--inspect` flag when starting the Vite server with Node.js. For instance: `NODE_OPTIONS=\"--inspect\" npm run dev` 2. Open your site in a new tab. Typically at `localhost:5173`. 3. Open your browser's dev tools, and click on the \"Open dedicated DevTools for Node.js\" icon near the top-left. It should display the Node.js logo. 4. Set up breakpoints and debug your application. You may alternatively open the debugger devtools by navigating to `chrome://inspect` in Google Chrome, or `edge://inspect` in Microsoft Edge. ## References - [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.217Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":286}}126{"id":"doc-sveltekit_error_message-df8c8ce0","source":"documentation","title":"%sveltekit.error.message%","url":"https://svelte.dev/docs/kit/errors/llms.txt","text":"... {#snippet failed(error: App.Error)} {error.message} {/snippet}\n\n# My custom error page\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.217Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":26}}127{"id":"doc-https_svelte_dev_docs_kit_service_workers_llms_t-5a29eacc","source":"documentation","title":"https://svelte.dev/docs/kit/service-workers/llms.txt","url":"https://svelte.dev/docs/kit/service-workers/llms.txt","text":"/// /// // Ensures that the `$service-worker` import has proper type definitions /// // Only necessary if you have an import from `$env/static/public` /// import { build, files, version } from '$service-worker'; // This gives `self` the correct types const self = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (globalThis.self)); // Create a unique cache name for this deployment const CACHE = `cache-${version}`; const ASSETS = [ ...build, // the app itself ...files // everything in `static` ]; self.addEventListener('install', (event) => { // Create a new cache and add all files to it async function addFilesToCache() { const cache = await caches.open(CACHE); await cache.addAll(ASSETS); } event.waitUntil(addFilesToCache()); }); self.addEventListener('activate', (event) => { // Remove previous cached data from disk async function deleteOldCaches() { for (const key of await caches.keys()) { if (key !== CACHE) await caches.delete(key); } } event.waitUntil(deleteOldCaches()); }); self.addEventListener('fetch', (event) => { // ignore POST requests etc if (event.request.method !== 'GET') return; async function respond() { const url = new URL(event.request.url); const cache = await caches.open(CACHE); // `build`/`files` can always be served from the cache if (ASSETS.includes(url.pathname)) { const response = await cache.match(url.pathname); if (response) { return response; } } // for everything else, try the network first, but // fall back to the cache if we're offline try { const response = await fetch(event.request); // if we're offline, fetch can return a value that is not a Response // instead of throwing - and we can't pass this non-Response to respondWith if (!(response instanceof Response)) { throw new Error('invalid response from fetch'); } if (response.status === 200 && !response.headers.get('cache-control')?.includes('no-store')) { cache.put(event.request, response.clone()); } return response; } catch (err) { const response = await cache.match(event.request); if (response) { return response; } // if there's no cache, then just error out // as there is nothing we can do to respond to this request throw err; } } event.respondWith(respond()); }); ``` > [!NOTE] Be careful when caching! In some cases, stale data might be worse than data that's unavailable while offline. Since browsers will empty caches if they get too full, you should also be careful about caching large assets like video files. > [!NOTE] `build` and `prerendered` are empty arrays during development ## Manual registration You can [disable automatic registration](configuration#serviceWorker) if you need to register the service worker with your own logic. The default registration looks something like this: ```js import { dev } from '$app/environment'; if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('./path/to/service-worker.js', { ? 'module' : 'classic' }); }); } ``` > [!NOTE] The service worker is bundled for production, but not during development. ## Updating the service worker Browsers check for an updated service worker when a full-page navigation happens within its scope, and after functional events such as `push` and `sync`. Client-side navigations are neither, so navigating around your app will not by itself cause a new deployment's service worker to be picked up. SvelteKit calls [`registration.update()`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update) only as part of error recovery — if a route module fails to load or a navigation results in an error status, and [version polling](configuration#version) detects that the app has been redeployed, the service worker is updated before SvelteKit falls back to a full-page navigation. If you want new deployments to be picked up more eagerly, you can trigger an update check yourself — for example on every client-side navigation, in your root layout: ```js import { afterNavigate } from '$app/navigation'; afterNavigate(async () => { if ('serviceWorker' in navigator) { const registration = await navigator.serviceWorker.getRegistration(); await registration?.update(); } }); ``` This will not cause the new service worker (if there is one) to take over the existing page immediately — instead, it will be installed in the background and take over as soon as the number of tabs managed by the existing service worker drops to zero. ## Other solutions SvelteKit's service worker implementation is designed to be easy to work with and is probably a good solution for most users. However, outside of SvelteKit, many PWA applications leverage the [Workbox](https://web.dev/learn/pwa/workbox) library. If you're used to using Workbox you may prefer [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html). ## References For more general information on service workers, we recommend [the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.217Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1253}}128{"id":"doc-element_because_of_this_behavior_every_page_in_y-e07ca8b5","source":"documentation","title":"` element. Because of this behavior, every page in your app should have a unique, descriptive title. In SvelteKit, you can do this by placing a `<svelte:head>` element on each page: ```svelte <!--- file: src/routes/+page.svelte ---> <svelte:head> <title>Todo List","url":"https://svelte.dev/docs/kit/accessibility/llms.txt","text":"` tag) triggers a full page reload. When this happens, screen readers and other assistive technology will read out the new page's title so that users understand that the page has changed. Since navigation between pages in SvelteKit happens without reloading the page (known as [client-side routing](glossary#Routing)), SvelteKit injects a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) onto the page that will read out the new page name after each navigation. This determines the page name to announce by inspecting the `` element. Because of this behavior, every page in your app should have a unique, descriptive title. In SvelteKit, you can do this by placing a `<svelte:head>` element on each page: ```svelte <!--- /routes/+page.svelte ---> <svelte:head> <title>Todo List ``` This will allow screen readers and other assistive technology to identify the new page after a navigation occurs. Providing a descriptive title is also important for [SEO](seo#Manual-setup-title-and-meta). ## Focus management In traditional server-rendered applications, every navigation will reset focus to the top of the page. This ensures that people browsing the web with a keyboard or screen reader will start interacting with the page from the beginning. To simulate this behavior during client-side routing, SvelteKit focuses the `` element after each navigation and [enhanced form submission](form-actions#Progressive-enhancement). There is one exception - if an element with the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is present, SvelteKit will focus that element instead. Make sure to [consider the implications for assistive technology](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) when using that attribute. If you want to customize SvelteKit's focus management, you can use the `afterNavigate` hook: ```js /// // ---cut--- import { afterNavigate } from '$app/navigation'; afterNavigate(() => { /** @type {HTMLElement | null} */ const to_focus = document.querySelector('.focus-me'); to_focus?.focus(); }); ``` You can also programmatically navigate to a different page using the [`goto`]($app-navigation#goto) function. By default, this will have the same client-side routing behavior as clicking on a link. However, `goto` also accepts a `keepFocus` option that will preserve the currently-focused element instead of resetting focus. If you enable this option, make sure the currently-focused element still exists on the page after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users. ## The \"lang\" attribute By default, SvelteKit's page template sets the default language of the document to English. If your content is not in English, you should update the `` element in `src/app.html` to have the correct [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#accessibility) attribute. This will ensure that any assistive technology reading the document uses the correct pronunciation. For example, if your content is in German, you should update `app.html` to the following: ```html /// /app.html ``` If your content is available in multiple languages, you should set the `lang` attribute based on the language of the current page. You can do this with SvelteKit's [handle hook](hooks#handle): ```html /// /app.html ``` ```js /// /hooks.server.js // @filename: utils.ts export function get_lang(event: import('@sveltejs/kit').RequestEvent) { return 'en'; } // @filename: hooks.server.js import { get_lang } from './utils'; // ---cut--- /** @type {import('@sveltejs/kit').Handle} */ export function handle({ event, resolve }) { return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event)) }); } ``` ## Further reading For the most part, building an accessible SvelteKit app is the same as building an accessible web app. You should be able to apply information from the following general accessibility resources to any web experience you [MDN Web ](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) - [The A11y Project](https://www.a11yproject.com/) - [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.218Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1095}}129{"id":"doc-https_svelte_dev_docs_kit_packaging_llms_txt-3ace3e22","source":"documentation","title":"https://svelte.dev/docs/kit/packaging/llms.txt","url":"https://svelte.dev/docs/kit/packaging/llms.txt","text":"`. ```json { \"name\": \"your-library\" } ``` Read more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#name). ### license Every package should have a license field so people know how they are allowed to use it. A very popular license which is also very permissive in terms of distribution and reuse without warranty is `MIT`. ```json { \"license\": \"MIT\" } ``` Read more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#license). Note that you should also include a `LICENSE` file in your package. ### files This tells npm which files it will pack up and upload to npm. It should contain your output folder (`dist` by default). Your `package.json` and `README` and `LICENSE` will always be included, so you don't need to specify them. ```json { \"files\": [\"dist\"] } ``` To exclude unnecessary files (such as unit tests, or modules that are only imported from `src/routes` etc) you can add them to an `.npmignore` file. This will result in smaller packages that are faster to install. Read more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#files). ### exports The `\"exports\"` field contains the package's entry points. If you set up a new library project through `npx sv create`, it's set to a single export, the package root: ```json { \"exports\": { \".\": { \"types\": \"./dist/index.d.ts\", \"svelte\": \"./dist/index.js\" } } } ``` This tells bundlers and tooling that your package only has one entry point, the root, and everything should be imported through that, like this: ```js // @errors: 2307 import { Something } from 'your-library'; ``` The `types` and `svelte` keys are [export conditions](https://nodejs.org/api/packages.html#conditional-exports). They tell tooling what file to import when they look up the `your-library` TypeScript sees the `types` condition and looks up the type definition file. If you don't publish type definitions, omit this condition. - Svelte-aware tooling sees the `svelte` condition and knows this is a Svelte component library. If you publish a library that does not export any Svelte components and that could also work in non-Svelte projects (for example a Svelte store library), you can replace this condition with `default`. > [!NOTE] Previous versions of `@sveltejs/package` also added a `package.json` export. This is no longer part of the template because all tooling can now deal with a `package.json` not being explicitly exported. You can adjust `exports` to your liking and provide more entry points. For example, if instead of a `src/lib/index.js` file that re-exported components you wanted to expose a `src/lib/Foo.svelte` component directly, you could create the following export map... ```json { \"exports\": { \"./Foo.svelte\": { \"types\": \"./dist/Foo.svelte.d.ts\", \"svelte\": \"./dist/Foo.svelte\" } } } ``` ...and a consumer of your library could import the component like so: ```js // @filename: ambient.d.ts declare module 'your-library/Foo.svelte'; // @filename: index.js // ---cut--- import Foo from 'your-library/Foo.svelte'; ``` > [!NOTE] Beware that doing this will need additional care if you provide type definitions. Read more about the caveat [here](#TypeScript) In general, each key of the exports map is the path the user will have to use to import something from your package, and the value is the path to the file that will be imported or a map of export conditions which in turn contains these file paths. Read more about `exports` [here](https://nodejs.org/docs/latest-v18.x/api/packages.html#package-entry-points). ### svelte This is a legacy field that enabled tooling to recognise Svelte component libraries. It's no longer necessary when using the `svelte` [export condition](#Anatomy-of-a-package.json-exports), but for backwards compatibility with outdated tooling that doesn't yet know about export conditions it's good to keep it around. It should point towards your root entry point. ```json { \"svelte\": \"./dist/index.js\" } ``` ### sideEffects The `sideEffects` field in `package.json` is used by bundlers to determine if a module may contain code that has side effects. A module is considered to have side effects if it makes changes that are observable from other scripts outside the module when it's imported. For example, side effects include modifying global variables or the prototype of built-in JavaScript objects. Because a side effect could potentially affect the behavior of other parts of the application, these files/modules will be included in the final bundle regardless of whether their exports are used in the application. It is a best practice to avoid side effects in your code. Setting the `sideEffects` field in `package.json` can help the bundler to be more aggressive in eliminating unused exports from the final bundle, a process known as tree-shaking. This results in smaller and more efficient bundles. Different bundlers handle `sideEffects` in various manners. While not necessary for Vite, we recommend that libraries state that all CSS files have side effects so that your library will be [compatible with webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This is the configuration that comes with newly created projects: ```json /// { \"sideEffects\": [\"**/*.css\"] } ``` > [!NOTE] If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality. If your package has files with side effects, you can specify them in an array: ```json /// { \"sideEffects\": [ \"**/*.css\", \"./dist/sideEffectfulFile.js\" ] } ``` This will treat only the specified files as having side effects. ## TypeScript You should ship type definitions for your library even if you don't use TypeScript yourself so that people who do get proper intellisense when using your library. `@sveltejs/package` makes the process of generating types mostly opaque to you. By default, when packaging your library, type definitions are auto-generated for JavaScript, TypeScript and Svelte files. All you need to ensure is that the `types` condition in the [exports](#Anatomy-of-a-package.json-exports) map points to the correct files. When initialising a library project through `npx sv create`, this is automatically set up for the root export. If you have something else than a root export however — for example providing a `your-library/foo` import — you need to take additional care for providing type definitions. Unfortunately, TypeScript by default will _not_ resolve the `types` condition for an export like `{ \"./foo\": { \"types\": \"./dist/foo.d.ts\", ... }}`. Instead, it will search for a `foo.d.ts` relative to the root of your library (i.e. `your-library/foo.d.ts` instead of `your-library/dist/foo.d.ts`). To fix this, you have two first option is to require people using your library to set the `moduleResolution` option in their `tsconfig.json` (or `jsconfig.json`) to `bundler` (available since TypeScript 5, the best and recommended option in the future), `node16` or `nodenext`. This opts TypeScript into actually looking at the exports map and resolving the types correctly. The second option is to (ab)use the `typesVersions` feature from TypeScript to wire up the types. This is a field inside `package.json` TypeScript uses to check for different type definitions depending on the TypeScript version, and also contains a path mapping feature for that. We leverage that path mapping feature to get what we want. For the mentioned `foo` export above, the corresponding `typesVersions` looks like this: ```json { \"exports\": { \"./foo\": { \"types\": \"./dist/foo.d.ts\", \"svelte\": \"./dist/foo.js\" } }, \"typesVersions\": { \">4.0\": { \"foo\": [\"./dist/foo.d.ts\"] } } } ``` `>4.0` tells TypeScript to check the inner map if the used TypeScript version is greater than 4 (which should in practice always be true). The inner map tells TypeScript that the typings for `your-library/foo` are found within `./dist/foo.d.ts`, which essentially replicates the `exports` condition. You also have `*` as a wildcard at your disposal to make many type definitions at once available without repeating yourself. Note that if you opt into `typesVersions` you have to declare all type imports through it, including the root import (which is defined as `\"index.d.ts\": [..]`). You can read more about that feature [here](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions). ## Best practices You should avoid using SvelteKit-specific modules like `$app/environment` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/state`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to set up tools for testing, UI demos and so on. Ensure that you add [aliases](configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`. You should think carefully about whether or not the changes you make to your package are a bug fix, a new feature, or a breaking change, and update the package version accordingly. Note that if you remove any paths from `exports` or any `export` conditions inside them from your existing library, that should be regarded as a breaking change. ```json { \"exports\": { \".\": { \"types\": \"./dist/index.d.ts\", // changing `svelte` to `default` is a breaking \"svelte\": \"./dist/index.js\"--- +++ \"default\": \"./dist/index.js\"+++ }, // removing this is a breaking \"./foo\": { \"types\": \"./dist/foo.d.ts\", \"svelte\": \"./dist/foo.js\", \"default\": \"./dist/foo.js\" },--- // adding this is ok: +++ \"./bar\": { \"types\": \"./dist/bar.d.ts\", \"svelte\": \"./dist/bar.js\", \"default\": \"./dist/bar.js\" }+++ } } ``` ## Source maps You can create so-called declaration maps (`d.ts.map` files) by setting `\"declarationMap\": true` in your `tsconfig.json`. This will allow editors such as VS Code to go to the original `.ts` or `.svelte` file when using features like _Go to Definition_. This means you also need to publish your source files alongside your dist folder in a way that the relative path inside the declaration files leads to a file on disk. Assuming that you have all your library code inside `src/lib` as suggested by Svelte's CLI, this is as simple as adding `src/lib` to `files` in your `package.json`: ```json { \"files\": [ \"dist\", \"!dist/**/*.test.*\", \"!dist/**/*.spec.*\", +++\"src/lib\", \"!src/lib/**/*.test.*\", \"!src/lib/**/*.spec.*\"+++ ] } ``` ## Options `svelte-package` accepts the following `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package - `-i`/`--input` — the input directory which contains all the files of the package. Defaults to `src/lib` - `-o`/`--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist` - `-p`/`--preserve-output` — prevent deletion of the output directory before packaging. Defaults to `false`, which means that the output directory will be emptied first - `-t`/`--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true` - `--tsconfig` - the path to a tsconfig or jsconfig. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path. ## Publishing To publish the generated package: ```sh npm publish ``` ## Caveats All relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means that for a file like `src/lib/something/index.js`, you must include the filename with the extension: ```js // @errors: 2307 import { something } from './something+++/index.js+++'; ``` If you are using TypeScript, you need to import `.ts` files the same way, but using a `.js` file ending, _not_ a `.ts` file ending. (This is a TypeScript design decision outside our control.) Setting `\"moduleResolution\": \"NodeNext\"` in your `tsconfig.json` or `jsconfig.json` will help you with this. All files except Svelte files (preprocessed) and TypeScript files (transpiled to JavaScript) are copied across as-is.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.219Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":3173}}130{"id":"doc-https_svelte_dev_docs_kit_images_llms_txt-64db8bc9","source":"documentation","title":"https://svelte.dev/docs/kit/images/llms.txt","url":"https://svelte.dev/docs/kit/images/llms.txt","text":"` rather than `` and referencing the image file with a [Vite asset import](https://vitejs.dev/guide/assets.html#static-asset-handling) path: ```svelte ``` At build time, your `` tag will be replaced with an `` wrapped by a `` providing multiple image types and sizes. It's only possible to downscale images without losing quality, which means that you should provide the highest resolution image that you need — smaller versions will be generated for the various device types that may request an image. You should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `` will automatically take care of serving smaller versions to smaller devices. > [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your ` ``` ### `srcset` and `sizes` If you have a large image, such as a hero image taking the width of the design, you should specify `sizes` so that smaller versions are requested on smaller devices. E.g. if you have a 1280px image you may want to specify something like: ```svelte ``` If `sizes` is specified, `` will generate small images for smaller devices and populate the `srcset` attribute. The smallest picture generated automatically will have a width of 540px. If you'd like smaller images or would otherwise like to specify custom widths, you can do that with the `w` query parameter: ```svelte ``` If `sizes` is not provided, then a HiDPI/Retina image and a standard resolution image will be generated. The image you provide should be 2x the resolution you wish to display so that the browser can display that image on devices with a high [device pixel ratio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). ### Per-image transforms By default, enhanced images will be transformed to more efficient formats. However, you may wish to apply other transforms such as a blur, quality, flatten, or rotate operation. You can run per-image transforms by appending a query string: ```svelte ``` [See the imagetools repo for the full list of directives](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md). ## Loading images dynamically from a CDN In some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere. Using a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs allows using an `` tag since the CDN can serve the appropriate format based on the `User-Agent` header, whereas build-time optimizations must produce `` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images. CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://www.storyblok.com/docs/guides/svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling. ## Best practices - For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach. - Consider serving all images via CDN regardless of the image optimization types you use. CDNs reduce latency by distributing copies of static assets globally. - Your original images should have a good quality/resolution and should have 2x the width it will be displayed at to serve HiDPI devices. Image processing can size images down to save bandwidth when serving smaller screens, but it would be a waste of bandwidth to invent pixels to size images up. - For images which are much larger than the width of a mobile device (roughly 400px), such as a hero image taking the width of the page design, specify `sizes` so that smaller images can be served on smaller devices. - For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority=\"high\"` and avoid `loading=\"lazy\"` to prioritize loading as early as possible. - Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you. - Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this. - Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes=\"(min-width: 768px) min(100vw, 108rem), 64rem\"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { %; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.220Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1549}}131{"id":"doc-https_svelte_dev_docs_kit_advanced_routing_llms_-fbe4cbbb","source":"documentation","title":"https://svelte.dev/docs/kit/advanced-routing/llms.txt","url":"https://svelte.dev/docs/kit/advanced-routing/llms.txt","text":">; } // @filename: index.js // ---cut--- import { reusableLoad } from '$lib/reusable-load-function'; /** @type {import('./$types').PageLoad} */ export function load(event) { // Add additional logic here, if needed return reusableLoad(event); } ``` ## Further reading - [Tutorial: Advanced Routing](/tutorial/kit/optional-params)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.220Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":86}}132{"id":"doc-https_svelte_dev_docs_kit_adapter_vercel_llms_tx-64f8a924","source":"documentation","title":"https://svelte.dev/docs/kit/adapter-vercel/llms.txt","url":"https://svelte.dev/docs/kit/adapter-vercel/llms.txt","text":"*/ const config = { kit: { ({ images: { sizes: [640, 828, 1200, 1920, 3840], formats: ['image/avif', 'image/webp'], , domains: ['example-app.vercel.app'], } }) } }; export default config; ``` ## Incremental Static Regeneration Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content. > [!NOTE] Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits To add ISR to a route, include the `isr` property in your `config` object: ```js import { BYPASS_TOKEN } from '$env/static/private'; /** @type {import('@sveltejs/adapter-vercel').Config} */ export const config = { isr: { , , allowQuery: ['search'] } }; ``` > [!NOTE] Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time The `expiration` property is required; all others are optional. The properties are discussed in more detail below. ### expiration The expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand. ### bypassToken A random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=` cookie. Making a `GET` or `HEAD` request with `x-prerender-revalidate: ` will force the asset to be re-validated. Note that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so: ```js crypto.randomUUID(); ``` Set this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For \"Key\" put `BYPASS_TOKEN` and for \"value\" use the string generated above, then hit \"Save\". To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so: ```sh vercel env pull from '$env/static/private'; /** @type {import('./$types').LayoutServerLoad} */ export function load() { return { }; } ``` ```svelte This staging environment was deployed from {data.deploymentGitBranch}. ``` Since all of these variables are unchanged between build time and run time when building on Vercel, we recommend using `$env/static/private` — which will statically replace the variables, enabling optimisations like dead code elimination — rather than `$env/dynamic/private`. ## Skew protection When a new version of your app is deployed, assets belonging to the previous version may no longer be accessible. If a user is actively using your app when this happens, it can cause errors when they navigate — this is known as _version skew_. SvelteKit mitigates this by detecting errors resulting from version skew and causing a hard reload to get the latest version of the app, but this will cause any client-side state to be lost. (You can also proactively mitigate it by observing [`updated.current`]($app-state#updated) from `$app/state`, which tells clients when a new version has been deployed.) [Skew protection](https://vercel.com/docs/deployments/skew-protection) is a Vercel feature that routes client requests to their original deployment. When a user visits your app, a cookie is set with the deployment ID, and any subsequent requests will be routed to that deployment for as long as skew protection is active. When they reload the page, they will get the newest deployment. (`updated.current` is exempted from this behaviour, and so will continue to report new deployments.) To enable it, visit the Advanced section of your project settings on Vercel. Cookie-based skew protection comes with one a user has multiple versions of your app open in multiple tabs, requests from older versions will be routed to the newer one, meaning they will fall back to SvelteKit's built-in skew protection. ## Notes ### Vercel utilities If you need Vercel-specific utilities like `waitUntil`, use the package [`@vercel/functions`](https://vercel.com/docs/functions/functions-api-reference/vercel-functions-package). ### Vercel functions If you have Vercel functions contained in the `api` directory at the project's root, any requests for `/api/*` will _not_ be handled by SvelteKit. You should implement these as [API routes](routing#server) in your SvelteKit app instead, unless you need to use a non-JavaScript language in which case you will need to ensure that you don't have any `/api/*` routes in your SvelteKit app. ### Node version Projects created before a certain date may default to using an older Node version than what SvelteKit currently requires. You can [change the Node version in your project settings](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version). ## Troubleshooting ### Accessing the file system You can't use `fs` in edge functions. You _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside routes deployed as edge functions by fetching the file from the deployed public assets location. Alternatively, you can [prerender](page-options#prerender) the routes in question. ### Deployment protection If using [`read`]($app-server#read) in an edge function, SvelteKit will `fetch` the file in question from your deployment. If you are using [Deployment Protection](https://vercel.com/docs/deployment-protection), you must also enable [Protection Bypass for Automation](https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) so that the request does not result in a [401 Unauthorized](https://http.dog/401) response.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.221Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1561}}133{"id":"doc-imperative_component_api_svelte_docs-45ec1b71","source":"documentation","title":"Imperative component API • Svelte Docs","url":"https://svelte.dev/docs/svelte/legacy-component-api","text":"Example:\n```text\nconst const component: anycomponent = new Component(options);const component: any\n```\n\nExample:\n```text\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: SvelteComponent<Record<string, any>, any, any>app = new new App(o: ComponentConstructorOptions): SvelteComponentApp({\n\tComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRoottarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.\nMDN Reference\nbody,\n\tComponentConstructorOptions<Record<string, any>>.props?: Record<string, any> | undefinedprops: {\n\t\t// assuming App.svelte contains something like\n\t\t// `export let answer`:\n\t\tanswer: numberanswer: 42\n\t}\n});type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: SvelteComponent<Record<string, any>, any, any>new App(o: ComponentConstructorOptions): SvelteComponentComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.body: HTMLElementDocument.bodyComponentConstructorOptions<Record<string, any>>.props?: Record<string, any> | undefinedanswer: number\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst const app: SvelteComponent<Record<string, any>, any, any>app = new new App(o: ComponentConstructorOptions): SvelteComponentApp({\n\tComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRoottarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('#server-rendered-html'),\n\tComponentConstructorOptions<Record<string, any>>.hydrate?: boolean | undefinedhydrate: true\n});type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: SvelteComponent<Record<string, any>, any, any>new App(o: ComponentConstructorOptions): SvelteComponentComponentConstructorOptions<Record<string, any>>.target: Document | Element | ShadowRootvar document: Documentwindow.documentParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)ComponentConstructorOptions<Record<string, any>>.hydrate?: boolean | undefined\n```\n\nExample:\n```text\ncomponent.$set(props);\n```\n\nExample:\n```text\ncomponent.$set({ answer: numberanswer: 42 });answer: number\n```\n\nExample:\n```text\nlet module props\nlet props: {\n    answer: number;\n}props = function $state<{\n    answer: number;\n}>(initial: {\n    answer: number;\n}): {\n    answer: number;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ answer: numberanswer: 42 });\nconst const component: anycomponent = mount(Component, { props: {\n    answer: number;\n}props });\n// ...\nmodule props\nlet props: {\n    answer: number;\n}props.answer: numberanswer = 24;module props\nlet props: {\n    answer: number;\n}module props\nlet props: {\n    answer: number;\n}function $state<{\n    answer: number;\n}>(initial: {\n    answer: number;\n}): {\n    answer: number;\n} (+1 overload)\nnamespace $statefunction $state<{\n    answer: number;\n}>(initial: {\n    answer: number;\n}): {\n    answer: number;\n} (+1 overload)\nnamespace $statelet count = $state(0);answer: numberconst component: anyprops: {\n    answer: number;\n}props: {\n    answer: number;\n}module props\nlet props: {\n    answer: number;\n}module props\nlet props: {\n    answer: number;\n}answer: number\n```\n\nExample:\n```text\nmodule props\nlet props: {\n    answer: number;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    answer: number;\n}>(initial: {\n    answer: number;\n}): {\n    answer: number;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nprops: {\n    answer: number;\n}\n```\n\nExample:\n```text\ncomponent.$on(ev, callback);\n```\n\nExample:\n```text\nconst const off: anyoff = component.$on('selected', (event: anyevent) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(event: anyevent.detail.selection);\n});\n\nconst off: anyoff();const off: anyevent: anyvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()event: anyconst off: any\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\ncomponent.$destroy();\n```\n\nExample:\n```text\ncomponent.prop;\n```\n\nExample:\n```text\nmodule componentcomponent.component.prop: anyprop = value;module componentcomponent.prop: any\n```\n\nExample:\n```text\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(component.count);\ncomponent.count += 1;var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()\n```\n\nExample:\n```text\nconst const result: anyresult = Component.render(...)const result: any\n```\n\nExample:\n```text\nvar require: NodeJS.Require\n(id: string) => anyUsed to import modules, JSON, and local files.\n@sincev0.1.13require('svelte/register');\n\nconst const App: anyIt’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:\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};The export {} line exists because without it, the file would be treated as an ambient module which prevents you from adding import declarations.\nIf you need to add ambient declare module declarations, do so in a separate file like src/ambient.d.ts.\nBy populating these interfaces, you will gain type safety when using event.locals, event.platform, and data from load functions.\nApp = var require: NodeJS.Require\n(id: string) => anyUsed to import modules, JSON, and local files.\n@sincev0.1.13require('./App.svelte').default;\n\nconst { const head: anyhead, const html: anyhtml, const css: anycss } = const App: anyIt’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:\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};The export {} line exists because without it, the file would be treated as an ambient module which prevents you from adding import declarations.\nIf you need to add ambient declare module declarations, do so in a separate file like src/ambient.d.ts.\nBy populating these interfaces, you will gain type safety when using event.locals, event.platform, and data from load functions.\nApp.render({\n\tanswer: numberanswer: 42\n});var require: NodeJS.Require\n(id: string) => anyvar require: NodeJS.Require\n(id: string) => anyJSONconst App: anyAppsrc/app.d.tsdeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};export {}importdeclare modulesrc/ambient.d.tsevent.localsevent.platformdataloadvar require: NodeJS.Require\n(id: string) => anyvar require: NodeJS.Require\n(id: string) => anyJSONconst head: anyconst html: anyconst css: anyconst App: anyAppsrc/app.d.tsdeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};export {}importdeclare modulesrc/ambient.d.tsevent.localsevent.platformdataloadanswer: number\n```\n\nExample:\n```text\nvar require: NodeJS.Require\n(id: string) => any\n```\n\nExample:\n```text\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};\n```\n\nExample:\n```text\nconst { const head: anyhead, const html: anyhtml, const css: anycss } = App.render(\n\t// props\n\t{ answer: numberanswer: 42 },\n\t// options\n\t{\n\t\tcontext: Map<string, string>context: new var Map: MapConstructor\nnew <string, string>(iterable?: Iterable<readonly [string, string]> | null | undefined) => Map<string, string> (+3 overloads)Map([['context-key', 'context-value']])\n\t}\n);const head: anyconst html: anyconst css: anyanswer: numbercontext: Map<string, string>var Map: MapConstructor\nnew <string, string>(iterable?: Iterable<readonly [string, string]> | null | undefined) => Map<string, string> (+3 overloads)var Map: MapConstructor\nnew <string, string>(iterable?: Iterable<readonly [string, string]> | null | undefined) => Map<string, string> (+3 overloads)\n```\n\nExample:\n```text\nvar Map: MapConstructor\nnew <string, string>(iterable?: Iterable<readonly [string, string]> | null | undefined) => Map<string, string> (+3 overloads)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.222Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":519,"estimatedTokens":4735}}134{"id":"doc-https_svelte_dev_docs_kit_app_env_llms_txt-a13c7e01","source":"documentation","title":"https://svelte.dev/docs/kit/$app-env/llms.txt","url":"https://svelte.dev/docs/kit/$app-env/llms.txt","text":"```dts const ```\n\n```dts const ```\n\n```dts const ```\n\n```dts const ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.222Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":9,"estimatedTokens":21}}135{"id":"doc-https_svelte_dev_docs_kit_app_environment_llms_t-3dcd9ac1","source":"documentation","title":"https://svelte.dev/docs/kit/$app-environment/llms.txt","url":"https://svelte.dev/docs/kit/$app-environment/llms.txt","text":"```dts const ```\n\n```dts const ```\n\n```dts const ```\n\n```dts const ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.222Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":9,"estimatedTokens":21}}136{"id":"doc-https_svelte_dev_docs_kit_sveltejs_kit_node_llms-539ced93","source":"documentation","title":"https://svelte.dev/docs/kit/@sveltejs-kit-node/llms.txt","url":"https://svelte.dev/docs/kit/@sveltejs-kit-node/llms.txt","text":"[CALLOUT]\nAvailable since 2.4.0\n\n```dts function createReadableStream(file: string): ReadableStream; ```\n\n```dts function getRequest({ request, base, bodySizeLimit }: { ('http').IncomingMessage; bodySizeLimit?: number; }): Promise; ```\n\n```dts function setResponse( ('http').ServerResponse, ): Promise; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.223Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":10,"estimatedTokens":80}}137{"id":"doc-https_svelte_dev_docs_kit_hooks_llms_txt-2c815743","source":"documentation","title":"https://svelte.dev/docs/kit/hooks/llms.txt","url":"https://svelte.dev/docs/kit/hooks/llms.txt","text":"` — 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. - `filterSerializedResponseHeaders(name: string, ): boolean` — determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`. By default, none will be included. - `preload(input: { type: 'js' | 'css' | 'font' | 'asset', }): boolean` — determines which files should be preloaded. Files are preloaded via `` tags added to the `` tag; if [`output.linkHeaderPreload`](configuration#output) is enabled, dynamically rendered pages use the [`Link` response header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) instead. The method is called with each file that was found at build time while constructing the code chunks — so if you for example have `import './styles.css` in your `+page.svelte`, `preload` will be called with the resolved path to that CSS file when visiting that page. Note that in dev mode `preload` is _not_ called, since it depends on analysis that happens at build time. Preloading can improve performance by downloading assets sooner, but it can also hurt if too much is downloaded unnecessarily. By default, `js` and `css` files will be preloaded. `asset` files are not preloaded at all currently, but we may add this later after evaluating feedback. ```js /// /hooks.server.js /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { const response = await resolve(event, { transformPageChunk: ({ html }) => html.replace('old', 'new'), filterSerializedResponseHeaders: (name) => name.startsWith('x-'), preload: ({ type, path }) => type === 'js' || path.includes('/important/') }); return response; } ``` Note that `resolve(...)` will never throw an error, it will always return a `Promise` with the appropriate status code. If an error is thrown elsewhere during `handle`, it is treated as fatal, and SvelteKit will respond with a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. You can read more about error handling [here](errors). ### locals To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below. ```js /// /hooks.server.js // @filename: ambient.d.ts type User = { } declare namespace App { interface Locals { } } const getUserInformation: (cookie: string | void) => Promise; // @filename: index.js // ---cut--- /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { event.locals.user = await getUserInformation(event.cookies.get('sessionid')); const response = await resolve(event); // Note that modifying response headers isn't always safe. // Response objects can have immutable headers // (e.g. Response.redirect() returned from an endpoint). // Modifying immutable headers throws a TypeError. // In that case, clone the response or avoid creating a // response object with immutable headers. response.headers.set('x-custom-header', 'potato'); return response; } ``` ## handleFetch > [!NOTE] Can be added to `src/hooks.server.js` This function allows you to modify (or replace) the result of an [`event.fetch`](load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`. For example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet). ```js /// /hooks.server.js /** @type {import('@sveltejs/kit').HandleFetch} */ export async function handleFetch({ request, fetch }) { if (request.url.startsWith('https://api.yourapp.com/')) { // clone the original request, but change the URL request = new Request( request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'), request ); } return fetch(request); } ``` Requests made with `event.fetch` follow the browser's credentials model — for same-origin requests, `cookie` and `authorization` headers are forwarded unless the `credentials` option is set to `\"omit\"`. For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request. There is one your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`: ```js /// /hooks.server.js // @errors: 2345 /** @type {import('@sveltejs/kit').HandleFetch} */ export async function handleFetch({ event, request, fetch }) { if (request.url.startsWith('https://api.my-domain.com/')) { request.headers.set('cookie', event.request.headers.get('cookie')); } return fetch(request); } ``` ## handleValidationError > [!NOTE] Can be added to `src/hooks.server.js` This hook is called when a remote function is called with an argument that does not match the provided [Standard Schema](https://standardschema.dev/). It must return an object matching the shape of [`App.Error`](types#Error). Say you have a remote function that expects a string as its argument ... ```js /// import * as v from 'valibot'; import { query } from '$app/server'; export const getTodo = query(v.string(), (id) => { // implementation... }); ``` ...but it is called with something that doesn't match the schema — such as a number (e.g. `await getTodos(1)`) — then validation will fail, the server will respond with a [400 status code](https://http.dog/400), and the function will throw with the message 'Bad Request'. To customise this message and add additional properties to the error object, implement `handleValidationError`: ```js /// /hooks.server.js /** @type {import('@sveltejs/kit').HandleValidationError} */ export function handleValidationError({ issues }) { return { message: 'No thank you' }; } ``` Be thoughtful about what information you expose here, as the most likely reason for validation to fail is that someone is sending malicious requests to your server. ## handleError > [!NOTE] Can be added to `src/hooks.server.js` and `src/hooks.client.js` If an [unexpected error](errors#Unexpected-errors) is thrown during loading, rendering, or from an endpoint, this function will be called with the `error`, `event`, `status` code and `message`. This allows for two you can log the error - you can generate a custom representation of the error that is safe to show to users, omitting sensitive details like messages and stack traces. The returned value, which defaults to `{ message }`, becomes the value of `page.error`. For errors thrown from your code (or library code called by your code) the status will be 500 and the message will be \"Internal Error\". While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe (albeit meaningless to the average user). To add more information to the `page.error` object in a type-safe way, you can customize the expected shape by declaring an `App.Error` interface (which must include `message: string`, to guarantee sensible fallback behavior). This allows you to — for example — append a tracking ID for users to quote in correspondence with your technical support staff: ```ts /// /app.d.ts declare global { namespace App { interface Error { } } } export {}; ``` ```js /// /hooks.server.js // @errors: 2322 2353 // @filename: ambient.d.ts declare module '@sentry/sveltekit' { export const init: (opts: any) => void; export const captureException: (error: any, ) => void; } // @filename: index.js // ---cut--- import * as Sentry from '@sentry/sveltekit'; Sentry.init({/*...*/}) /** @type {import('@sveltejs/kit').HandleServerError} */ export async function handleError({ error, event, status, message }) { const errorId = crypto.randomUUID(); // example integration with https://sentry.io/ Sentry.captureException(error, { extra: { event, errorId, status } }); return { message: 'Whoops!', errorId }; } ``` ```js /// /hooks.client.js // @errors: 2322 2353 // @filename: ambient.d.ts declare module '@sentry/sveltekit' { export const init: (opts: any) => void; export const captureException: (error: any, ) => void; } // @filename: index.js // ---cut--- import * as Sentry from '@sentry/sveltekit'; Sentry.init({/*...*/}) /** @type {import('@sveltejs/kit').HandleClientError} */ export async function handleError({ error, event, status, message }) { const errorId = crypto.randomUUID(); // example integration with https://sentry.io/ Sentry.captureException(error, { extra: { event, errorId, status } }); return { message: 'Whoops!', errorId }; } ``` > [!NOTE] In `src/hooks.client.js`, the type of `handleError` is `HandleClientError` instead of `HandleServerError`, and `event` is a `NavigationEvent` rather than a `RequestEvent`. This function is not called for _expected_ errors (those thrown with the [`error`](@sveltejs-kit#error) function imported from `@sveltejs/kit`). During development, if an error occurs because of a syntax error in your Svelte code, the passed in error has a `frame` property appended highlighting the location of the error. > [!NOTE] Make sure that `handleError` _never_ throws an error ## init > [!NOTE] Can be added to `src/hooks.server.js` and `src/hooks.client.js` This function runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection. > [!NOTE] If your environment supports top-level await, the `init` function is really no different from writing your initialisation logic at the top level of the module, but some environments — most notably, Safari — don't. ```js // @errors: 2307 /// /hooks.server.js import * as db from '$lib/server/database'; /** @type {import('@sveltejs/kit').ServerInit} */ export async function init() { await db.connect(); } ``` > [!NOTE] > In the browser, asynchronous work in `init` will delay hydration, so be mindful of what you put in there. ## reroute > [!NOTE] Can be added to `src/hooks.js`; it runs on both server and client This function runs before `handle` and allows you to change how URLs are translated into routes. The returned pathname (which defaults to `url.pathname`) is used to select the route and its parameters. For example, you might have a `src/routes/[[lang]]/about/+page.svelte` page, which should be accessible as `/en/about` or `/de/ueber-uns` or `/fr/a-propos`. You could implement this with `reroute`: ```js // @errors: 2345 2304 /// /hooks.js /** @type {Record} */ const translated = { '/en/about': '/en/about', '/de/ueber-uns': '/de/about', '/fr/a-propos': '/fr/about', }; /** @type {import('@sveltejs/kit').Reroute} */ export function reroute({ url }) { if (url.pathname in translated) { return translated[url.pathname]; } } ``` The `lang` parameter will be correctly derived from the returned pathname. Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`. Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. If you need to fetch data, use the `fetch` provided as an argument. It has the [same benefits](load#Making-fetch-requests) as the `fetch` provided to `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#handleFetch) because the route is not yet known. ```js // @errors: 2345 2304 /// /hooks.js /** @type {import('@sveltejs/kit').Reroute} */ export async function reroute({ url, fetch }) { // Ask a special endpoint within your app about the destination if (url.pathname === '/api/reroute') return; const api = new URL('/api/reroute', url); api.searchParams.set('pathname', url.pathname); const result = await fetch(api).then(r => r.json()); return result.pathname; } ``` > [!NOTE] `reroute` is considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result of `reroute` on the client so it is only called once per unique URL. ## transport > [!NOTE] Can be added to `src/hooks.js`; it runs on both server and client This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns a falsy value for anything that isn't an instance of the type) and a corresponding `decode` function: ```js // @errors: 2307 /// /hooks.js import { Vector } from '$lib/math'; /** @type {import('@sveltejs/kit').Transport} */ export const transport = { Vector: { encode: (value) => value instanceof Vector && [value.x, value.y], decode: ([x, y]) => new Vector(x, y) } }; ``` ## Further reading - [Tutorial: Hooks](/tutorial/kit/handle)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.224Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":3427}}138{"id":"doc-https_svelte_dev_docs_kit_app_types_llms_txt-e5d8e892","source":"documentation","title":"https://svelte.dev/docs/kit/$app-types/llms.txt","url":"https://svelte.dev/docs/kit/$app-types/llms.txt","text":"[CALLOUT]\nAvailable since 2.26\n\n```dts type Asset = '/favicon.png' | '/robots.txt' | (string & {}); ```\n\n```dts type RouteId = '/' | '/my-route' | '/my-other-route/[param]'; ```\n\n```dts type Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {}; ```\n\n```dts type ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {}; ```\n\n```dts type RouteParams = { /* generated */ } | Record; ```\n\n```dts type RouteParams = { /* generated */ } | Record; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.224Z","totalSectionsIncluded":7,"totalCodeBlocksIncluded":0,"totalLines":16,"estimatedTokens":137}}139{"id":"doc-docs_svelte-0cb2fe36","source":"documentation","title":"Docs • Svelte","url":"https://svelte.dev/docs","text":"Documentation Head to the Svelte or SvelteKit reference docs, or choose your ’m brand new here We recommend starting with the interactive tutorial, which will teach you how to use Svelte right here in your browser. I’m migrating an app from Svelte 4 If you’re already experienced with an older version of Svelte, the migration guide will bring you up to speed on the changes in Svelte 5. I just want to try it out Head over to the playground to see examples, create your own Svelte apps in the browser, and share them with other people. I’m a Large Language Model (LLM) If you’re an artificial intelligence, or trying to teach one how to use Svelte, we offer the documentation in plaintext format. Beep boop. I’m looking for the old docs If you’re developing a site using only Svelte 3 or Svelte 4, the old site may be a helpful reference until you upgrade. Help! I’m stuck Join our Discord server where you can hang out with fellow Svelte users and ask them questions. It’s like an LLM but with people.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.224Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":255}}140{"id":"doc-docs_svelte-1c56838d","source":"documentation","title":"Docs • Svelte","url":"https://svelte.dev/docs/","text":"Documentation Head to the Svelte or SvelteKit reference docs, or choose your ’m brand new here We recommend starting with the interactive tutorial, which will teach you how to use Svelte right here in your browser. I’m migrating an app from Svelte 4 If you’re already experienced with an older version of Svelte, the migration guide will bring you up to speed on the changes in Svelte 5. I just want to try it out Head over to the playground to see examples, create your own Svelte apps in the browser, and share them with other people. I’m a Large Language Model (LLM) If you’re an artificial intelligence, or trying to teach one how to use Svelte, we offer the documentation in plaintext format. Beep boop. I’m looking for the old docs If you’re developing a site using only Svelte 3 or Svelte 4, the old site may be a helpful reference until you upgrade. Help! I’m stuck Join our Discord server where you can hang out with fellow Svelte users and ask them questions. It’s like an LLM but with people.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.224Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":255}}141{"id":"doc-docs_for_llms-7047ea28","source":"documentation","title":"Docs for LLMs","url":"https://svelte.dev/docs/llms","text":"Docs for LLMs We support the llms.txt convention for making documentation available to large language models and the applications that make use of them. Currently, we have the following root-level files... /llms.txt — a listing of the available files /llms-full.txt — complete documentation for Svelte, SvelteKit and the CLI /llms-medium.txt — compressed documentation for use with medium context windows /llms-small.txt — highly compressed documentation for use with smaller context windows ...and package-level documentation: /docs/svelte/llms.txt / /docs/svelte/llms-small.txt /docs/kit/llms.txt / /docs/kit/llms-small.txt /docs/cli/llms.txt\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.225Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":165}}142{"id":"doc-overview_svelte_cli_docs-47b906a3","source":"documentation","title":"Overview • Svelte CLI Docs","url":"https://svelte.dev/docs/cli","text":"Example:\n```text\nnpx sv <command> <args>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.225Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":15}}143{"id":"doc-overview_svelte_docs-b7ab0d4d","source":"documentation","title":"Overview • Svelte Docs","url":"https://svelte.dev/docs/svelte","text":"Example:\n```text\n<script>\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.225Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":35,"estimatedTokens":99}}144{"id":"doc-creating_a_project_sveltekit_docs-715bb9b4","source":"documentation","title":"Creating a project • SvelteKit Docs","url":"https://svelte.dev/docs/kit/creating-a-project","text":"Example:\n```text\nnpx sv create my-app\ncd my-app\nnpm run dev\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.225Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":8,"estimatedTokens":20}}145{"id":"doc-project_structure_sveltekit_docs-7ce5f163","source":"documentation","title":"Project structure • SvelteKit Docs","url":"https://svelte.dev/docs/kit/project-structure","text":"Example:\n```text\nmy-project/\n├ src/\n│ ├ lib/\n│ │ ├ server/\n│ │ │ └ [your server-only lib files]\n│ │ └ [your lib files]\n│ ├ params/\n│ │ └ [your param matchers]\n│ ├ routes/\n│ │ └ [your routes]\n│ ├ app.html\n│ ├ error.html\n│ ├ hooks.client.js\n│ ├ hooks.server.js\n│ ├ service-worker.js\n│ └ instrumentation.server.js\n├ static/\n│ └ [your static assets]\n├ tests/\n│ └ [your tests]\n├ package.json\n├ svelte.config.js\n├ tsconfig.json\n└ vite.config.js\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.226Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":29,"estimatedTokens":114}}146{"id":"doc-building_your_app_sveltekit_docs-065b3cb1","source":"documentation","title":"Building your app • SvelteKit Docs","url":"https://svelte.dev/docs/kit/building-your-app","text":"Example:\n```text\nimport { const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding } from '$app/environment';\nimport { import initialiseDatabaseinitialiseDatabase } from '$lib/server/database';\n\nif (!const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding) {\n\timport initialiseDatabaseinitialiseDatabase();\n}\n\nexport function function load(): voidload() {\n\t// ...\n}const building: booleanbuildbuildingtrueimport initialiseDatabaseconst building: booleanbuildbuildingtrueimport initialiseDatabasefunction load(): void\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.226Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":17,"estimatedTokens":198}}147{"id":"doc-adapters_sveltekit_docs-a37c03f9","source":"documentation","title":"Adapters • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapters","text":"Example:\n```text\nimport const adapter: (opts: any) => import(\"@sveltejs/kit\").Adapteradapter from 'svelte-adapter-foo';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: function adapter(opts: any): import(\"@sveltejs/kit\").Adapteradapter({\n\t\t\t// adapter options go here\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;const adapter: (opts: any) => import(\"@sveltejs/kit\").Adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildfunction adapter(opts: any): import(\"@sveltejs/kit\").Adapterconst config: Config\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.226Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":19,"estimatedTokens":227}}148{"id":"doc-web_standards_sveltekit_docs-2347eec4","source":"documentation","title":"Web standards • SvelteKit Docs","url":"https://svelte.dev/docs/kit/web-standards","text":"Example:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function function GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>GET({ request: RequestThe original request object.\nrequest }) {\n\t// log all headers\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(...request: RequestThe original request object.\nrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders);\n\n\t// create a JSON Response using a header we received\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson({\n\t\t// retrieve a specific header\n\t\tuserAgent: string | nulluserAgent: request: RequestThe original request object.\nrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('user-agent')\n\t}, {\n\t\t// set a header on the response\n\t\tResponseInit.headers?: HeadersInit | undefinedheaders: { 'x-custom-header': 'potato' }\n\t});\n}function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>request: Requestvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()request: RequestRequest.headers: Headersheadersfunction json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-LengthuserAgent: string | nullrequest: RequestRequest.headers: HeadersheadersHeaders.get(name: string): string | nullget()ResponseInit.headers?: HeadersInit | undefined\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const GET: RequestHandlerGET: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = ({ request: RequestThe original request object.\nrequest }) => {\n\t// log all headers\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(...request: RequestThe original request object.\nrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders);\n\n\t// create a JSON Response using a header we received\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson({\n\t\t// retrieve a specific header\n\t\tuserAgent: string | nulluserAgent: request: RequestThe original request object.\nrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('user-agent')\n\t}, {\n\t\t// set a header on the response\n\t\tResponseInit.headers?: HeadersInit | undefinedheaders: { 'x-custom-header': 'potato' }\n\t});\n};function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthtype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const GET: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>request: Requestvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()request: RequestRequest.headers: Headersheadersfunction json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-LengthuserAgent: string | nullrequest: RequestRequest.headers: HeadersheadersHeaders.get(name: string): string | nullget()ResponseInit.headers?: HeadersInit | undefined\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function function POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>POST(event: RequestEvent<Record<string, any>, string | null>event) {\n\tconst const body: FormDatabody = await event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\n\t// log all fields\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log([...const body: FormDatabody]);\n\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson({\n\t\t// get a specific field's value\n\t\tname: FormDataEntryValuename: const body: FormDatabody.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('name') ?? 'world'\n\t});\n}function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>event: RequestEvent<Record<string, any>, string | null>const body: FormDataevent: RequestEvent<Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.request: RequestBody.formData(): Promise<FormData>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const body: FormDatafunction json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthname: FormDataEntryValueconst body: FormDataFormData.get(name: string): FormDataEntryValue | nullget()\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const POST: RequestHandlerPOST: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\tconst const body: FormDatabody = await event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\n\t// log all fields\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log([...const body: FormDatabody]);\n\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson({\n\t\t// get a specific field's value\n\t\tname: FormDataEntryValuename: const body: FormDatabody.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('name') ?? 'world'\n\t});\n};function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthtype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const POST: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>event: RequestEvent<Record<string, any>, string | null>const body: FormDataevent: RequestEvent<Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.request: RequestBody.formData(): Promise<FormData>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const body: FormDatafunction json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthname: FormDataEntryValueconst body: FormDataFormData.get(name: string): FormDataEntryValue | nullget()\n```\n\nExample:\n```text\nconst const foo: string | nullfoo = const url: URLurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.get(name: string): string | nullThe get() method of the URLSearchParams interface returns the first value associated to the given search parameter.\nMDN Reference\nget('foo');const foo: string | nullconst url: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.get(name: string): string | nullget()\n```\n\nExample:\n```text\nconst const uuid: `${string}-${string}-${string}-${string}-${string}`uuid = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();const uuid: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.227Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":526,"estimatedTokens":7400}}149{"id":"doc-svelte_5_migration_guide_svelte_docs-9fba9020","source":"documentation","title":"Svelte 5 migration guide • Svelte Docs","url":"https://svelte.dev/docs/svelte/v5-migration-guide","text":"Example:\n```text\n<script>\n\tlet count = $state(0);\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\t$: const double = $derived(count * 2);\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\n\t$:$effect(() => {\n\t\tif (count > 5) {\n\t\t\talert('Count is too high!');\n\t\t}\n\t});\n</script>\n```\n\nExample:\n```text\n<script>\n\texport let optional = 'unset';\n\texport let required;\n\tlet { optional = 'unset', required } = $props();\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet klass = '';\n\texport { klass as class};\n\tlet { class: klass, ...rest } = $props();\n</script>\n<button class={klass} {...$$restPropsrest}>click me</button>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n</script>\n\n<button on:click={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\n<script>\n\tlet count = $state(0);\n\n\tfunction onclick() {\n\t\tcount++;\n\t}\n</script>\n\n<button {onclick}>\n\tclicks: {count}\n</button>\n```\n\nExample:\n```text\n<script>\n\timport Pump from './Pump.svelte';\n\n\tlet size = $state(15);\n\tlet burst = $state(false);\n\n\tfunction reset() {\n\t\tsize = 15;\n\t\tburst = false;\n\t}\n</script>\n\n<Pump\n\ton:inflate={(power) => {\n\t\tsize += power.detail;\n\t\tif (size > 75) burst = true;\n\t}}\n\ton:deflate={(power) => {\n\t\tif (size > 0) size -= power.detail;\n\t}}\n/>\n\n{#if burst}\n\t<button onclick={reset}>new balloon</button>\n\t<span class=\"boom\">💥</span>\n{:else}\n\t<span class=\"balloon\" style=\"scale: {0.01 * size}\">\n\t\t🎈\n\t</span>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Pump from './Pump.svelte';\n\n\tlet size = $state(15);\n\tlet burst = $state(false);\n\n\tfunction reset() {\n\t\tsize = 15;\n\t\tburst = false;\n\t}\n</script>\n\n<Pump\n\ton:inflate={(power) => {\n\t\tsize += power.detail;\n\t\tif (size > 75) burst = true;\n\t}}\n\ton:deflate={(power) => {\n\t\tif (size > 0) size -= power.detail;\n\t}}\n/>\n\n{#if burst}\n\t<button onclick={reset}>new balloon</button>\n\t<span class=\"boom\">💥</span>\n{:else}\n\t<span class=\"balloon\" style=\"scale: {0.01 * size}\">\n\t\t🎈\n\t</span>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n\n\tlet { inflate, deflate } = $props();\n\tlet power = $state(5);\n</script>\n\n<button onclick={() => dispatch('inflate', power)inflate(power)}>\n\tinflate\n</button>\n<button onclick={() => dispatch('deflate', power)deflate(power)}>\n\tdeflate\n</button>\n<button onclick={() => power--}>-</button>\nPump power: {power}\n<button onclick={() => power++}>+</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n\n\tlet { inflate, deflate } = $props();\n\tlet power = $state(5);\n</script>\n\n<button onclick={() => dispatch('inflate', power)inflate(power)}>\n\tinflate\n</button>\n<button onclick={() => dispatch('deflate', power)deflate(power)}>\n\tdeflate\n</button>\n<button onclick={() => power--}>-</button>\nPump power: {power}\n<button onclick={() => power++}>+</button>\n```\n\nExample:\n```text\n<script>\n\tlet { onclick } = $props();\n</script>\n\n<button on:click {onclick}>\n\tclick me\n</button>\n```\n\nExample:\n```text\n<script>\n\tlet props = $props();\n</script>\n\n<button {...$$props} on:click on:keydown on:all_the_other_stuff {...props}>\n\tclick me\n</button>\n```\n\nExample:\n```text\n<script>\n\tfunction once(fn) {\n\t\treturn function (event) {\n\t\t\tif (fn) fn.call(this, event);\n\t\t\tfn = null;\n\t\t};\n\t}\n\n\tfunction preventDefault(fn) {\n\t\treturn function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tfn.call(this, event);\n\t\t};\n\t}\n</script>\n\n<button onclick={once(preventDefault(handler))}>...</button>\n```\n\nExample:\n```text\n<slot />\n<hr />\n<slot name=\"foo\" message=\"hello\" />\n```\n\nExample:\n```text\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child>\n\tdefault child content\n\n\t{#snippet foo({ message })}\n\t\tmessage from child: {message}\n\t{/snippet}\n</Child>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Child from './Child.svelte';\n</script>\n\n<Child>\n\tdefault child content\n\n\t{#snippet foo({ message })}\n\t\tmessage from child: {message}\n\t{/snippet}\n</Child>\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n<slot />\n{@render children?.()}\n```\n\nExample:\n```text\n<script>\n\tlet { header, main, footer } = $props();\n</script>\n\n<header>\n\t<slot name=\"header\" />\n\t{@render header()}\n</header>\n\n<main>\n\t<slot name=\"main\" />\n\t{@render main()}\n</main>\n\n<footer>\n\t<slot name=\"footer\" />\n\t{@render footer()}\n</footer>\n```\n\nExample:\n```text\n<script>\n\timport List from './List.svelte';\n</script>\n\n<List items={['one', 'two', 'three']} let:item>\n\t{#snippet item(text)}\n\t\t<span>{text}</span>\n\t{/snippet}\n\t<span slot=\"empty\">No items yet</span>\n\t{#snippet empty()}\n\t\t<span>No items yet</span>\n\t{/snippet}\n</List>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport List from './List.svelte';\n</script>\n\n<List items={['one', 'two', 'three']} let:item>\n\t{#snippet item(text)}\n\t\t<span>{text}</span>\n\t{/snippet}\n\t<span slot=\"empty\">No items yet</span>\n\t{#snippet empty()}\n\t\t<span>No items yet</span>\n\t{/snippet}\n</List>\n```\n\nExample:\n```text\n<script>\n\tlet { items, item, empty } = $props();\n</script>\n\n{#if items.length}\n\t<ul>\n\t\t{#each items as entry}\n\t\t\t<li>\n\t\t\t\t<slot item={entry} />\n\t\t\t\t{@render item(entry)}\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n{:else}\n\t<slot name=\"empty\" />\n\t{@render empty?.()}\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { items, item, empty } = $props();\n</script>\n\n{#if items.length}\n\t<ul>\n\t\t{#each items as entry}\n\t\t\t<li>\n\t\t\t\t<slot item={entry} />\n\t\t\t\t{@render item(entry)}\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n{:else}\n\t<slot name=\"empty\" />\n\t{@render empty?.()}\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { run } from 'svelte/legacy';\n\trun(() => {\n\t$effect(() => {\n\t\t// some side effect code\n\t})\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { preventDefault } from 'svelte/legacy';\n</script>\n\n<button\n\tonclick={preventDefault((event) => {\n\t\tevent.preventDefault();\n\t\t// ...\n\t})}\n>\n\tclick me\n</button>\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\") });\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\") });\n\nexport default const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app;function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\ntype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentType\n```\n\nExample:\n```text\nconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nmount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\") });\napp.$on('event', callback);\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\"), events?: Record<string, (e: any) => any> | undefinedAllows the specification of events.\n@deprecatedUse callback props instead.events: { event: anyevent: callback } });function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()events?: Record<string, (e: any) => any> | undefinedevent: any\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$set({ foo: 'baz' });\nconst const props: {\n    foo: string;\n}props = function $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ foo: stringfoo: 'bar' });\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\"), props?: Record<string, any> | undefinedComponent properties.\nprops });\nconst props: {\n    foo: string;\n}props.foo: stringfoo = 'baz';function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst props: {\n    foo: string;\n}const props: {\n    foo: string;\n}function $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $statefunction $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $statelet count = $state(0);foo: stringconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()props?: Record<string, any> | undefinedconst props: {\n    foo: string;\n}const props: {\n    foo: string;\n}foo: string\n```\n\nExample:\n```text\nconst props: {\n    foo: string;\n}\n```\n\nExample:\n```text\nfunction $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\nlet count = $state(0);\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount, function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$destroy();\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\") });\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>Unmounts a component that was previously mounted using mount or hydrate.\nSince 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.\nReturns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });referenceunmount(const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app);function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsefunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>function unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>mounthydrateoptions.outrotruePromiseoptions.outrovoidimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>\n```\n\nExample:\n```text\nfunction unmount(component: Record<string, any>, options?: {\n    outro?: boolean;\n} | undefined): Promise<void>\n```\n\nExample:\n```text\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\nExample:\n```text\nimport { function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & ExportsTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.\n@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.referencecreateClassComponent } from 'svelte/legacy';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\") });\nconst const app: SvelteComponent<Record<string, any>, any, any> & Record<string, any>app = createClassComponent<Record<string, any>, Record<string, any>, any, any>(options: ComponentConstructorOptions<Record<string, any>> & {\n    component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>;\n}): SvelteComponent<Record<string, any>, any, any> & Record<string, any>Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.\n@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.referencecreateClassComponent({ component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>component: const App: LegacyComponentTypeApp, ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>>.target: Document | Element | ShadowRoottarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\") });\n\nexport default const app: SvelteComponent<Record<string, any>, any, any> & Record<string, any>app;function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exportsfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exportstype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst app: SvelteComponent<Record<string, any>, any, any> & Record<string, any>createClassComponent<Record<string, any>, Record<string, any>, any, any>(options: ComponentConstructorOptions<Record<string, any>> & {\n    component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>;\n}): SvelteComponent<Record<string, any>, any, any> & Record<string, any>createClassComponent<Record<string, any>, Record<string, any>, any, any>(options: ComponentConstructorOptions<Record<string, any>> & {\n    component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>;\n}): SvelteComponent<Record<string, any>, any, any> & Record<string, any>component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>const App: LegacyComponentTypeComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>>.target: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()const app: SvelteComponent<Record<string, any>, any, any> & Record<string, any>\n```\n\nExample:\n```text\nfunction createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {\n    component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n}): SvelteComponent<Props, Events, Slots> & Exports\n```\n\nExample:\n```text\ncreateClassComponent<Record<string, any>, Record<string, any>, any, any>(options: ComponentConstructorOptions<Record<string, any>> & {\n    component: Component<Record<string, any>, {}, string> | ComponentType<SvelteComponent<Record<string, any>, any, any>>;\n}): SvelteComponent<Record<string, any>, any, any> & Record<string, any>\n```\n\nExample:\n```text\n/// svelte.config.js\nexport default {\n\tcompilerOptions: {\n    compatibility: {\n        componentApi: number;\n    };\n}compilerOptions: {\n\t\tcompatibility: {\n    componentApi: number;\n}compatibility: {\n\t\t\tcomponentApi: numbercomponentApi: 4\n\t\t}\n\t}\n};compilerOptions: {\n    compatibility: {\n        componentApi: number;\n    };\n}compilerOptions: {\n    compatibility: {\n        componentApi: number;\n    };\n}compatibility: {\n    componentApi: number;\n}compatibility: {\n    componentApi: number;\n}componentApi: number\n```\n\nExample:\n```text\ncompilerOptions: {\n    compatibility: {\n        componentApi: number;\n    };\n}\n```\n\nExample:\n```text\ncompatibility: {\n    componentApi: number;\n}\n```\n\nExample:\n```text\nimport { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender } from 'svelte/server';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte';\n\nconst { html, head } = App.render({ props: { message: 'hello' }});\nconst { const html: stringhtml, const head: stringHTML that goes into the <head>\nhead } = render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputOnly available on the server and when compiling with the server option.\nTakes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.\nreferencerender(const App: LegacyComponentTypeApp, { props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefinedprops: { message: stringmessage: 'hello' }});function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutputserverbodyheadtype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst html: stringconst head: string<head>render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutputserverbodyheadconst App: LegacyComponentTypeprops?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefinedmessage: string\n```\n\nExample:\n```text\nfunction render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {\n    props?: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {\n    props: Omit<Props, \"$$slots\" | \"$$events\">;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: (error: unknown) => unknown | Promise<unknown>;\n}]): RenderOutput\n```\n\nExample:\n```text\nrender<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {\n    props?: Omit<Record<string, any>, \"$$slots\" | \"$$events\"> | undefined;\n    context?: Map<any, any>;\n    idPrefix?: string;\n    csp?: Csp;\n    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;\n} | undefined): RenderOutput\n```\n\nExample:\n```text\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />referenceComponent } from 'svelte';\nexport declare const const MyComponent: Component<{\n    foo: string;\n}, {}, string>MyComponent: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />referenceComponent<{\n\tfoo: stringfoo: string;\n}>;interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />const MyComponent: Component<{\n    foo: string;\n}, {}, string>const MyComponent: Component<{\n    foo: string;\n}, {}, string>interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />foo: string\n```\n\nExample:\n```text\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />\n```\n\nExample:\n```text\nconst MyComponent: Component<{\n    foo: string;\n}, {}, string>\n```\n\nExample:\n```text\nimport { import ComponentAComponentA, import ComponentBComponentB } from 'component-library';\nimport type { SvelteComponent } from 'svelte';\nimport type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />referenceComponent } from 'svelte';\n\nlet C: typeof SvelteComponent<{ foo: string }> = $state(\nlet let C: Component<{\n    foo: string;\n}, {}, string>C: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>Can be used to create strongly typed Svelte components.\nExample:You have component library on npm called component-library, from which\nyou export a component called MyComponent. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a index.d.ts:\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}Typing this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />referenceComponent<{ foo: stringfoo: string }> = function $state<any>(initial: any): any (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state(\n\tvar Math: MathAn intrinsic object that provides basic mathematics functionality and constants.\nMath.Math.random(): numberReturns a pseudorandom number between 0 and 1.\nrandom() ? import ComponentAComponentA : import ComponentBComponentB\n);import ComponentAimport ComponentBinterface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />let C: Component<{\n    foo: string;\n}, {}, string>let C: Component<{\n    foo: string;\n}, {}, string>interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | \"\" = string>component-libraryMyComponentindex.d.tsimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />foo: stringfunction $state<any>(initial: any): any (+1 overload)\nnamespace $statefunction $state<any>(initial: any): any (+1 overload)\nnamespace $statelet count = $state(0);var Math: MathMath.random(): numberimport ComponentAimport ComponentB\n```\n\nExample:\n```text\nlet C: Component<{\n    foo: string;\n}, {}, string>\n```\n\nExample:\n```text\nfunction $state<any>(initial: any): any (+1 overload)\nnamespace $state\n```\n\nExample:\n```text\n<script>\n\timport A from './A.svelte';\n\timport B from './B.svelte';\n\n\tlet Thing = $state();\n</script>\n\n<select bind:value={Thing}>\n\t<option value={A}>A</option>\n\t<option value={B}>B</option>\n</select>\n\n<!-- these are equivalent -->\n<Thing />\n<svelte:component this={Thing} />\n```\n\nExample:\n```text\n{#each items as item}\n\t<item.component {...item.props} />\n{/each}\n```\n\nExample:\n```text\n<p>foo <span>- bar</span></p>\n```\n\nExample:\n```text\n<p>foo<span>{' '}- bar</span></p>\n```\n\nExample:\n```text\n<svelte:options accessors={true} />\n\n<script>\n\t// available via componentInstance.name\n\texport let name;\n</script>\n```\n\nExample:\n```text\n<script>\n\tlet { name } = $props();\n\t// available via componentInstance.getName()\n\texport const getName = () => name;\n</script>\n```\n\nExample:\n```text\nimport { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount } from 'svelte';\nimport type App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeApp from './App.svelte'\n\nconst app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.foo = 'baz'\nconst const props: {\n    foo: string;\n}props = function $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $stateDeclares reactive state.\nExample:\nlet count = $state(0);@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$state({ foo: stringfoo: 'bar' });\nconst const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>app = mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.\nTransitions will play during the initial render unless the intro option is set to false.\nreferencemount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRootTarget element where the component will be mounted.\ntarget: var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.getElementById(elementId: string): HTMLElement | nullThe getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.\ngetElementById(\"app\"), props?: Record<string, any> | undefinedComponent properties.\nprops });\nconst props: {\n    foo: string;\n}props.foo: stringfoo = 'baz';function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exportsaccessors: trueintrofalsetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypetype App = SvelteComponent<Record<string, any>, any, any>\nconst App: LegacyComponentTypeconst props: {\n    foo: string;\n}const props: {\n    foo: string;\n}function $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $statefunction $state<{\n    foo: string;\n}>(initial: {\n    foo: string;\n}): {\n    foo: string;\n} (+1 overload)\nnamespace $statelet count = $state(0);foo: stringconst app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>const app: {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>mount<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<string, any>, any>, options: MountOptions<...>): {\n    $on?(type: string, callback: (e: any) => void): () => void;\n    $set?(props: Partial<Record<string, any>>): void;\n} & Record<...>accessors: trueintrofalseconst App: LegacyComponentTypetarget: Document | Element | ShadowRootvar document: Documentwindow.documentDocument.getElementById(elementId: string): HTMLElement | nullgetElementById()props?: Record<string, any> | undefinedconst props: {\n    foo: string;\n}const props: {\n    foo: string;\n}foo: string\n```\n\nExample:\n```text\n<script>\n\tlet foo = new Foo();\n</script>\n\n<button on:click={() => (foo.value = 1)}>{foo.value}</button\n>\n```\n\nExample:\n```text\n<Component prop=this{is}valid />\n```\n\nExample:\n```text\n<Component prop=\"this{is}valid\" />\n```\n\nExample:\n```text\n<table>\n\t<tr>\n\t\t<td>hi</td>\n\t</tr>\n</table>\n```\n\nExample:\n```text\n<table>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td>hi</td>\n\t\t</tr>\n\t</tbody>\n</table>\n```\n\nExample:\n```text\nmain :global {\n\t@apply bg-blue-100 dark:bg-blue-900;\n}\n```\n\nExample:\n```text\ncss = css.replace(/:where\\((.+?)\\)/, '$1');\n```\n\nExample:\n```text\n<svelte:element this={\"div\"}>\n```\n\nExample:\n```text\n<script>\n\tlet { markup, src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the values...\n\t\tconst initial = { markup, src };\n\n\t\t// unset them...\n\t\tmarkup = src = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial.markup;\n\t\t\tsrc = initial.src;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n<img {src} />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.231Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":69,"totalLines":1352,"estimatedTokens":13817}}150{"id":"doc-prompts_svelte_ai_docs-4888d846","source":"documentation","title":"Prompts • Svelte AI Docs","url":"https://svelte.dev/docs/ai/prompts","text":"Example:\n```text\nYou are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get-documentation` with one of the following paths. However: before invoking the `get-documentation` tool, try to answer the users query using your own knowledge and the `svelte-autofixer` tool. Be mindful of how many section you request, since it is token-intensive!\n<available-docs>\n\n- title: Overview, use_cases: use title and path to estimate use case, path: ai/overview\n- title: AGENTS.md, use_cases: use title and path to estimate use case, path: ai/instructions\n- title: Overview, use_cases: use title and path to estimate use case, path: ai/mcp\n- title: Local setup, use_cases: use title and path to estimate use case, path: ai/local-setup\n- title: Remote setup, use_cases: use title and path to estimate use case, path: ai/remote-setup\n- title: Tools, use_cases: use title and path to estimate use case, path: ai/tools\n- title: Resources, use_cases: use title and path to estimate use case, path: ai/resources\n- title: Prompts, use_cases: use title and path to estimate use case, path: ai/prompts\n- title: CLI, use_cases: use title and path to estimate use case, path: ai/cli\n- title: Overview, use_cases: use title and path to estimate use case, path: ai/skills\n- title: Overview, use_cases: use title and path to estimate use case, path: ai/subagent\n- title: Claude Code, use_cases: use title and path to estimate use case, path: ai/claude-plugin\n- title: OpenCode, use_cases: use title and path to estimate use case, path: ai/opencode-plugin\n- title: Cursor, use_cases: use title and path to estimate use case, path: ai/cursor-plugin\n- title: GitHub Copilot CLI, use_cases: use title and path to estimate use case, path: ai/copilot-plugin\n- title: Codex CLI, use_cases: use title and path to estimate use case, path: ai/codex-plugin\n- title: Overview, use_cases: project setup, creating new svelte apps, scaffolding, cli tools, initializing projects, path: cli/overview\n- title: Frequently asked questions, use_cases: project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, path: cli/faq\n- title: sv create, use_cases: project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, path: cli/sv-create\n- title: sv add, use_cases: project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, path: cli/sv-add\n- title: sv check, use_cases: code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, path: cli/sv-check\n- title: sv migrate, use_cases: migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, path: cli/sv-migrate\n- title: ai-tools, use_cases: use title and path to estimate use case, path: cli/ai-tools\n- title: better-auth, use_cases: use title and path to estimate use case, path: cli/better-auth\n- title: drizzle, use_cases: database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, path: cli/drizzle\n- title: eslint, use_cases: code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, path: cli/eslint\n- title: experimental, use_cases: use title and path to estimate use case, path: cli/experimental\n- title: mdsvex, use_cases: blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, path: cli/mdsvex\n- title: paraglide, use_cases: internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, path: cli/paraglide\n- title: playwright, use_cases: browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, path: cli/playwright\n- title: prettier, use_cases: code formatting, project setup, code style consistency, team collaboration, linting configuration, path: cli/prettier\n- title: storybook, use_cases: component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, path: cli/storybook\n- title: sveltekit-adapter, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, path: cli/sveltekit-adapter\n- title: tailwindcss, use_cases: project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, path: cli/tailwind\n- title: vitest, use_cases: testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, path: cli/vitest\n- title: [create your own], use_cases: use title and path to estimate use case, path: cli/community\n- title: sv, use_cases: use title and path to estimate use case, path: cli/sv\n- title: sv-utils, use_cases: use title and path to estimate use case, path: cli/sv-utils\n- title: Introduction, use_cases: learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, path: kit/introduction\n- title: Creating a project, use_cases: project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, path: kit/creating-a-project\n- title: Project types, use_cases: deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, path: kit/project-types\n- title: Project structure, use_cases: project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, path: kit/project-structure\n- title: Web standards, use_cases: always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, path: kit/web-standards\n- title: Routing, use_cases: routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, path: kit/routing\n- title: Loading data, use_cases: data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, path: kit/load\n- title: Form actions, use_cases: forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, path: kit/form-actions\n- title: Page options, use_cases: prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, path: kit/page-options\n- title: State management, use_cases: sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, path: kit/state-management\n- title: Remote functions, use_cases: data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, path: kit/remote-functions\n- title: Environment variables, use_cases: use title and path to estimate use case, path: kit/environment-variables\n- title: Building your app, use_cases: production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, path: kit/building-your-app\n- title: Adapters, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, path: kit/adapters\n- title: Zero-config deployments, use_cases: deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration, path: kit/adapter-auto\n- title: Node servers, use_cases: deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, path: kit/adapter-node\n- title: Static site generation, use_cases: static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, path: kit/adapter-static\n- title: Single-page apps, use_cases: spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, path: kit/single-page-apps\n- title: Cloudflare, use_cases: deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, path: kit/adapter-cloudflare\n- title: Cloudflare Workers, use_cases: deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, path: kit/adapter-cloudflare-workers\n- title: Netlify, use_cases: deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting, path: kit/adapter-netlify\n- title: Vercel, use_cases: deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, path: kit/adapter-vercel\n- title: Writing adapters, use_cases: custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, path: kit/writing-adapters\n- title: Advanced routing, use_cases: advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, path: kit/advanced-routing\n- title: Hooks, use_cases: authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, path: kit/hooks\n- title: Errors, use_cases: error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, path: kit/errors\n- title: Link options, use_cases: routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, path: kit/link-options\n- title: Service workers, use_cases: offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, path: kit/service-workers\n- title: Server-only modules, use_cases: api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, path: kit/server-only-modules\n- title: Snapshots, use_cases: forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, path: kit/snapshots\n- title: Shallow routing, use_cases: modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, path: kit/shallow-routing\n- title: Observability, use_cases: performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, path: kit/observability\n- title: Packaging, use_cases: building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, path: kit/packaging\n- title: Auth, use_cases: authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, path: kit/auth\n- title: Performance, use_cases: performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, path: kit/performance\n- title: Icons, use_cases: icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, path: kit/icons\n- title: Images, use_cases: image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, path: kit/images\n- title: Accessibility, use_cases: always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, path: kit/accessibility\n- title: SEO, use_cases: seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, path: kit/seo\n- title: Frequently asked questions, use_cases: troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, path: kit/faq\n- title: Integrations, use_cases: project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, path: kit/integrations\n- title: Breakpoint Debugging, use_cases: debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, path: kit/debugging\n- title: Migrating to SvelteKit v2, use_cases: migration, upgrading from sveltekit 1 to 2, breaking changes, version updates, path: kit/migrating-to-sveltekit-2\n- title: Migrating from Sapper, use_cases: migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, path: kit/migrating\n- title: Additional resources, use_cases: troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support, path: kit/additional-resources\n- title: Glossary, use_cases: rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, path: kit/glossary\n- title: @sveltejs/kit, use_cases: forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, path: kit/@sveltejs-kit\n- title: @sveltejs/kit/env, use_cases: use title and path to estimate use case, path: kit/@sveltejs-kit-env\n- title: @sveltejs/kit/hooks, use_cases: middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation, path: kit/@sveltejs-kit-hooks\n- title: @sveltejs/kit/node/polyfills, use_cases: node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, path: kit/@sveltejs-kit-node-polyfills\n- title: @sveltejs/kit/node, use_cases: node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, path: kit/@sveltejs-kit-node\n- title: @sveltejs/kit/vite, use_cases: project setup, vite configuration, initial sveltekit setup, build tooling, path: kit/@sveltejs-kit-vite\n- title: $app/env, use_cases: use title and path to estimate use case, path: kit/$app-env\n- title: $app/env/private, use_cases: use title and path to estimate use case, path: kit/$app-env-private\n- title: $app/env/public, use_cases: use title and path to estimate use case, path: kit/$app-env-public\n- title: $app/environment, use_cases: always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, path: kit/$app-environment\n- title: $app/forms, use_cases: forms, user input, data submission, progressive enhancement, custom form handling, form validation, path: kit/$app-forms\n- title: $app/navigation, use_cases: routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, path: kit/$app-navigation\n- title: $app/paths, use_cases: static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, path: kit/$app-paths\n- title: $app/server, use_cases: remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, path: kit/$app-server\n- title: $app/state, use_cases: routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, path: kit/$app-state\n- title: $app/stores, use_cases: legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, path: kit/$app-stores\n- title: $app/types, use_cases: routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, path: kit/$app-types\n- title: $env/dynamic/private, use_cases: api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, path: kit/$env-dynamic-private\n- title: $env/dynamic/public, use_cases: environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, path: kit/$env-dynamic-public\n- title: $env/static/private, use_cases: server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, path: kit/$env-static-private\n- title: $env/static/public, use_cases: environment variables, public config, client-side data, api endpoints, build-time configuration, public constants, path: kit/$env-static-public\n- title: $lib, use_cases: project setup, component organization, importing shared components, reusable ui elements, code structure, path: kit/$lib\n- title: $service-worker, use_cases: offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, path: kit/$service-worker\n- title: Configuration, use_cases: project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, path: kit/configuration\n- title: Command Line Interface, use_cases: project setup, typescript configuration, generated types, ./$types imports, initial project configuration, path: kit/cli\n- title: Types, use_cases: typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, path: kit/types\n- title: Overview, use_cases: always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, path: svelte/overview\n- title: Getting started, use_cases: project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, path: svelte/getting-started\n- title: .svelte files, use_cases: always, any svelte project, component creation, project setup, learning svelte basics, path: svelte/svelte-files\n- title: .svelte.js and .svelte.ts files, use_cases: shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities, path: svelte/svelte-js-files\n- title: What are runes?, use_cases: always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4, path: svelte/what-are-runes\n- title: $state, use_cases: always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components, path: svelte/$state\n- title: $derived, use_cases: always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values, path: svelte/$derived\n- title: $effect, use_cases: canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking, path: svelte/$effect\n- title: $props, use_cases: always, any svelte project, passing data to components, component communication, reusable components, component props, path: svelte/$props\n- title: $bindable, use_cases: forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields, path: svelte/$bindable\n- title: $inspect, use_cases: debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues, path: svelte/$inspect\n- title: $host, use_cases: custom elements, web components, dispatching custom events, component library, framework-agnostic components, path: svelte/$host\n- title: Basic markup, use_cases: always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering, path: svelte/basic-markup\n- title: {#if ...}, use_cases: always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, path: svelte/if\n- title: {#each ...}, use_cases: always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, path: svelte/each\n- title: {#key ...}, use_cases: animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, path: svelte/key\n- title: {#await ...}, use_cases: async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, path: svelte/await\n- title: {#snippet ...}, use_cases: reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, path: svelte/snippet\n- title: {@render ...}, use_cases: reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, path: svelte/@render\n- title: {@html ...}, use_cases: rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, path: svelte/@html\n- title: {@attach ...}, use_cases: tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, path: svelte/@attach\n- title: {@const ...}, use_cases: computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, path: svelte/@const\n- title: {@debug ...}, use_cases: debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, path: svelte/@debug\n- title: {let/const ...}, use_cases: use title and path to estimate use case, path: svelte/declaration-tags\n- title: bind:, use_cases: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, path: svelte/bind\n- title: use:, use_cases: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, path: svelte/use\n- title: transition:, use_cases: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, path: svelte/transition\n- title: in: and out:, use_cases: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, path: svelte/in-and-out\n- title: animate:, use_cases: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, path: svelte/animate\n- title: style:, use_cases: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, path: svelte/style\n- title: class, use_cases: always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, path: svelte/class\n- title: await, use_cases: async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, path: svelte/await-expressions\n- title: Scoped styles, use_cases: always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, path: svelte/scoped-styles\n- title: Global styles, use_cases: global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, path: svelte/global-styles\n- title: Custom properties, use_cases: theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, path: svelte/custom-properties\n- title: Nested <style> elements, use_cases: component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic, path: svelte/nested-style-elements\n- title: <svelte:boundary>, use_cases: error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui, path: svelte/svelte-boundary\n- title: <svelte:window>, use_cases: keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners, path: svelte/svelte-window\n- title: <svelte:document>, use_cases: document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions, path: svelte/svelte-document\n- title: <svelte:body>, use_cases: mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions, path: svelte/svelte-body\n- title: <svelte:head>, use_cases: seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages, path: svelte/svelte-head\n- title: <svelte:element>, use_cases: dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components, path: svelte/svelte-element\n- title: <svelte:options>, use_cases: migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control, path: svelte/svelte-options\n- title: Stores, use_cases: shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic, path: svelte/stores\n- title: Context, use_cases: shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components, path: svelte/context\n- title: Lifecycle hooks, use_cases: component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4, path: svelte/lifecycle-hooks\n- title: Imperative component API, use_cases: project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting, path: svelte/imperative-component-api\n- title: Hydratable data, use_cases: use title and path to estimate use case, path: svelte/hydratable\n- title: Best practices, use_cases: use title and path to estimate use case, path: svelte/best-practices\n- title: Testing, use_cases: testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation, path: svelte/testing\n- title: TypeScript, use_cases: typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration, path: svelte/typescript\n- title: Custom elements, use_cases: web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom, path: svelte/custom-elements\n- title: Browser support, use_cases: use title and path to estimate use case, path: svelte/browser-support\n- title: Svelte 4 migration guide, use_cases: upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance, path: svelte/v4-migration-guide\n- title: Svelte 5 migration guide, use_cases: migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates, path: svelte/v5-migration-guide\n- title: Frequently asked questions, use_cases: getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support, path: svelte/faq\n- title: svelte, use_cases: migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types, path: svelte/svelte\n- title: svelte/action, use_cases: typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration, path: svelte/svelte-action\n- title: svelte/animate, use_cases: animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions, path: svelte/svelte-animate\n- title: svelte/attachments, use_cases: library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements, path: svelte/svelte-attachments\n- title: svelte/compiler, use_cases: build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools, path: svelte/svelte-compiler\n- title: svelte/easing, use_cases: animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects, path: svelte/svelte-easing\n- title: svelte/events, use_cases: window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries, path: svelte/svelte-events\n- title: svelte/legacy, use_cases: migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation, path: svelte/svelte-legacy\n- title: svelte/motion, use_cases: animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion, path: svelte/svelte-motion\n- title: svelte/reactivity/window, use_cases: responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking, path: svelte/svelte-reactivity-window\n- title: svelte/reactivity, use_cases: reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design, path: svelte/svelte-reactivity\n- title: svelte/server, use_cases: server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup, path: svelte/svelte-server\n- title: svelte/store, use_cases: state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects, path: svelte/svelte-store\n- title: svelte/transition, use_cases: animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions, path: svelte/svelte-transition\n- title: Compiler errors, use_cases: animation, transitions, keyed each blocks, list animations, path: svelte/compiler-errors\n- title: Compiler warnings, use_cases: accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements, path: svelte/compiler-warnings\n- title: Runtime errors, use_cases: debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity, path: svelte/runtime-errors\n- title: Runtime warnings, use_cases: debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting, path: svelte/runtime-warnings\n- title: Overview, use_cases: migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process, path: svelte/legacy-overview\n- title: Reactive let/var declarations, use_cases: migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences, path: svelte/legacy-let\n- title: Reactive $: statements, use_cases: legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects, path: svelte/legacy-reactive-assignments\n- title: export let, use_cases: legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props, path: svelte/legacy-export-let\n- title: $$props and $$restProps, use_cases: legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements, path: svelte/legacy-$$props-and-$$restProps\n- title: on:, use_cases: legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers, path: svelte/legacy-on\n- title: <slot>, use_cases: legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers, path: svelte/legacy-slots\n- title: $$slots, use_cases: legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes, path: svelte/legacy-$$slots\n- title: <svelte:fragment>, use_cases: named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization, path: svelte/legacy-svelte-fragment\n- title: <svelte:component>, use_cases: dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms, path: svelte/legacy-svelte-component\n- title: <svelte:self>, use_cases: recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data, path: svelte/legacy-svelte-self\n- title: Imperative component API, use_cases: migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns, path: svelte/legacy-component-api\n\n</available-docs>\n\nThese are the available documentation sections that `list-sections` will return, you do not need to call it again.\n\nEvery time you write a Svelte component or a Svelte module you MUST invoke the `svelte-autofixer` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.\n\nThis is the task you will work on:\n\n<task>\n[YOUR TASK HERE]\n</task>\n\nIf you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the `playground-link` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called `App.svelte` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.232Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":218,"estimatedTokens":9113}}151{"id":"doc-page_options_sveltekit_docs-eb010e1a","source":"documentation","title":"Page options • SvelteKit Docs","url":"https://svelte.dev/docs/kit/page-options","text":"Example:\n```text\nexport const const prerender: trueprerender = true;const prerender: true\n```\n\nExample:\n```text\nexport const const prerender: falseprerender = false;const prerender: false\n```\n\nExample:\n```text\nexport const const prerender: \"auto\"prerender = 'auto';const prerender: \"auto\"\n```\n\nExample:\n```text\nexport const const prerender: trueprerender = true;\n\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) {\n\tconst const res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/my-server-route.json');\n\treturn await const res: Responseres.Body.json(): Promise<any>MDN Reference\njson();\n}const prerender: truefunction load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst res: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const res: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\nexport const const prerender: trueprerender = true;\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) => {\n\tconst const res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/my-server-route.json');\n\treturn await const res: Responseres.Body.json(): Promise<any>MDN Reference\njson();\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const prerender: trueconst load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst res: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const res: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\n/             # non-dynamic\n/blog         # non-dynamic\n/blog/[slug]  # dynamic, because of `[slug]`\n```\n\nExample:\n```text\n/** @type {import('./$types').EntryGenerator} */\nexport function function entries(): Promise<Array<Record<string, any>>> | Array<Record<string, any>>entries() {\n\treturn [\n\t\t{ slug: stringslug: 'hello-world' },\n\t\t{ slug: stringslug: 'another-blog-post' }\n\t];\n}\n\nexport const const prerender: trueprerender = true;function entries(): Promise<Array<Record<string, any>>> | Array<Record<string, any>>slug: stringslug: stringconst prerender: true\n```\n\nExample:\n```text\nimport type { type EntryGenerator = () => Promise<Array<Record<string, any>>> | Array<Record<string, any>>EntryGenerator } from './$types';\n\nexport const const entries: EntryGeneratorentries: type EntryGenerator = () => Promise<Array<Record<string, any>>> | Array<Record<string, any>>EntryGenerator = () => {\n\treturn [\n\t\t{ slug: stringslug: 'hello-world' },\n\t\t{ slug: stringslug: 'another-blog-post' }\n\t];\n};\n\nexport const const prerender: trueprerender = true;type EntryGenerator = () => Promise<Array<Record<string, any>>> | Array<Record<string, any>>const entries: EntryGeneratortype EntryGenerator = () => Promise<Array<Record<string, any>>> | Array<Record<string, any>>slug: stringslug: stringconst prerender: true\n```\n\nExample:\n```text\nexport const const ssr: falsessr = false;\n// If both `ssr` and `csr` are `false`, nothing will be rendered!const ssr: false\n```\n\nExample:\n```text\nexport const const csr: falsecsr = false;\n// If both `csr` and `ssr` are `false`, nothing will be rendered!const csr: false\n```\n\nExample:\n```text\nimport { const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev } from '$app/environment';\n\nexport const const csr: booleancsr = const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev;const dev: booleanNODE_ENVMODEconst csr: booleanconst dev: booleanNODE_ENVMODE\n```\n\nExample:\n```text\nexport const const trailingSlash: \"always\"trailingSlash = 'always';const trailingSlash: \"always\"\n```\n\nExample:\n```text\n/** @type {import('some-adapter').Config} */\nexport const const config: Configconfig = {\n\tConfig.runtime: stringruntime: 'edge'\n};const config: ConfigConfig.runtime: string\n```\n\nExample:\n```text\nimport type { Config } from 'some-adapter';\n\nexport const const config: Configconfig: Config = {\n\tConfig.runtime: stringruntime: 'edge'\n};const config: ConfigConfig.runtime: string\n```\n\nExample:\n```text\nexport const const config: {\n    runtime: string;\n    regions: string;\n    foo: {\n        bar: boolean;\n    };\n}config = {\n\truntime: stringruntime: 'edge',\n\tregions: stringregions: 'all',\n\tfoo: {\n    bar: boolean;\n}foo: {\n\t\tbar: booleanbar: true\n\t}\n}const config: {\n    runtime: string;\n    regions: string;\n    foo: {\n        bar: boolean;\n    };\n}const config: {\n    runtime: string;\n    regions: string;\n    foo: {\n        bar: boolean;\n    };\n}runtime: stringregions: stringfoo: {\n    bar: boolean;\n}foo: {\n    bar: boolean;\n}bar: boolean\n```\n\nExample:\n```text\nconst config: {\n    runtime: string;\n    regions: string;\n    foo: {\n        bar: boolean;\n    };\n}\n```\n\nExample:\n```text\nfoo: {\n    bar: boolean;\n}\n```\n\nExample:\n```text\nexport const const config: {\n    regions: string[];\n    foo: {\n        baz: boolean;\n    };\n}config = {\n\tregions: string[]regions: ['us1', 'us2'],\n\tfoo: {\n    baz: boolean;\n}foo: {\n\t\tbaz: booleanbaz: true\n\t}\n}const config: {\n    regions: string[];\n    foo: {\n        baz: boolean;\n    };\n}const config: {\n    regions: string[];\n    foo: {\n        baz: boolean;\n    };\n}regions: string[]foo: {\n    baz: boolean;\n}foo: {\n    baz: boolean;\n}baz: boolean\n```\n\nExample:\n```text\nconst config: {\n    regions: string[];\n    foo: {\n        baz: boolean;\n    };\n}\n```\n\nExample:\n```text\nfoo: {\n    baz: boolean;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.234Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":264,"estimatedTokens":2417}}152{"id":"doc-node_servers_sveltekit_docs-59abf03b","source":"documentation","title":"Node servers • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-node","text":"Example:\n```text\nimport import adapteradapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter()\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterconst config: Config\n```\n\nExample:\n```text\nnode build\n```\n\nExample:\n```text\nnpm install dotenv\n```\n\nExample:\n```text\nnode -r dotenv/config build\n```\n\nExample:\n```text\nnode --env-file=.env build\n```\n\nExample:\n```text\nHOST=127.0.0.1 PORT=4000 node build\n```\n\nExample:\n```text\nSOCKET_PATH=/tmp/socket node build\n```\n\nExample:\n```text\nORIGIN=https://my.site node build\n\n# or e.g. for local previewing and testing\nORIGIN=http://localhost:3000 node build\n```\n\nExample:\n```text\nPROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build\n```\n\nExample:\n```text\nADDRESS_HEADER=True-Client-IP node build\n```\n\nExample:\n```text\n<client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nExample:\n```text\n<spoofed address>, <client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nExample:\n```text\nimport import adapteradapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// default options are shown\n\t\t\tout: stringout: 'build',\n\t\t\tprecompress: booleanprecompress: true,\n\t\t\tenvPrefix: stringenvPrefix: ''\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterout: stringprecompress: booleanenvPrefix: stringconst config: Config\n```\n\nExample:\n```text\nenvPrefix: 'MY_CUSTOM_';\n```\n\nExample:\n```text\nMY_CUSTOM_HOST=127.0.0.1 \\\nMY_CUSTOM_PORT=4000 \\\nMY_CUSTOM_ORIGIN=https://my.site \\\nnode build\n```\n\nExample:\n```text\nvar process: NodeJS.Processprocess.NodeJS.Process.on(event: string | symbol, listener: (...args: any[]) => void): NodeJS.Process (+13 overloads)Adds the listener function to the end of the listeners array for the event\nnamed eventName. No checks are made to see if the listener has already\nbeen added. Multiple calls passing the same combination of eventName and\nlistener will result in the listener being added, and called, multiple times.\nserver.on('connection', (stream) => {\n  console.log('someone connected!');\n});Returns a reference to the EventEmitter, so that calls can be chained.\nBy default, event listeners are invoked in the order they are added. The emitter.prependListener() method can be used as an alternative to add the\nevent listener to the beginning of the listeners array.\nimport { EventEmitter } from 'node:events';\nconst myEE = new EventEmitter();\nmyEE.on('foo', () => console.log('a'));\nmyEE.prependListener('foo', () => console.log('b'));\nmyEE.emit('foo');\n// Prints:\n//   b\n//   a@sincev0.1.101@parameventName The name of the event.@paramlistener The callback functionon('sveltekit:shutdown', async (reason: anyreason) => {\n  await jobs.stop();\n  await db.close();\n});var process: NodeJS.ProcessNodeJS.Process.on(event: string | symbol, listener: (...args: any[]) => void): NodeJS.Process (+13 overloads)listenereventNamelistenereventNamelistenerlistenerserver.on('connection', (stream) => {\n  console.log('someone connected!');\n});EventEmitteremitter.prependListener()import { EventEmitter } from 'node:events';\nconst myEE = new EventEmitter();\nmyEE.on('foo', () => console.log('a'));\nmyEE.prependListener('foo', () => console.log('b'));\nmyEE.emit('foo');\n// Prints:\n//   b\n//   areason: any\n```\n\nExample:\n```text\nserver.on('connection', (stream) => {\n  console.log('someone connected!');\n});\n```\n\nExample:\n```text\nimport { EventEmitter } from 'node:events';\nconst myEE = new EventEmitter();\nmyEE.on('foo', () => console.log('a'));\nmyEE.prependListener('foo', () => console.log('b'));\nmyEE.emit('foo');\n// Prints:\n//   b\n//   a\n```\n\nExample:\n```text\n[Service]\nEnvironment=NODE_ENV=production IDLE_TIMEOUT=60\nExecStart=/usr/bin/node /usr/bin/myapp/build\n```\n\nExample:\n```text\n[Socket]\nListenStream=3000\n\n[Install]\nWantedBy=sockets.target\n```\n\nExample:\n```text\nimport { import handlerhandler } from './build/handler.js';\nimport import expressexpress from 'express';\n\nconst const app: anyapp = import expressexpress();\n\n// add a route that lives separately from the SvelteKit app\nconst app: anyapp.get('/healthcheck', (req, res) => {\n\n\tres: anyres.end('ok');\n});\n\n// let SvelteKit handle everything else, including serving prerendered pages and static assets\nconst app: anyapp.use(import handlerhandler);\n\nconst app: anyapp.listen(3000, () => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('listening on port 3000');\n});import handlerimport expressconst app: anyimport expressconst app: anyres: anyconst app: anyimport handlerconst app: anyvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.235Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":24,"totalLines":334,"estimatedTokens":2742}}153{"id":"doc-state_management_sveltekit_docs-6c68888a","source":"documentation","title":"State management • SvelteKit Docs","url":"https://svelte.dev/docs/kit/state-management","text":"Example:\n```text\nlet user;\n\n/** @type {import('./$types').PageServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tdefault: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>default: async ({ request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\n\t\t// NEVER DO THIS!\n\t\tlet user: anyuser = {\n\t\t\tname: FormDataEntryValue | nullname: const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('name'),\n\t\t\tembarrassingSecret: FormDataEntryValue | nullembarrassingSecret: const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('secret')\n\t\t};\n\t}\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>request: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>let user: anyname: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()embarrassingSecret: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()\n```\n\nExample:\n```text\nconst actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad, type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\nlet user;\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = () => {\n\treturn { user };\n};\n\nexport const const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tdefault: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>default: async ({ request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\n\t\t// NEVER DO THIS!\n\t\tlet user: anyuser = {\n\t\t\tname: FormDataEntryValue | nullname: const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('name'),\n\t\t\tembarrassingSecret: FormDataEntryValue | nullembarrassingSecret: const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('secret')\n\t\t};\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actionstype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}default: ({ request }: RequestEvent<Record<string, any>, string | null>) => Promise<void>request: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>let user: anyname: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()embarrassingSecret: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\ntype Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\nimport { const user: {\n    set: (value: any) => void;\n}user } from '$lib/user';\n\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) {\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/api/user');\n\n\t// NEVER DO THIS!\n\tconst user: {\n    set: (value: any) => void;\n}user.set: (value: any) => voidset(await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson());\n}const user: {\n    set: (value: any) => void;\n}const user: {\n    set: (value: any) => void;\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const user: {\n    set: (value: any) => void;\n}const user: {\n    set: (value: any) => void;\n}set: (value: any) => voidconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nconst user: {\n    set: (value: any) => void;\n}\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\nimport { const user: {\n    set: (value: any) => void;\n}user } from '$lib/user';\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) => {\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/api/user');\n\n\t// NEVER DO THIS!\n\tconst user: {\n    set: (value: any) => void;\n}user.set: (value: any) => voidset(await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson());\n};const user: {\n    set: (value: any) => void;\n}const user: {\n    set: (value: any) => void;\n}type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const user: {\n    set: (value: any) => void;\n}const user: {\n    set: (value: any) => void;\n}set: (value: any) => voidconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) {\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/api/user');\n\n\treturn {\n\t\tuser: anyuser: await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson()\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)user: anyconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch }) => {\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/api/user');\n\n\treturn {\n\t\tuser: anyuser: await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson()\n\t};\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)user: anyconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\n<script>\n\timport { setContext } from 'svelte';\n\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n\n\t// Pass a function referencing our state\n\t// to the context for child components to access\n\tsetContext('user', () => data.user);\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\timport type { LayoutProps } from './$types';\n\tlet { data }: LayoutProps = $props();\n\n\t// Pass a function referencing our state\n\t// to the context for child components to access\n\tsetContext('user', () => data.user);\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { getContext } from 'svelte';\n\n\t// Retrieve user store from context\n\tconst user = getContext('user');\n</script>\n\n<p>Welcome {user().name}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\n\t// Retrieve user store from context\n\tconst user = getContext('user');\n</script>\n\n<p>Welcome {user().name}</p>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\t// THIS CODE IS BUGGY!\n\tconst wordCount = data.content.split(' ').length;\n\tconst estimatedReadingTime = wordCount / 250;\n</script>\n\n<header>\n\t<h1>{data.title}</h1>\n\t<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>\n</header>\n\n<div>{@html data.content}</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n\n\t// THIS CODE IS BUGGY!\n\tconst wordCount = data.content.split(' ').length;\n\tconst estimatedReadingTime = wordCount / 250;\n</script>\n\n<header>\n\t<h1>{data.title}</h1>\n\t<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>\n</header>\n\n<div>{@html data.content}</div>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tlet wordCount = $derived(data.content.split(' ').length);\n\tlet estimatedReadingTime = $derived(wordCount / 250);\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n\n\tlet wordCount = $derived(data.content.split(' ').length);\n\tlet estimatedReadingTime = $derived(wordCount / 250);\n</script>\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n</script>\n\n{#key page.url.pathname}\n\t<BlogPost title={data.title} content={data.title} />\n{/key}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.236Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":392,"estimatedTokens":4944}}154{"id":"doc-snapshots_sveltekit_docs-bec57679","source":"documentation","title":"Snapshots • SvelteKit Docs","url":"https://svelte.dev/docs/kit/snapshots","text":"Example:\n```text\n<script>\n\tlet comment = $state('');\n\n\t/** @type {import('./$types').Snapshot<string>} */\n\texport const snapshot = {\n\t\tcapture: () => comment,\n\t\trestore: (value) => comment = value\n\t};\n</script>\n\n<form method=\"POST\">\n\t<label for=\"comment\">Comment</label>\n\t<textarea id=\"comment\" bind:value={comment} />\n\t<button>Post comment</button>\n</form>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { Snapshot } from './$types';\n\n\tlet comment = $state('');\n\n\texport const snapshot: Snapshot<string> = {\n\t\tcapture: () => comment,\n\t\trestore: (value) => comment = value\n\t};\n</script>\n\n<form method=\"POST\">\n\t<label for=\"comment\">Comment</label>\n\t<textarea id=\"comment\" bind:value={comment} />\n\t<button>Post comment</button>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.236Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":40,"estimatedTokens":190}}155{"id":"doc-single_page_apps_sveltekit_docs-c522d09d","source":"documentation","title":"Single-page apps • SvelteKit Docs","url":"https://svelte.dev/docs/kit/single-page-apps","text":"Example:\n```text\nexport const const ssr: falsessr = false;const ssr: false\n```\n\nExample:\n```text\nimport import adapteradapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\tfallback: stringfallback: '200.html' // may differ from host to host\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterfallback: stringconst config: Config\n```\n\nExample:\n```text\nexport const const prerender: trueprerender = true;\nexport const const ssr: truessr = true;const prerender: trueconst ssr: true\n```\n\nExample:\n```text\n<IfModule mod_rewrite.c>\n\tRewriteEngine On\n\tRewriteBase /\n\tRewriteRule ^200\\.html$ - [L]\n\tRewriteCond %{REQUEST_FILENAME} !-f\n\tRewriteCond %{REQUEST_FILENAME} !-d\n\tRewriteRule . /200.html [L]\n</IfModule>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.236Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":42,"estimatedTokens":311}}156{"id":"doc-server_only_modules_sveltekit_docs-e2fdc4fd","source":"documentation","title":"Server-only modules • SvelteKit Docs","url":"https://svelte.dev/docs/kit/server-only-modules","text":"Example:\n```text\nexport const atlantisCoordinates = [/* redacted */];\n```\n\nExample:\n```text\nexport { export atlantisCoordinatesatlantisCoordinates } from '$lib/server/secrets.js';\n\nexport const const add: (a: any, b: any) => anyadd = (a, b) => a: anya + b: anyb;\n\nexport atlantisCoordinatesconst add: (a: any, b: any) => anya: anyb: any\n```\n\nExample:\n```text\n<script>\n\timport { add } from './utils.js';\n</script>\n```\n\nExample:\n```text\nCannot import $lib/server/secrets.ts into code that runs in the browser, as this could leak sensitive information.\n\n src/routes/+page.svelte imports\n  src/routes/utils.js imports\n   $lib/server/secrets.ts\n\nIf you're only using the import as a type, change it to `import type`.\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.236Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":33,"estimatedTokens":183}}157{"id":"doc-writing_adapters_sveltekit_docs-849c5d51","source":"documentation","title":"Writing adapters • SvelteKit Docs","url":"https://svelte.dev/docs/kit/writing-adapters","text":"Example:\n```text\n/** @param {AdapterSpecificOptions} options */\nexport default function (options: any@paramoptions options) {\n\t/** @type {import('@sveltejs/kit').Adapter} */\n\tconst const adapter: Adapteradapter = {\n\t\tAdapter.name: stringThe name of the adapter, using for logging. Will typically correspond to the package name.\nname: 'adapter-package-name',\n\t\tasync Adapter.adapt: (builder: Builder) => MaybePromise<void>This function is called after SvelteKit has built your app.\n@parambuilder An object provided by SvelteKit that contains methods for adapting the appadapt(builder: Builderbuilder) {\n\t\t\t// adapter implementation\n\t\t},\n\t\tasync Adapter.emulate?: (() => MaybePromise<Emulator>) | undefinedCreates an Emulator, which allows the adapter to influence the environment\nduring dev, build and prerendering.\nemulate() {\n\t\t\treturn {\n\t\t\t\tasync Emulator.platform?(details: {\n    config: any;\n    prerender: PrerenderOption;\n}): MaybePromise<App.Platform>A function that is called with the current route config and prerender option\nand returns an App.Platform object\nplatform({ config: anyconfig, prerender: PrerenderOptionprerender }) {\n\t\t\t\t\t// the returned object becomes `event.platform` during dev, build and\n\t\t\t\t\t// preview. Its shape is that of `App.Platform`\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tAdapter.supports?: {\n    read?: (details: {\n        config: any;\n        route: {\n            id: string;\n        };\n    }) => boolean;\n    instrumentation?: () => boolean;\n} | undefinedChecks called during dev and build to determine whether specific features will work in production with this adapter.\nsupports: {\n\t\t\tread: ({ config: anyconfig, route: {\n    id: string;\n}route }) => {\n\t\t\t\t// Return `true` if the route with the given `config` can use `read`\n\t\t\t\t// from `$app/server` in production, return `false` if it can't.\n\t\t\t\t// Or throw a descriptive error describing how to configure the deployment\n\t\t\t},\n\t\t\tinstrumentation: () => {\n\t\t\t\t// Return `true` if this adapter supports loading `instrumentation.server.js`.\n\t\t\t\t// Return `false if it can't, or throw a descriptive error.\n\t\t\t}\n\t\t}\n\t};\n\n\treturn const adapter: Adapteradapter;\n}options: anyconst adapter: AdapterAdapter.name: stringAdapter.adapt: (builder: Builder) => MaybePromise<void>builder: BuilderAdapter.emulate?: (() => MaybePromise<Emulator>) | undefinedEmulatorEmulator.platform?(details: {\n    config: any;\n    prerender: PrerenderOption;\n}): MaybePromise<App.Platform>Emulator.platform?(details: {\n    config: any;\n    prerender: PrerenderOption;\n}): MaybePromise<App.Platform>configprerenderApp.Platformconfig: anyprerender: PrerenderOptionAdapter.supports?: {\n    read?: (details: {\n        config: any;\n        route: {\n            id: string;\n        };\n    }) => boolean;\n    instrumentation?: () => boolean;\n} | undefinedAdapter.supports?: {\n    read?: (details: {\n        config: any;\n        route: {\n            id: string;\n        };\n    }) => boolean;\n    instrumentation?: () => boolean;\n} | undefinedconfig: anyroute: {\n    id: string;\n}route: {\n    id: string;\n}const adapter: Adapter\n```\n\nExample:\n```text\nEmulator.platform?(details: {\n    config: any;\n    prerender: PrerenderOption;\n}): MaybePromise<App.Platform>\n```\n\nExample:\n```text\nAdapter.supports?: {\n    read?: (details: {\n        config: any;\n        route: {\n            id: string;\n        };\n    }) => boolean;\n    instrumentation?: () => boolean;\n} | undefined\n```\n\nExample:\n```text\nroute: {\n    id: string;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.237Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":110,"estimatedTokens":868}}158{"id":"doc-link_options_sveltekit_docs-808f5a07","source":"documentation","title":"Link options • SvelteKit Docs","url":"https://svelte.dev/docs/kit/link-options","text":"Example:\n```text\n<body data-sveltekit-preload-data=\"hover\">\n\t<div style=\"display: contents\">%sveltekit.body%</div>\n</body>\n```\n\nExample:\n```text\n<form data-sveltekit-keepfocus>\n\t<input type=\"text\" name=\"query\">\n</form>\n```\n\nExample:\n```text\n<div data-sveltekit-preload-data={condition ? 'hover' : false}>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.237Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":20,"estimatedTokens":81}}159{"id":"doc-environment_variables_sveltekit_docs-2a01a3f1","source":"documentation","title":"Environment variables • SvelteKit Docs","url":"https://svelte.dev/docs/kit/environment-variables","text":"Example:\n```text\nAPI_KEY=19f401ba-e8b0-48c4-8c77-b0ebb26d97fe\n```\n\nExample:\n```text\nexport default {\n\tkit: {\n    experimental: {\n        explicitEnvironmentVariables: boolean;\n    };\n}kit: {\n\t\texperimental: {\n    explicitEnvironmentVariables: boolean;\n}experimental: {\n\t\t\texplicitEnvironmentVariables: booleanexplicitEnvironmentVariables: true\n\t\t}\n\t}\n};kit: {\n    experimental: {\n        explicitEnvironmentVariables: boolean;\n    };\n}kit: {\n    experimental: {\n        explicitEnvironmentVariables: boolean;\n    };\n}experimental: {\n    explicitEnvironmentVariables: boolean;\n}experimental: {\n    explicitEnvironmentVariables: boolean;\n}explicitEnvironmentVariables: boolean\n```\n\nExample:\n```text\nkit: {\n    experimental: {\n        explicitEnvironmentVariables: boolean;\n    };\n}\n```\n\nExample:\n```text\nexperimental: {\n    explicitEnvironmentVariables: boolean;\n}\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\n\nexport const const variables: {}variables = defineEnvVars<{}>(variables: {}): {}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\t// ...\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateconst variables: {}defineEnvVars<{}>(variables: {}): {}$app/env/public$app/env/private\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\n\nexport const const variables: {\n    API_KEY: {};\n}variables = defineEnvVars<{\n    API_KEY: {};\n}>(variables: {\n    API_KEY: {};\n}): {\n    API_KEY: {};\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype API_KEY: {}API_KEY: {}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateconst variables: {\n    API_KEY: {};\n}const variables: {\n    API_KEY: {};\n}defineEnvVars<{\n    API_KEY: {};\n}>(variables: {\n    API_KEY: {};\n}): {\n    API_KEY: {};\n}defineEnvVars<{\n    API_KEY: {};\n}>(variables: {\n    API_KEY: {};\n}): {\n    API_KEY: {};\n}$app/env/public$app/env/privatetype API_KEY: {}\n```\n\nExample:\n```text\nconst variables: {\n    API_KEY: {};\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    API_KEY: {};\n}>(variables: {\n    API_KEY: {};\n}): {\n    API_KEY: {};\n}\n```\n\nExample:\n```text\nimport { import API_KEYAPI_KEY } from '$app/env/private';import API_KEY\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\n\nexport const const variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}variables = defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype GOOGLE_ANALYTICS_ID: {\n    public: true;\n}GOOGLE_ANALYTICS_ID: {\n\t\tpublic: truepublic: true\n\t}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateconst variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}const variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}$app/env/public$app/env/privatetype GOOGLE_ANALYTICS_ID: {\n    public: true;\n}type GOOGLE_ANALYTICS_ID: {\n    public: true;\n}public: true\n```\n\nExample:\n```text\nconst variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n    };\n}\n```\n\nExample:\n```text\ntype GOOGLE_ANALYTICS_ID: {\n    public: true;\n}\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"%sveltekit.assets%/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t%sveltekit.head%\n\n\t\t<script\n\t\t\tasync\n\t\t\tsrc=\"https://www.googletagmanager.com/gtag/js?id=%sveltekit.env.GOOGLE_ANALYTICS_ID%\"\n\t\t></script>\n\n\t\t<script>\n\t\t\twindow.dataLayer ??= [];\n\t\t\tfunction gtag(){dataLayer.push(arguments)}\n\t\t\tgtag('js', new Date());\n\t\t\tgtag('config', '%sveltekit.env.GOOGLE_ANALYTICS_ID%');\n\t\t</script>\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">%sveltekit.body%</div>\n\t</body>\n</html>\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\nimport * as import vv from 'valibot';\n\nexport const const variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}variables = defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype GOOGLE_ANALYTICS_ID: {\n    public: true;\n    schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n}GOOGLE_ANALYTICS_ID: {\n\t\tpublic: truepublic: true,\n\t\tschema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>schema: import vv.pipe<v.StringSchema<undefined>, v.RegexAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.RegexAction<string, undefined> | v.PipeAction<string, string, v.RegexIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]> (+20 overloads)\nexport pipeAdds a pipeline to a schema, that can validate and transform its input.\n@paramschema The root schema.@paramitem1 The first pipe item.@returnsA schema with a pipeline.pipe(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), import vv.regex<string>(requirement: RegExp): v.RegexAction<string, undefined> (+1 overload)\nexport regexCreates a regex validation action.\nHint: Be careful with the global flag g in your regex pattern, as it can lead to unexpected results. See MDN for more information.\n@paramrequirement The regex pattern.@returnsA regex action.regex(/G-[A-Z0-9]+/))\n\t}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateimport vconst variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}const variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}defineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}$app/env/public$app/env/privatetype GOOGLE_ANALYTICS_ID: {\n    public: true;\n    schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n}type GOOGLE_ANALYTICS_ID: {\n    public: true;\n    schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n}public: trueschema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>import vpipe<v.StringSchema<undefined>, v.RegexAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.RegexAction<string, undefined> | v.PipeAction<string, string, v.RegexIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]> (+20 overloads)\nexport pipepipe<v.StringSchema<undefined>, v.RegexAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.RegexAction<string, undefined> | v.PipeAction<string, string, v.RegexIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]> (+20 overloads)\nexport pipeimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringimport vregex<string>(requirement: RegExp): v.RegexAction<string, undefined> (+1 overload)\nexport regexregex<string>(requirement: RegExp): v.RegexAction<string, undefined> (+1 overload)\nexport regexg\n```\n\nExample:\n```text\nconst variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}>(variables: {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}): {\n    GOOGLE_ANALYTICS_ID: {\n        public: true;\n        schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n    };\n}\n```\n\nExample:\n```text\ntype GOOGLE_ANALYTICS_ID: {\n    public: true;\n    schema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]>;\n}\n```\n\nExample:\n```text\npipe<v.StringSchema<undefined>, v.RegexAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.RegexAction<string, undefined> | v.PipeAction<string, string, v.RegexIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, undefined>]> (+20 overloads)\nexport pipe\n```\n\nExample:\n```text\nfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string\n```\n\nExample:\n```text\nregex<string>(requirement: RegExp): v.RegexAction<string, undefined> (+1 overload)\nexport regex\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\nimport { const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding } from '$app/env'\nimport * as import vv from 'valibot';\n\nexport const const variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}variables = defineEnvVars<{\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}>(variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}): {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype SECRET: {\n    schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n}SECRET: {\n\t\t// optional when building but required when starting the app\n\t\tschema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>schema: const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding ? import vv.optional<v.StringSchema<undefined>>(wrapped: v.StringSchema<undefined>): v.OptionalSchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport optionalCreates an optional schema.\n@paramwrapped The wrapped schema.@returnsAn optional schema.optional(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string()) : import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string()\n\t}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateconst building: booleanbuildbuildingtrueimport vconst variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}const variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}defineEnvVars<{\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}>(variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}): {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}defineEnvVars<{\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}>(variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}): {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}$app/env/public$app/env/privatetype SECRET: {\n    schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n}type SECRET: {\n    schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n}schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>const building: booleanbuildbuildingtrueimport voptional<v.StringSchema<undefined>>(wrapped: v.StringSchema<undefined>): v.OptionalSchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport optionaloptional<v.StringSchema<undefined>>(wrapped: v.StringSchema<undefined>): v.OptionalSchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport optionalimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string\n```\n\nExample:\n```text\nconst variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}>(variables: {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}): {\n    SECRET: {\n        schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n    };\n}\n```\n\nExample:\n```text\ntype SECRET: {\n    schema: v.StringSchema<undefined> | v.OptionalSchema<v.StringSchema<undefined>, undefined>;\n}\n```\n\nExample:\n```text\noptional<v.StringSchema<undefined>>(wrapped: v.StringSchema<undefined>): v.OptionalSchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport optional\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\nimport * as import vv from 'valibot';\n\nexport const const variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}variables = defineEnvVars<{\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}>(variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}): {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype SHOW_DEBUG_OVERLAY: {\n    public: true;\n    static: true;\n    schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n}SHOW_DEBUG_OVERLAY: {\n\t\tpublic: truepublic: true,\n\t\tstatic: truestatic: true,\n\n\t\t// coerce to true/false\n\t\tschema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>schema: import vv.pipe<v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>>(schema: v.OptionalSchema<v.StringSchema<undefined>, \"\">, item1: v.TransformAction<string, boolean> | v.PipeAction<string, boolean, never>): v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]> (+20 overloads)\nexport pipeAdds a pipeline to a schema, that can validate and transform its input.\n@paramschema The root schema.@paramitem1 The first pipe item.@returnsA schema with a pipeline.pipe(\n\t\t\timport vv.optional<v.StringSchema<undefined>, \"\">(wrapped: v.StringSchema<undefined>, default_: \"\"): v.OptionalSchema<v.StringSchema<undefined>, \"\"> (+1 overload)\nexport optionalCreates an optional schema.\n@paramwrapped The wrapped schema.@paramdefault_ The default value.@returnsAn optional schema.optional(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), ''),\n\t\t\timport vv.transform<string, boolean>(operation: (input: string) => boolean): v.TransformAction<string, boolean>\nexport transformCreates a custom transformation action.\n@paramoperation The transformation operation.@returnsA transform action.transform((str: stringstr) => str: stringstr !== '')\n\t\t)\n\t}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateimport vconst variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}const variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}defineEnvVars<{\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}>(variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}): {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}defineEnvVars<{\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}>(variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}): {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}$app/env/public$app/env/privatetype SHOW_DEBUG_OVERLAY: {\n    public: true;\n    static: true;\n    schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n}type SHOW_DEBUG_OVERLAY: {\n    public: true;\n    static: true;\n    schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n}public: truestatic: trueschema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>import vpipe<v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>>(schema: v.OptionalSchema<v.StringSchema<undefined>, \"\">, item1: v.TransformAction<string, boolean> | v.PipeAction<string, boolean, never>): v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]> (+20 overloads)\nexport pipepipe<v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>>(schema: v.OptionalSchema<v.StringSchema<undefined>, \"\">, item1: v.TransformAction<string, boolean> | v.PipeAction<string, boolean, never>): v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]> (+20 overloads)\nexport pipeimport voptional<v.StringSchema<undefined>, \"\">(wrapped: v.StringSchema<undefined>, default_: \"\"): v.OptionalSchema<v.StringSchema<undefined>, \"\"> (+1 overload)\nexport optionaloptional<v.StringSchema<undefined>, \"\">(wrapped: v.StringSchema<undefined>, default_: \"\"): v.OptionalSchema<v.StringSchema<undefined>, \"\"> (+1 overload)\nexport optionalimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringimport vtransform<string, boolean>(operation: (input: string) => boolean): v.TransformAction<string, boolean>\nexport transformtransform<string, boolean>(operation: (input: string) => boolean): v.TransformAction<string, boolean>\nexport transformstr: stringstr: string\n```\n\nExample:\n```text\nconst variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}>(variables: {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}): {\n    SHOW_DEBUG_OVERLAY: {\n        public: true;\n        static: true;\n        schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n    };\n}\n```\n\nExample:\n```text\ntype SHOW_DEBUG_OVERLAY: {\n    public: true;\n    static: true;\n    schema: v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]>;\n}\n```\n\nExample:\n```text\npipe<v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>>(schema: v.OptionalSchema<v.StringSchema<undefined>, \"\">, item1: v.TransformAction<string, boolean> | v.PipeAction<string, boolean, never>): v.SchemaWithPipe<readonly [v.OptionalSchema<v.StringSchema<undefined>, \"\">, v.TransformAction<string, boolean>]> (+20 overloads)\nexport pipe\n```\n\nExample:\n```text\noptional<v.StringSchema<undefined>, \"\">(wrapped: v.StringSchema<undefined>, default_: \"\"): v.OptionalSchema<v.StringSchema<undefined>, \"\"> (+1 overload)\nexport optional\n```\n\nExample:\n```text\ntransform<string, boolean>(operation: (input: string) => boolean): v.TransformAction<string, boolean>\nexport transform\n```\n\nExample:\n```text\n<script>\n\timport { SHOW_DEBUG_OVERLAY } from '$app/env/public';\n\timport DebugOverlay from '$lib/components/DebugOverlay.svelte';\n</script>\n\n{#if SHOW_DEBUG_OVERLAY}\n\t<DebugOverlay />\n{/if}\n```\n\nExample:\n```text\nSHOW_DEBUG_OVERLAY=true npm run build\n```\n\nExample:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';\n\nexport const const variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}variables = defineEnvVars<{\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}>(variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}): {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}Utility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars({\n\ttype CACHE_TTL_SECONDS: {\n    description: string;\n}CACHE_TTL_SECONDS: {\n\t\tdescription: stringdescription: 'How long to cache responses, in seconds'\n\t}\n});function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privateconst variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}const variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}defineEnvVars<{\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}>(variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}): {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}defineEnvVars<{\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}>(variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}): {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}$app/env/public$app/env/privatetype CACHE_TTL_SECONDS: {\n    description: string;\n}type CACHE_TTL_SECONDS: {\n    description: string;\n}description: string\n```\n\nExample:\n```text\nconst variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}\n```\n\nExample:\n```text\ndefineEnvVars<{\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}>(variables: {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}): {\n    CACHE_TTL_SECONDS: {\n        description: string;\n    };\n}\n```\n\nExample:\n```text\ntype CACHE_TTL_SECONDS: {\n    description: string;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.238Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":39,"totalLines":837,"estimatedTokens":7333}}160{"id":"doc-routing_sveltekit_docs-7079e7ba","source":"documentation","title":"Routing • SvelteKit Docs","url":"https://svelte.dev/docs/kit/routing","text":"Example:\n```text\n<h1>Hello and welcome to my site!</h1>\n<a href=\"/about\">About my site</a>\n```\n\nExample:\n```text\n<h1>About this site</h1>\n<p>TODO...</p>\n<a href=\"/\">Home</a>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.title}</h1>\n<div>{@html data.content}</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n</script>\n\n<h1>{data.title}</h1>\n<div>{@html data.content}</div>\n```\n\nExample:\n```text\n<script>\n\timport { getPost } from '../blog.remote';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { params } = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getPost } from '../blog.remote';\n\timport type { PageProps } from './$types';\n\tlet { params }: PageProps = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) {\n\tif (params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug === 'hello-world') {\n\t\treturn {\n\t\t\ttitle: stringtitle: 'Hello world!',\n\t\t\tcontent: stringcontent: 'Welcome to our blog. Lorem ipsum dolor sit amet...'\n\t\t};\n\t}\n\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n}function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }params: Record<string, any>/blog/[slug]{ slug: string }title: stringcontent: stringfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = ({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) => {\n\tif (params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug === 'hello-world') {\n\t\treturn {\n\t\t\ttitle: stringtitle: 'Hello world!',\n\t\t\tcontent: stringcontent: 'Welcome to our blog. Lorem ipsum dolor sit amet...'\n\t\t};\n\t}\n\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n};function error(status: number, body: App.Error): never (+1 overload)handleErrortype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }params: Record<string, any>/blog/[slug]{ slug: string }title: stringcontent: stringfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\tconst const post: {\n    title: string;\n    content: string;\n}post = await const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}getPostFromDatabase(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug);\n\n\tif (const post: {\n    title: string;\n    content: string;\n}post) {\n\t\treturn const post: {\n    title: string;\n    content: string;\n}post;\n\t}\n\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n}function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nconst post: {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\nconst getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\tconst const post: {\n    title: string;\n    content: string;\n}post = await const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}getPostFromDatabase(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug);\n\n\tif (const post: {\n    title: string;\n    content: string;\n}post) {\n\t\treturn const post: {\n    title: string;\n    content: string;\n}post;\n\t}\n\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n};function error(status: number, body: App.Error): never (+1 overload)handleErrortype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}const getPostFromDatabase: (slug: string) => {\n    title: string;\n    content: string;\n}params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}const post: {\n    title: string;\n    content: string;\n}function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.status}: {page.error.message}</h1>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.status}: {page.error.message}</h1>\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n{@render children()}\n```\n\nExample:\n```text\n<script>\n\tlet { children } = $props();\n</script>\n\n<nav>\n\t<a href=\"/\">Home</a>\n\t<a href=\"/about\">About</a>\n\t<a href=\"/settings\">Settings</a>\n</nav>\n\n{@render children()}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { children } = $props();\n</script>\n\n<nav>\n\t<a href=\"/\">Home</a>\n\t<a href=\"/about\">About</a>\n\t<a href=\"/settings\">Settings</a>\n</nav>\n\n{@render children()}\n```\n\nExample:\n```text\n<h1>Home</h1>\n```\n\nExample:\n```text\n<h1>About</h1>\n```\n\nExample:\n```text\n<h1>Settings</h1>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<h1>Settings</h1>\n\n<div class=\"submenu\">\n\t{#each data.sections as section}\n\t\t<a href=\"/settings/{section.slug}\">{section.title}</a>\n\t{/each}\n</div>\n\n{@render children()}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { LayoutProps } from './$types';\n\n\tlet { data, children }: LayoutProps = $props();\n</script>\n\n<h1>Settings</h1>\n\n<div class=\"submenu\">\n\t{#each data.sections as section}\n\t\t<a href=\"/settings/{section.slug}\">{section.title}</a>\n\t{/each}\n</div>\n\n{@render children()}\n```\n\nExample:\n```text\n/** @type {import('./$types').LayoutLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn {\n\t\tsections: {\n    slug: string;\n    title: string;\n}[]sections: [\n\t\t\t{ slug: stringslug: 'profile', title: stringtitle: 'Profile' },\n\t\t\t{ slug: stringslug: 'notifications', title: stringtitle: 'Notifications' }\n\t\t]\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>sections: {\n    slug: string;\n    title: string;\n}[]sections: {\n    slug: string;\n    title: string;\n}[]slug: stringtitle: stringslug: stringtitle: string\n```\n\nExample:\n```text\nsections: {\n    slug: string;\n    title: string;\n}[]\n```\n\nExample:\n```text\nimport type { type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad } from './$types';\n\nexport const const load: LayoutLoadload: type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad = () => {\n\treturn {\n\t\tsections: {\n    slug: string;\n    title: string;\n}[]sections: [\n\t\t\t{ slug: stringslug: 'profile', title: stringtitle: 'Profile' },\n\t\t\t{ slug: stringslug: 'notifications', title: stringtitle: 'Notifications' }\n\t\t]\n\t};\n};type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutLoadtype LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>sections: {\n    slug: string;\n    title: string;\n}[]sections: {\n    slug: string;\n    title: string;\n}[]slug: stringtitle: stringslug: stringtitle: string\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tconsole.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n\n\tconsole.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]\n</script>\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function function GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>GET({ url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) {\n\tconst const min: numbermin = var Number: NumberConstructor\n(value?: any) => numberAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.\nNumber(url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.get(name: string): string | nullThe get() method of the URLSearchParams interface returns the first value associated to the given search parameter.\nMDN Reference\nget('min') ?? '0');\n\tconst const max: numbermax = var Number: NumberConstructor\n(value?: any) => numberAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.\nNumber(url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.get(name: string): string | nullThe get() method of the URLSearchParams interface returns the first value associated to the given search parameter.\nMDN Reference\nget('max') ?? '1');\n\n\tconst const d: numberd = const max: numbermax - const min: numbermin;\n\n\tif (function isNaN(number: number): booleanReturns a Boolean value that indicates whether a value is the reserved value NaN (not a number).\n@paramnumber A numeric value.isNaN(const d: numberd) || const d: numberd < 0) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(400, 'min and max must be numbers, and min must be less than max');\n\t}\n\n\tconst const random: numberrandom = const min: numbermin + var Math: MathAn intrinsic object that provides basic mathematics functionality and constants.\nMath.Math.random(): numberReturns a pseudorandom number between 0 and 1.\nrandom() * const d: numberd;\n\n\treturn new var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse(var String: StringConstructor\n(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.\nString(const random: numberrandom));\n}function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>url: URLconst min: numbervar Number: NumberConstructor\n(value?: any) => numbervar Number: NumberConstructor\n(value?: any) => numberurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.get(name: string): string | nullget()const max: numbervar Number: NumberConstructor\n(value?: any) => numbervar Number: NumberConstructor\n(value?: any) => numberurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.get(name: string): string | nullget()const d: numberconst max: numberconst min: numberfunction isNaN(number: number): booleanconst d: numberconst d: numberfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorconst random: numberconst min: numbervar Math: MathMath.random(): numberconst d: numbervar Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseResponsevar String: StringConstructor\n(value?: any) => stringvar String: StringConstructor\n(value?: any) => stringconst random: number\n```\n\nExample:\n```text\nvar Number: NumberConstructor\n(value?: any) => number\n```\n\nExample:\n```text\nvar String: StringConstructor\n(value?: any) => string\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const GET: RequestHandlerGET: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = ({ url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) => {\n\tconst const min: numbermin = var Number: NumberConstructor\n(value?: any) => numberAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.\nNumber(url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.get(name: string): string | nullThe get() method of the URLSearchParams interface returns the first value associated to the given search parameter.\nMDN Reference\nget('min') ?? '0');\n\tconst const max: numbermax = var Number: NumberConstructor\n(value?: any) => numberAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.\nNumber(url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.get(name: string): string | nullThe get() method of the URLSearchParams interface returns the first value associated to the given search parameter.\nMDN Reference\nget('max') ?? '1');\n\n\tconst const d: numberd = const max: numbermax - const min: numbermin;\n\n\tif (function isNaN(number: number): booleanReturns a Boolean value that indicates whether a value is the reserved value NaN (not a number).\n@paramnumber A numeric value.isNaN(const d: numberd) || const d: numberd < 0) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(400, 'min and max must be numbers, and min must be less than max');\n\t}\n\n\tconst const random: numberrandom = const min: numbermin + var Math: MathAn intrinsic object that provides basic mathematics functionality and constants.\nMath.Math.random(): numberReturns a pseudorandom number between 0 and 1.\nrandom() * const d: numberd;\n\n\treturn new var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse(var String: StringConstructor\n(value?: any) => stringAllows manipulation and formatting of text strings and determination and location of substrings within strings.\nString(const random: numberrandom));\n};function error(status: number, body: App.Error): never (+1 overload)handleErrortype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const GET: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>url: URLconst min: numbervar Number: NumberConstructor\n(value?: any) => numbervar Number: NumberConstructor\n(value?: any) => numberurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.get(name: string): string | nullget()const max: numbervar Number: NumberConstructor\n(value?: any) => numbervar Number: NumberConstructor\n(value?: any) => numberurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.get(name: string): string | nullget()const d: numberconst max: numberconst min: numberfunction isNaN(number: number): booleanconst d: numberconst d: numberfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorconst random: numberconst min: numbervar Math: MathMath.random(): numberconst d: numbervar Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseResponsevar String: StringConstructor\n(value?: any) => stringvar String: StringConstructor\n(value?: any) => stringconst random: number\n```\n\nExample:\n```text\n<script>\n\tlet a = $state(0);\n\tlet b = $state(0);\n\tlet total = $state(0);\n\n\tasync function add() {\n\t\tconst response = await fetch('/api/add', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: JSON.stringify({ a, b }),\n\t\t\theaders: {\n\t\t\t\t'content-type': 'application/json'\n\t\t\t}\n\t\t});\n\n\t\ttotal = await response.json();\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}> +\n<input type=\"number\" bind:value={b}> =\n{total}\n\n<button onclick={add}>Calculate</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet a = $state(0);\n\tlet b = $state(0);\n\tlet total = $state(0);\n\n\tasync function add() {\n\t\tconst response = await fetch('/api/add', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: JSON.stringify({ a, b }),\n\t\t\theaders: {\n\t\t\t\t'content-type': 'application/json'\n\t\t\t}\n\t\t});\n\n\t\ttotal = await response.json();\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}> +\n<input type=\"number\" bind:value={b}> =\n{total}\n\n<button onclick={add}>Calculate</button>\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function function POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>POST({ request: RequestThe original request object.\nrequest }) {\n\tconst { const a: anya, const b: anyb } = await request: RequestThe original request object.\nrequest.Body.json(): Promise<any>MDN Reference\nreferencejson();\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson(const a: anya + const b: anyb);\n}function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>request: Requestconst a: anyconst b: anyrequest: RequestBody.json(): Promise<any>function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthconst a: anyconst b: any\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson } from '@sveltejs/kit';\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const POST: RequestHandlerPOST: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = async ({ request: RequestThe original request object.\nrequest }) => {\n\tconst { const a: anya, const b: anyb } = await request: RequestThe original request object.\nrequest.Body.json(): Promise<any>MDN Reference\nreferencejson();\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson(const a: anya + const b: anyb);\n};function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthtype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const POST: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>request: Requestconst a: anyconst b: anyrequest: RequestBody.json(): Promise<any>function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthconst a: anyconst b: any\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson, function text(body: string, init?: ResponseInit): ResponseCreate a Response object from the supplied body.\n@parambody The value that will be used as-is.@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.referencetext } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function function POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>POST({ request: RequestThe original request object.\nrequest }) {\n\tconst { const a: anya, const b: anyb } = await request: RequestThe original request object.\nrequest.Body.json(): Promise<any>MDN Reference\nreferencejson();\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson(const a: anya + const b: anyb);\n}\n\n// This handler will respond to PUT, PATCH, DELETE, etc.\n/** @type {import('./$types').RequestHandler} */\nexport async function function fallback(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>fallback({ request: RequestThe original request object.\nrequest }) {\n\treturn function text(body: string, init?: ResponseInit): ResponseCreate a Response object from the supplied body.\n@parambody The value that will be used as-is.@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.referencetext(`I caught your ${request: RequestThe original request object.\nrequest.Request.method: stringThe method read-only property of the Request interface contains the request’s method (GET, POST, etc.)\nMDN Reference\nmethod} request!`);\n}function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction text(body: string, init?: ResponseInit): ResponseResponsestatusheadersContent-Lengthfunction POST(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>request: Requestconst a: anyconst b: anyrequest: RequestBody.json(): Promise<any>function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthconst a: anyconst b: anyfunction fallback(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>request: Requestfunction text(body: string, init?: ResponseInit): ResponseResponsestatusheadersContent-Lengthrequest: RequestRequest.method: stringmethod\n```\n\nExample:\n```text\nimport { function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson, function text(body: string, init?: ResponseInit): ResponseCreate a Response object from the supplied body.\n@parambody The value that will be used as-is.@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.referencetext } from '@sveltejs/kit';\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const POST: RequestHandlerPOST: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = async ({ request: RequestThe original request object.\nrequest }) => {\n\tconst { const a: anya, const b: anyb } = await request: RequestThe original request object.\nrequest.Body.json(): Promise<any>MDN Reference\nreferencejson();\n\treturn function json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson(const a: anya + const b: anyb);\n};\n\n// This handler will respond to PUT, PATCH, DELETE, etc.\n\nexport const const fallback: RequestHandlerfallback: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = async ({ request: RequestThe original request object.\nrequest }) => {\n\treturn function text(body: string, init?: ResponseInit): ResponseCreate a Response object from the supplied body.\n@parambody The value that will be used as-is.@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.referencetext(`I caught your ${request: RequestThe original request object.\nrequest.Request.method: stringThe method read-only property of the Request interface contains the request’s method (GET, POST, etc.)\nMDN Reference\nmethod} request!`);\n};function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction text(body: string, init?: ResponseInit): ResponseResponsestatusheadersContent-Lengthtype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const POST: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>request: Requestconst a: anyconst b: anyrequest: RequestBody.json(): Promise<any>function json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthconst a: anyconst b: anyconst fallback: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>request: Requestfunction text(body: string, init?: ResponseInit): ResponseResponsestatusheadersContent-Lengthrequest: RequestRequest.method: stringmethod\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n</script>\n```\n\nExample:\n```text\n/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\nlet { data, form } = $props();\n```\n\nExample:\n```text\nimport type { PageData, ActionData } from './$types';\n\nlet { data, form }: { data: PageData, form: ActionData } = $props();\n```\n\nExample:\n```text\n/** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\nlet { data, children } = $props();\n```\n\nExample:\n```text\nimport type { LayoutData } from './$types';\n\nlet { data, children }: { data: LayoutData, children: Snippet } = $props();\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.240Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":44,"totalLines":827,"estimatedTokens":11400}}161{"id":"doc-form_actions_sveltekit_docs-c4a775e6","source":"documentation","title":"Form actions • SvelteKit Docs","url":"https://svelte.dev/docs/kit/form-actions","text":"Example:\n```text\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tdefault: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>default: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO log the user in\n\t}\n};const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>\n```\n\nExample:\n```text\nconst actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nimport type { type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tdefault: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>default: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO log the user in\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}default: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\ntype Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n<form method=\"POST\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n</form>\n```\n\nExample:\n```text\n<form method=\"POST\" action=\"/login\">\n\t<!-- content -->\n</form>\n```\n\nExample:\n```text\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tdefault: async (event) => {\n\tlogin: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>login: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO log the user in\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n};const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>\n```\n\nExample:\n```text\nconst actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nimport type { type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tdefault: async (event) => {\n\tlogin: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>login: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO log the user in\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n<form method=\"POST\" action=\"?/register\">\n```\n\nExample:\n```text\n<form method=\"POST\" action=\"/login?/register\">\n```\n\nExample:\n```text\n<form method=\"POST\" action=\"?/login\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\nExample:\n```text\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ cookies: CookiesGet or set cookies related to the current request\ncookies }) {\n\tconst const user: anyuser = await module \"$lib/server/db\"db.getUserFromSession(cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\treturn { user: anyuser };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValue | nullemail);\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n};module \"$lib/server/db\"function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>cookies: Cookiesconst user: anymodule \"$lib/server/db\"cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseuser: anyconst actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>cookies: Cookiesrequest: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const user: anymodule \"$lib/server/db\"const email: FormDataEntryValue | nullcookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookiesuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>\n```\n\nExample:\n```text\nconst actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>\n```\n\nExample:\n```text\nCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => void\n```\n\nExample:\n```text\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad, type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ cookies: CookiesGet or set cookies related to the current request\ncookies }) => {\n\tconst const user: anyuser = await module \"$lib/server/db\"db.getUserFromSession(cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\treturn { user: anyuser };\n};\n\nexport const const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValue | nullemail);\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;module \"$lib/server/db\"type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>cookies: Cookiesconst user: anymodule \"$lib/server/db\"cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseuser: anyconst actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{\n    success: boolean;\n}>cookies: Cookiesrequest: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const user: anymodule \"$lib/server/db\"const email: FormDataEntryValue | nullcookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookiesuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n\n{#if form?.success}\n\t<!-- this message is ephemeral; it exists because the page was rendered in\n\t       response to a form submission. it will vanish if the user reloads -->\n\t<p>Successfully logged in! Welcome back, {data.user.name}</p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data, form }: PageProps = $props();\n</script>\n\n{#if form?.success}\n\t<!-- this message is ephemeral; it exists because the page was rendered in\n\t       response to a form submission. it will vanish if the user reloads -->\n\t<p>Successfully logged in! Welcome back, {data.user.name}</p>\n{/if}\n```\n\nExample:\n```text\n/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\nlet { data, form } = $props();\n```\n\nExample:\n```text\nimport type { PageData, ActionData } from './$types';\n\nlet { data, form }: { data: PageData, form: ActionData } = $props();\n```\n\nExample:\n```text\nimport { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.referencefail } from '@sveltejs/kit';\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tif (!const email: FormDataEntryValue | nullemail) {\n\t\t\treturn fail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: string | nullemail, missing: booleanmissing: true });\n\t\t}\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValueemail);\n\n\t\tif (!const user: anyuser || const user: anyuser.password !== module \"$lib/server/db\"db.hash(const password: FormDataEntryValue | nullpassword)) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValueemail, incorrect: booleanincorrect: true });\n\t\t}\n\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n};function fail(status: number): ActionFailure<undefined> (+1 overload)ActionFailuremodule \"$lib/server/db\"const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>cookies: Cookiesrequest: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const email: FormDataEntryValue | nullfail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)fail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)ActionFailureemail: string | nullmissing: booleanconst user: anymodule \"$lib/server/db\"const email: FormDataEntryValueconst user: anyconst user: anymodule \"$lib/server/db\"const password: FormDataEntryValue | nullfail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValueincorrect: booleancookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookiesuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>\n```\n\nExample:\n```text\nconst actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>\n```\n\nExample:\n```text\nfail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)\n```\n\nExample:\n```text\nfail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)\n```\n\nExample:\n```text\nimport { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.referencefail } from '@sveltejs/kit';\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\nimport type { type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tlogin: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tif (!const email: FormDataEntryValue | nullemail) {\n\t\t\treturn fail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: string | nullemail, missing: booleanmissing: true });\n\t\t}\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValueemail);\n\n\t\tif (!const user: anyuser || const user: anyuser.password !== module \"$lib/server/db\"db.hash(const password: FormDataEntryValue | nullpassword)) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValueemail, incorrect: booleanincorrect: true });\n\t\t}\n\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;function fail(status: number): ActionFailure<undefined> (+1 overload)ActionFailuremodule \"$lib/server/db\"type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: string | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>cookies: Cookiesrequest: Requestconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const email: FormDataEntryValue | nullfail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)fail<{\n    email: string | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: string | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: string | null;\n    missing: boolean;\n}> (+1 overload)ActionFailureemail: string | nullmissing: booleanconst user: anymodule \"$lib/server/db\"const email: FormDataEntryValueconst user: anyconst user: anymodule \"$lib/server/db\"const password: FormDataEntryValue | nullfail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue;\n    incorrect: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValueincorrect: booleancookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookiesuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n<form method=\"POST\" action=\"?/login\">\n\t{#if form?.missing}<p class=\"error\">The email field is required</p>{/if}\n\t{#if form?.incorrect}<p class=\"error\">Invalid credentials!</p>{/if}\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\" value={form?.email ?? ''}>\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\nExample:\n```text\nimport { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.referencefail, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tlogin: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest, url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValue | nullemail);\n\t\tif (!const user: anyuser) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValue | nullemail, missing: booleanmissing: true });\n\t\t}\n\n\t\tif (const user: anyuser.password !== module \"$lib/server/db\"db.hash(const password: FormDataEntryValue | nullpassword)) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValue | nullemail, incorrect: booleanincorrect: true });\n\t\t}\n\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\tif (url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.has(name: string, value?: string): booleanThe has() method of the URLSearchParams interface returns a boolean value that indicates whether the specified parameter is in the search parameters.\nMDN Reference\nhas('redirectTo')) {\n\t\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(303, url.searchParams.get('redirectTo'));\n\t\t}\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n};function fail(status: number): ActionFailure<undefined> (+1 overload)ActionFailurefunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectmodule \"$lib/server/db\"const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>cookies: Cookiesrequest: Requesturl: URLconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const user: anymodule \"$lib/server/db\"const email: FormDataEntryValue | nullconst user: anyfail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValue | nullmissing: booleanconst user: anymodule \"$lib/server/db\"const password: FormDataEntryValue | nullfail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValue | nullincorrect: booleancookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookieurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.has(name: string, value?: string): booleanhas()function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectsuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>\n```\n\nExample:\n```text\nconst actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nlogin: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>\n```\n\nExample:\n```text\nfail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)\n```\n\nExample:\n```text\nfail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)\n```\n\nExample:\n```text\nimport { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.referencefail, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\nimport * as module \"$lib/server/db\"db from '$lib/server/db';\nimport type { type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tlogin: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: async ({ cookies: CookiesGet or set cookies related to the current request\ncookies, request: RequestThe original request object.\nrequest, url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) => {\n\t\tconst const data: FormDatadata = await request: RequestThe original request object.\nrequest.Body.formData(): Promise<FormData>MDN Reference\nformData();\n\t\tconst const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('email');\n\t\tconst const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullThe get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.\nMDN Reference\nget('password');\n\n\t\tconst const user: anyuser = await module \"$lib/server/db\"db.getUser(const email: FormDataEntryValue | nullemail);\n\t\tif (!const user: anyuser) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValue | nullemail, missing: booleanmissing: true });\n\t\t}\n\n\t\tif (const user: anyuser.password !== module \"$lib/server/db\"db.hash(const password: FormDataEntryValue | nullpassword)) {\n\t\t\treturn fail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.@paramdata Data associated with the failure (e.g. validation errors)referencefail(400, { email: FormDataEntryValue | nullemail, incorrect: booleanincorrect: true });\n\t\t}\n\n\t\tcookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.\nThe httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramvalue the cookie value@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module \"$lib/server/db\"db.createSession(const user: anyuser), { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\n\t\tif (url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.has(name: string, value?: string): booleanThe has() method of the URLSearchParams interface returns a boolean value that indicates whether the specified parameter is in the search parameters.\nMDN Reference\nhas('redirectTo')) {\n\t\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(303, url.searchParams.get('redirectTo'));\n\t\t}\n\n\t\treturn { success: booleansuccess: true };\n\t},\n\tregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\t// TODO register the user\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;function fail(status: number): ActionFailure<undefined> (+1 overload)ActionFailurefunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectmodule \"$lib/server/db\"type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n        email: FormDataEntryValue | null;\n        missing: boolean;\n    }> | ActionFailure<{\n        email: FormDataEntryValue | null;\n        incorrect: boolean;\n    }> | {\n        success: boolean;\n    }>;\n    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> | ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> | {\n    success: boolean;\n}>cookies: Cookiesrequest: Requesturl: URLconst data: FormDatarequest: RequestBody.formData(): Promise<FormData>const email: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const password: FormDataEntryValue | nullconst data: FormDataFormData.get(name: string): FormDataEntryValue | nullget()const user: anymodule \"$lib/server/db\"const email: FormDataEntryValue | nullconst user: anyfail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    missing: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValue | nullmissing: booleanconst user: anymodule \"$lib/server/db\"const password: FormDataEntryValue | nullfail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)fail<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}>(status: number, data: {\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}): ActionFailure<{\n    email: FormDataEntryValue | null;\n    incorrect: boolean;\n}> (+1 overload)ActionFailureemail: FormDataEntryValue | nullincorrect: booleancookies: CookiesCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.set: (name: string, value: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidset-cookiecookies.getcookies.getAllhttpOnlysecuretruesecurefalsesameSitelaxpathpath: '/'path: ''cookie.serializemodule \"$lib/server/db\"const user: anypath: stringPathSet-Cookieurl: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.has(name: string, value?: string): booleanhas()function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectsuccess: booleanregister: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tevent: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser = await function getUser(sessionid: string | undefined): {\n    name: string;\n}getUser(event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\treturn resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n}function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | nullfunction getUser(sessionid: string | undefined): {\n    name: string;\n}function getUser(sessionid: string | undefined): {\n    name: string;\n}event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>\n```\n\nExample:\n```text\nfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nApp.Locals.user: {\n    name: string;\n} | null\n```\n\nExample:\n```text\nfunction getUser(sessionid: string | undefined): {\n    name: string;\n}\n```\n\nExample:\n```text\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tevent: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser = await function getUser(sessionid: string | undefined): {\n    name: string;\n}getUser(event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\treturn resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n};type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | nullfunction getUser(sessionid: string | undefined): {\n    name: string;\n}function getUser(sessionid: string | undefined): {\n    name: string;\n}event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>\n```\n\nExample:\n```text\ntype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event) {\n\treturn {\n\t\tuser: {\n    name: string;\n} | nulluser: event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser\n\t};\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const const actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}@satisfies{import('./$types').Actions}actions = {\n\tlogout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>logout: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\tevent: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.serialize. The path must match the path of the cookie you want to delete. See documentation heredelete('sessionid', { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\t\tevent: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser = null;\n\t}\n};function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>user: {\n    name: string;\n} | nulluser: {\n    name: string;\n} | nullevent: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | nullconst actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>event: RequestEvent<Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.cookies: CookiesCookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidpathpath: '/'path: ''cookie.serializepathpath: stringPathSet-Cookieevent: RequestEvent<Record<string, any>, string | null>RequestEvent<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | null\n```\n\nExample:\n```text\nuser: {\n    name: string;\n} | null\n```\n\nExample:\n```text\nconst actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}\n```\n\nExample:\n```text\nCookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => void\n```\n\nExample:\n```text\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad, type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event) => {\n\treturn {\n\t\tuser: {\n    name: string;\n} | nulluser: event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser\n\t};\n};\n\nexport const const actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}actions = {\n\tlogout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>logout: async (event: RequestEvent<Record<string, any>, string | null>event) => {\n\t\tevent: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.\nYou must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.serialize. The path must match the path of the cookie you want to delete. See documentation heredelete('sessionid', { path: stringSpecifies the value for the \n{@link \nhttps://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute\n}\n.\nBy default, the path is considered the “default path”.\npath: '/' });\n\t\tevent: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: {\n    name: string;\n} | nulluser = null;\n\t}\n} satisfies type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}Actions;type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>user: {\n    name: string;\n} | nulluser: {\n    name: string;\n} | nullevent: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | nullconst actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}const actions: {\n    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;\n}logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>event: RequestEvent<Record<string, any>, string | null>event: RequestEvent<Record<string, any>, string | null>RequestEvent<Record<string, any>, string | null>.cookies: CookiesCookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidCookies.delete: (name: string, opts: CookieSerializeOptions & {\n    path: string;\n}) => voidpathpath: '/'path: ''cookie.serializepathpath: stringPathSet-Cookieevent: RequestEvent<Record<string, any>, string | null>RequestEvent<Params extends LayoutParams<\"/\"> = Record<string, string>, RouteId extends RouteId | null = string | null>.locals: App.Localsserver handle hookApp.Locals.user: {\n    name: string;\n} | nullApp.Locals.user: {\n    name: string;\n} | nulltype Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}type Actions = {\n    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;\n}\n```\n\nExample:\n```text\n<script>\n\timport { enhance } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form method=\"POST\" use:enhance>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { enhance } from '$app/forms';\n\timport type { PageProps } from './$types';\n\tlet { form }: PageProps = $props();\n</script>\n\n<form method=\"POST\" use:enhance>\n```\n\nExample:\n```text\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel, submitter }) => {\n\t\t// `formElement` is this `<form>` element\n\t\t// `formData` is its `FormData` object that's about to be submitted\n\t\t// `action` is the URL to which the form is posted\n\t\t// calling `cancel()` will prevent the submission\n\t\t// `submitter` is the `HTMLElement` that caused the form to be submitted\n\n\t\treturn async ({ result, update }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\t// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set\n\t\t};\n\t}}\n>\n```\n\nExample:\n```text\n<script>\n\timport { enhance, applyAction } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel }) => {\n\t\treturn async ({ result }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\tif (result.type === 'redirect') {\n\t\t\t\tgoto(result.location);\n\t\t\t} else {\n\t\t\t\tawait applyAction(result);\n\t\t\t}\n\t\t};\n\t}}\n>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { enhance, applyAction } from '$app/forms';\n\timport type { PageProps } from './$types';\n\tlet { form }: PageProps = $props();\n</script>\n\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel }) => {\n\t\treturn async ({ result }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\tif (result.type === 'redirect') {\n\t\t\t\tgoto(result.location);\n\t\t\t} else {\n\t\t\t\tawait applyAction(result);\n\t\t\t}\n\t\t};\n\t}}\n>\n```\n\nExample:\n```text\n<script>\n\timport { invalidateAll, goto } from '$app/navigation';\n\timport { applyAction, deserialize } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n\n\t/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */\n\tasync function handleSubmit(event) {\n\t\tevent.preventDefault();\n\t\tconst data = new FormData(event.currentTarget, event.submitter);\n\n\t\tconst response = await fetch(event.currentTarget.action, {\n\t\t\tmethod: 'POST',\n\t\t\tbody: data\n\t\t});\n\n\t\t/** @type {import('@sveltejs/kit').ActionResult} */\n\t\tconst result = deserialize(await response.text());\n\n\t\tif (result.type === 'success') {\n\t\t\t// rerun all `load` functions, following the successful update\n\t\t\tawait invalidateAll();\n\t\t}\n\n\t\tapplyAction(result);\n\t}\n</script>\n\n<form method=\"POST\" onsubmit={handleSubmit}>\n\t<!-- content -->\n</form>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { invalidateAll, goto } from '$app/navigation';\n\timport { applyAction, deserialize } from '$app/forms';\n\timport type { PageProps } from './$types';\n\timport type { ActionResult } from '@sveltejs/kit';\n\tlet { form }: PageProps = $props();\n\n\tasync function handleSubmit(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}) {\n\t\tevent.preventDefault();\n\t\tconst data = new FormData(event.currentTarget, event.submitter);\n\n\t\tconst response = await fetch(event.currentTarget.action, {\n\t\t\tmethod: 'POST',\n\t\t\tbody: data\n\t\t});\n\n\t\tconst result: ActionResult = deserialize(await response.text());\n\n\t\tif (result.type === 'success') {\n\t\t\t// rerun all `load` functions, following the successful update\n\t\t\tawait invalidateAll();\n\t\t}\n\n\t\tapplyAction(result);\n\t}\n</script>\n\n<form method=\"POST\" onsubmit={handleSubmit}>\n\t<!-- content -->\n</form>\n```\n\nExample:\n```text\nconst const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference\nfetch(this.action, {\n\tRequestInit.method?: string | undefinedA string to set request’s method.\nmethod: 'POST',\n\tRequestInit.body?: BodyInit | null | undefinedA BodyInit object or null to set request’s body.\nbody: data,\n\tRequestInit.headers?: HeadersInit | undefinedA Headers object, an object literal, or an array of two-item arrays to set request’s headers.\nheaders: {\n\t\t'x-sveltekit-action': 'true'\n\t}\n});const response: Responsefunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)RequestInit.method?: string | undefinedRequestInit.body?: BodyInit | null | undefinedRequestInit.headers?: HeadersInit | undefined\n```\n\nExample:\n```text\n<script>\n\tfunction rerun() {\n\t\tfetch('/api/ci', {\n\t\t\tmethod: 'POST'\n\t\t});\n\t}\n</script>\n\n<button onclick={rerun}>Rerun CI</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tfunction rerun() {\n\t\tfetch('/api/ci', {\n\t\t\tmethod: 'POST'\n\t\t});\n\t}\n</script>\n\n<button onclick={rerun}>Rerun CI</button>\n```\n\nExample:\n```text\n/** @type {import('./$types').RequestHandler} */\nexport function POST() {\n\t// do something\n}\n```\n\nExample:\n```text\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\nexport const POST: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = () => {\n\t// do something\n};type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>\n```\n\nExample:\n```text\n<form action=\"/search\">\n\t<label>\n\t\tSearch\n\t\t<input name=\"q\">\n\t</label>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.244Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":58,"totalLines":1797,"estimatedTokens":22505}}162{"id":"doc-loading_data_sveltekit_docs-a783d5d8","source":"documentation","title":"Loading data • SvelteKit Docs","url":"https://svelte.dev/docs/kit/load","text":"Example:\n```text\n/** @type {import('./$types').PageLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) {\n\treturn {\n\t\tpost: {\n    title: string;\n    content: string;\n}post: {\n\t\t\ttitle: stringtitle: `Title for ${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug} goes here`,\n\t\t\tcontent: stringcontent: `Content for ${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug} goes here`\n\t\t}\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}title: stringparams: Record<string, any>/blog/[slug]{ slug: string }content: stringparams: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\npost: {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = ({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) => {\n\treturn {\n\t\tpost: {\n    title: string;\n    content: string;\n}post: {\n\t\t\ttitle: stringtitle: `Title for ${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug} goes here`,\n\t\t\tcontent: stringcontent: `Content for ${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.slug} goes here`\n\t\t}\n\t};\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}title: stringparams: Record<string, any>/blog/[slug]{ slug: string }content: stringparams: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n```\n\nExample:\n```text\n/** @type {{ data: import('./$types').PageData }} */\nlet { data } = $props();\n```\n\nExample:\n```text\nimport type { PageData } from './$types';\n\nlet { data }: { data: PageData } = $props();\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\treturn {\n\t\tpost: {\n    title: string;\n    content: string;\n}post: await module \"$lib/server/database\"db.function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>getPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug)\n\t};\n}module \"$lib/server/database\"function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}module \"$lib/server/database\"function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\nfunction getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\treturn {\n\t\tpost: {\n    title: string;\n    content: string;\n}post: await module \"$lib/server/database\"db.function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>getPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug)\n\t};\n};module \"$lib/server/database\"type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}module \"$lib/server/database\"function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn {\n\t\tposts: {\n    title: string;\n    slug: string;\n}[]posts: await module \"$lib/server/database\"db.function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>getPostSummaries()\n\t};\n}module \"$lib/server/database\"function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>posts: {\n    title: string;\n    slug: string;\n}[]posts: {\n    title: string;\n    slug: string;\n}[]module \"$lib/server/database\"function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>\n```\n\nExample:\n```text\nposts: {\n    title: string;\n    slug: string;\n}[]\n```\n\nExample:\n```text\nfunction getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\nimport type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';\n\nexport const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = async () => {\n\treturn {\n\t\tposts: {\n    title: string;\n    slug: string;\n}[]posts: await module \"$lib/server/database\"db.function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>getPostSummaries()\n\t};\n};module \"$lib/server/database\"type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutServerLoadtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>posts: {\n    title: string;\n    slug: string;\n}[]posts: {\n    title: string;\n    slug: string;\n}[]module \"$lib/server/database\"function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>function getPostSummaries(): Promise<Array<{\n    title: string;\n    slug: string;\n}>>\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<main>\n\t<!-- +page.svelte is `@render`ed here -->\n\t{@render children()}\n</main>\n\n<aside>\n\t<h2>More posts</h2>\n\t<ul>\n\t\t{#each data.posts as post}\n\t\t\t<li>\n\t\t\t\t<a href=\"/blog/{post.slug}\">\n\t\t\t\t\t{post.title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</aside>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { LayoutProps } from './$types';\n\n\tlet { data, children }: LayoutProps = $props();\n</script>\n\n<main>\n\t<!-- +page.svelte is `@render`ed here -->\n\t{@render children()}\n</main>\n\n<aside>\n\t<h2>More posts</h2>\n\t<ul>\n\t\t{#each data.posts as post}\n\t\t\t<li>\n\t\t\t\t<a href=\"/blog/{post.slug}\">\n\t\t\t\t\t{post.title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</aside>\n```\n\nExample:\n```text\n/** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\nlet { data, children } = $props();\n```\n\nExample:\n```text\nimport type { LayoutData } from './$types';\n\nlet { data, children }: { data: LayoutData, children: Snippet } = $props();\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\t// we can access `data.posts` because it's returned from\n\t// the parent layout `load` function\n\tlet index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));\n\tlet next = $derived(data.posts[index + 1]);\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#if next}\n\t<p>Next post: <a href=\"/blog/{next.slug}\">{next.title}</a></p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n\timport type { PageProps } from './$types';\n\tlet { data }: PageProps = $props();\n\n\t// we can access `data.posts` because it's returned from\n\t// the parent layout `load` function\n\tlet index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));\n\tlet next = $derived(data.posts[index + 1]);\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#if next}\n\t<p>Next post: <a href=\"/blog/{next.slug}\">{next.title}</a></p>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<svelte:head>\n\t<title>{page.data.title}</title>\n</svelte:head>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<svelte:head>\n\t<title>{page.data.title}</title>\n</svelte:head>\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn {\n\t\tserverMessage: stringserverMessage: 'hello from server load function'\n\t};\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>serverMessage: string\n```\n\nExample:\n```text\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async () => {\n\treturn {\n\t\tserverMessage: stringserverMessage: 'hello from server load function'\n\t};\n};type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>serverMessage: string\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ data: Record<string, any> | nullContains the data returned by the route’s server load function (in +layout.server.js or +page.server.js), if any.\ndata }) {\n\treturn {\n\t\tserverMessage: anyserverMessage: data.serverMessage,\n\t\tuniversalMessage: stringuniversalMessage: 'hello from universal load function'\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>data: Record<string, any> | nullload+layout.server.js+page.server.jsserverMessage: anyuniversalMessage: string\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ data: Record<string, any> | nullContains the data returned by the route’s server load function (in +layout.server.js or +page.server.js), if any.\ndata }) => {\n\treturn {\n\t\tserverMessage: anyserverMessage: data.serverMessage,\n\t\tuniversalMessage: stringuniversalMessage: 'hello from universal load function'\n\t};\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>data: Record<string, any> | nullload+layout.server.js+page.server.jsserverMessage: anyuniversalMessage: string\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ route: {\n    id: string | null;\n}Info about the current route\nroute }) {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(route: {\n    id: string | null;\n}Info about the current route\nroute.id: string | nullThe ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.\nid); // '/a/[b]/[...c]'\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>route: {\n    id: string | null;\n}route: {\n    id: string | null;\n}var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()route: {\n    id: string | null;\n}route: {\n    id: string | null;\n}id: string | nullsrc/routes/blog/[slug]/blog/[slug]null\n```\n\nExample:\n```text\nroute: {\n    id: string | null;\n}\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = ({ route: {\n    id: string | null;\n}Info about the current route\nroute }) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(route: {\n    id: string | null;\n}Info about the current route\nroute.id: string | nullThe ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.\nid); // '/a/[b]/[...c]'\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>route: {\n    id: string | null;\n}route: {\n    id: string | null;\n}var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()route: {\n    id: string | null;\n}route: {\n    id: string | null;\n}id: string | nullsrc/routes/blog/[slug]/blog/[slug]null\n```\n\nExample:\n```text\n{\n\t\"b\": \"x\",\n\t\"c\": \"y/z\"\n}\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) {\n\tconst const res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(`/api/items/${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.id}`);\n\tconst const item: anyitem = await const res: Responseres.Body.json(): Promise<any>MDN Reference\njson();\n\n\treturn { item: anyitem };\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersparams: Record<string, any>/blog/[slug]{ slug: string }const res: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)params: Record<string, any>/blog/[slug]{ slug: string }const item: anyconst res: ResponseBody.json(): Promise<any>item: any\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams }) => {\n\tconst const res: Responseres = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(`/api/items/${params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams.id}`);\n\tconst const item: anyitem = await const res: Responseres.Body.json(): Promise<any>MDN Reference\njson();\n\n\treturn { item: anyitem };\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersparams: Record<string, any>/blog/[slug]{ slug: string }const res: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)params: Record<string, any>/blog/[slug]{ slug: string }const item: anyconst res: ResponseBody.json(): Promise<any>item: any\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ cookies: CookiesGet or set cookies related to the current request\ncookies }) {\n\tconst const sessionid: string | undefinedsessionid = cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid');\n\n\treturn {\n\t\tuser: {\n    name: string;\n    avatar: string;\n}user: await module \"$lib/server/database\"db.function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>getUser(const sessionid: string | undefinedsessionid)\n\t};\n}module \"$lib/server/database\"function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>cookies: Cookiesconst sessionid: string | undefinedcookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseuser: {\n    name: string;\n    avatar: string;\n}user: {\n    name: string;\n    avatar: string;\n}module \"$lib/server/database\"function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>const sessionid: string | undefined\n```\n\nExample:\n```text\nuser: {\n    name: string;\n    avatar: string;\n}\n```\n\nExample:\n```text\nfunction getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>\n```\n\nExample:\n```text\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\nimport type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';\n\nexport const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = async ({ cookies: CookiesGet or set cookies related to the current request\ncookies }) => {\n\tconst const sessionid: string | undefinedsessionid = cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid');\n\n\treturn {\n\t\tuser: {\n    name: string;\n    avatar: string;\n}user: await module \"$lib/server/database\"db.function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>getUser(const sessionid: string | undefinedsessionid)\n\t};\n};module \"$lib/server/database\"type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutServerLoadtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>cookies: Cookiesconst sessionid: string | undefinedcookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseuser: {\n    name: string;\n    avatar: string;\n}user: {\n    name: string;\n    avatar: string;\n}module \"$lib/server/database\"function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>function getUser(sessionid: string | undefined): Promise<{\n    name: string;\n    avatar: string;\n}>const sessionid: string | undefined\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, setHeaders: (headers: Record<string, string>) => voidIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\nsrc/routes/blog/+pageexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.\nYou cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.\nsetHeaders has no effect when a load function runs in the browser.\nsetHeaders }) {\n\tconst const url: \"https://cms.example.com/products.json\"url = `https://cms.example.com/products.json`;\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const url: \"https://cms.example.com/products.json\"url);\n\n\t// Headers are only set during SSR, caching the page's HTML\n\t// for the same length of time as the underlying data.\n\tsetHeaders: (headers: Record<string, string>) => voidIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\nsrc/routes/blog/+pageexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.\nYou cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.\nsetHeaders has no effect when a load function runs in the browser.\nsetHeaders({\n\t\tage: const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('age'),\n\t\t'cache-control': const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('cache-control')\n\t});\n\n\treturn const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson();\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeaderssetHeaders: (headers: Record<string, string>) => voidexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}loadset-cookiesetHeaderscookiesloadsetHeadersloadconst url: \"https://cms.example.com/products.json\"const response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const url: \"https://cms.example.com/products.json\"setHeaders: (headers: Record<string, string>) => voidexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}loadset-cookiesetHeaderscookiesloadsetHeadersloadconst response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | nullget()const response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | nullget()const response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, setHeaders: (headers: Record<string, string>) => voidIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\nsrc/routes/blog/+pageexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.\nYou cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.\nsetHeaders has no effect when a load function runs in the browser.\nsetHeaders }) => {\n\tconst const url: \"https://cms.example.com/products.json\"url = `https://cms.example.com/products.json`;\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const url: \"https://cms.example.com/products.json\"url);\n\n\t// Headers are only set during SSR, caching the page's HTML\n\t// for the same length of time as the underlying data.\n\tsetHeaders: (headers: Record<string, string>) => voidIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\nsrc/routes/blog/+pageexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.\nYou cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.\nsetHeaders has no effect when a load function runs in the browser.\nsetHeaders({\n\t\tage: const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('age'),\n\t\t'cache-control': const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | nullThe get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('cache-control')\n\t});\n\n\treturn const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson();\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeaderssetHeaders: (headers: Record<string, string>) => voidexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}loadset-cookiesetHeaderscookiesloadsetHeadersloadconst url: \"https://cms.example.com/products.json\"const response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const url: \"https://cms.example.com/products.json\"setHeaders: (headers: Record<string, string>) => voidexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}loadset-cookiesetHeaderscookiesloadsetHeadersloadconst response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | nullget()const response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | nullget()const response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\n/** @type {import('./$types').LayoutLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn { a: numbera: 1 };\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>a: number\n```\n\nExample:\n```text\nimport type { type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad } from './$types';\n\nexport const const load: LayoutLoadload: type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad = () => {\n\treturn { a: numbera: 1 };\n};type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutLoadtype LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>a: number\n```\n\nExample:\n```text\n/** @type {import('./$types').LayoutLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) {\n\tconst { const a: anya } = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\treturn { b: anyb: const a: anya + 1 };\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const a: anyparent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()b: anyconst a: any\n```\n\nExample:\n```text\nimport type { type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad } from './$types';\n\nexport const const load: LayoutLoadload: type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutLoad = async ({ parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) => {\n\tconst { const a: anya } = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\treturn { b: anyb: const a: anya + 1 };\n};type LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutLoadtype LayoutLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const a: anyparent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()b: anyconst a: any\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) {\n\tconst { const a: anya, const b: anyb } = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\treturn { c: anyc: const a: anya + const b: anyb };\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const a: anyconst b: anyparent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()c: anyconst a: anyconst b: any\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) => {\n\tconst { const a: anya, const b: anyb } = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\treturn { c: anyc: const a: anya + const b: anyb };\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const a: anyconst b: anyparent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()c: anyconst a: anyconst b: any\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<!-- renders `1 + 2 = 3` -->\n<p>{data.a} + {data.b} = {data.c}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n</script>\n\n<!-- renders `1 + 2 = 3` -->\n<p>{data.a} + {data.b} = {data.c}</p>\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams, parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) {\n\tconst parentData = await parent();\n\tconst const data: {\n    meta: any;\n}data = await function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>getData(params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams);\n\tconst const parentData: Record<string, any>parentData = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\n\treturn {\n\t\t...const data: {\n    meta: any;\n}data,\n\t\tmeta: anymeta: { ...const parentData: Record<string, any>parentData.meta, ...const data: {\n    meta: any;\n}data.meta: anymeta }\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>params: Record<string, any>/blog/[slug]{ slug: string }const parentData: Record<string, any>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}meta: anyconst parentData: Record<string, any>const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}meta: any\n```\n\nExample:\n```text\nconst data: {\n    meta: any;\n}\n```\n\nExample:\n```text\nfunction getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams, parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent }) => {\n\tconst parentData = await parent();\n\tconst const data: {\n    meta: any;\n}data = await function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>getData(params: Record<string, any>The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object\nparams);\n\tconst const parentData: Record<string, any>parentData = await parent: () => Promise<Record<string, any>>await parent() returns data from parent +layout.js load functions.\nImplicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.\nBe 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.\nparent();\n\n\treturn {\n\t\t...const data: {\n    meta: any;\n}data,\n\t\tmeta: anymeta: { ...const parentData: Record<string, any>parentData.meta, ...const data: {\n    meta: any;\n}data.meta: anymeta }\n\t};\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>function getData(params: Record<string, string>): Promise<{\n    meta: any;\n}>params: Record<string, any>/blog/[slug]{ slug: string }const parentData: Record<string, any>parent: () => Promise<Record<string, any>>await parent()+layout.jsload+layout.js({ data }) => data+layout.server.jsawait parent()const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}meta: anyconst parentData: Record<string, any>const data: {\n    meta: any;\n}const data: {\n    meta: any;\n}meta: any\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals }) {\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefineduser) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(401, 'not logged in');\n\t}\n\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}user.isAdmin: booleanisAdmin) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(403, 'not an admin');\n\t}\n}function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>locals: App.Localsserver handle hooklocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefinedApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefinedfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorlocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}isAdmin: booleanfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefined\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\nApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';\n\nexport const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = ({ locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals }) => {\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefineduser) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(401, 'not logged in');\n\t}\n\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}user.isAdmin: booleanisAdmin) {\n\t\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(403, 'not an admin');\n\t}\n};function error(status: number, body: App.Error): never (+1 overload)handleErrortype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutServerLoadtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>locals: App.Localsserver handle hooklocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefinedApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n} | undefinedfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorlocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}App.Locals.user?: {\n    name: string;\n    isAdmin: boolean;\n}isAdmin: booleanfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nimport { function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals }) {\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n} | undefineduser) {\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(307, '/login');\n\t}\n}function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectfunction load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>locals: App.Localsserver handle hooklocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n} | undefinedApp.Locals.user?: {\n    name: string;\n} | undefinedfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirect\n```\n\nExample:\n```text\nApp.Locals.user?: {\n    name: string;\n} | undefined\n```\n\nExample:\n```text\nimport { function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\nimport type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';\n\nexport const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = ({ locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals }) => {\n\tif (!locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: {\n    name: string;\n} | undefineduser) {\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(307, '/login');\n\t}\n};function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirecttype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutServerLoadtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>locals: App.Localsserver handle hooklocals: App.Localsserver handle hookApp.Locals.user?: {\n    name: string;\n} | undefinedApp.Locals.user?: {\n    name: string;\n} | undefinedfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirect\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\treturn {\n\t\t// make sure the `await` happens at the end, otherwise we\n\t\t// can't start loading comments until we've loaded the post\n\t\tcomments: Promise<{\n    content: string;\n}>comments: const loadComments: (slug: string) => Promise<{\n    content: string;\n}>loadComments(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug),\n\t\tpost: {\n    title: string;\n    content: string;\n}post: await const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>loadPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug)\n\t};\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }comments: Promise<{\n    content: string;\n}>comments: Promise<{\n    content: string;\n}>const loadComments: (slug: string) => Promise<{\n    content: string;\n}>const loadComments: (slug: string) => Promise<{\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\ncomments: Promise<{\n    content: string;\n}>\n```\n\nExample:\n```text\nconst loadComments: (slug: string) => Promise<{\n    content: string;\n}>\n```\n\nExample:\n```text\nconst loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>\n```\n\nExample:\n```text\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\treturn {\n\t\t// make sure the `await` happens at the end, otherwise we\n\t\t// can't start loading comments until we've loaded the post\n\t\tcomments: Promise<{\n    content: string;\n}>comments: const loadComments: (slug: string) => Promise<{\n    content: string;\n}>loadComments(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug),\n\t\tpost: {\n    title: string;\n    content: string;\n}post: await const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>loadPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug)\n\t};\n};type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }comments: Promise<{\n    content: string;\n}>comments: Promise<{\n    content: string;\n}>const loadComments: (slug: string) => Promise<{\n    content: string;\n}>const loadComments: (slug: string) => Promise<{\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }post: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>const loadPost: (slug: string) => Promise<{\n    title: string;\n    content: string;\n}>params: Record<string, any>/blog/[slug]{ slug: string }\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n\tLoading comments...\n{:then comments}\n\t{#each comments as comment}\n\t\t<p>{comment.content}</p>\n\t{/each}\n{:catch error}\n\t<p>error loading comments: {error.message}</p>\n{/await}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { PageProps } from './$types';\n\n\tlet { data }: PageProps = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n\tLoading comments...\n{:then comments}\n\t{#each comments as comment}\n\t\t<p>{comment.content}</p>\n\t{/each}\n{:catch error}\n\t<p>error loading comments: {error.message}</p>\n{/await}\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here.\nfetch }) {\n\tconst const ok_manual: Promise<never>ok_manual = var Promise: PromiseConstructorRepresents the completion of an asynchronous operation\nPromise.PromiseConstructor.reject<never>(reason?: any): Promise<never>Creates a new rejected promise for the provided reason.\n@paramreason The reason the promise was rejected.@returnsA new rejected Promise.reject();\n\tconst ok_manual: Promise<never>ok_manual.Promise<never>.catch<void>(onrejected?: ((reason: any) => void | PromiseLike<void>) | null | undefined): Promise<void>Attaches a callback for only the rejection of the Promise.\n@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of the callback.catch(() => {});\n\n\treturn {\n\t\tok_manual: Promise<never>ok_manual,\n\t\tok_fetch: Promise<Response>ok_fetch: fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/fetch/that/could/fail'),\n\t\tdangerous_unhandled: Promise<never>dangerous_unhandled: var Promise: PromiseConstructorRepresents the completion of an asynchronous operation\nPromise.PromiseConstructor.reject<never>(reason?: any): Promise<never>Creates a new rejected promise for the provided reason.\n@paramreason The reason the promise was rejected.@returnsA new rejected Promise.reject()\n\t};\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst ok_manual: Promise<never>var Promise: PromiseConstructorPromiseConstructor.reject<never>(reason?: any): Promise<never>const ok_manual: Promise<never>Promise<never>.catch<void>(onrejected?: ((reason: any) => void | PromiseLike<void>) | null | undefined): Promise<void>ok_manual: Promise<never>ok_fetch: Promise<Response>fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)dangerous_unhandled: Promise<never>var Promise: PromiseConstructorPromiseConstructor.reject<never>(reason?: any): Promise<never>\n```\n\nExample:\n```text\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here.\nfetch }) => {\n\tconst const ok_manual: Promise<never>ok_manual = var Promise: PromiseConstructorRepresents the completion of an asynchronous operation\nPromise.PromiseConstructor.reject<never>(reason?: any): Promise<never>Creates a new rejected promise for the provided reason.\n@paramreason The reason the promise was rejected.@returnsA new rejected Promise.reject();\n\tconst ok_manual: Promise<never>ok_manual.Promise<never>.catch<void>(onrejected?: ((reason: any) => void | PromiseLike<void>) | null | undefined): Promise<void>Attaches a callback for only the rejection of the Promise.\n@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of the callback.catch(() => {});\n\n\treturn {\n\t\tok_manual: Promise<never>ok_manual,\n\t\tok_fetch: Promise<Response>ok_fetch: fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('/fetch/that/could/fail'),\n\t\tdangerous_unhandled: Promise<never>dangerous_unhandled: var Promise: PromiseConstructorRepresents the completion of an asynchronous operation\nPromise.PromiseConstructor.reject<never>(reason?: any): Promise<never>Creates a new rejected promise for the provided reason.\n@paramreason The reason the promise was rejected.@returnsA new rejected Promise.reject()\n\t};\n};type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst ok_manual: Promise<never>var Promise: PromiseConstructorPromiseConstructor.reject<never>(reason?: any): Promise<never>const ok_manual: Promise<never>Promise<never>.catch<void>(onrejected?: ((reason: any) => void | PromiseLike<void>) | null | undefined): Promise<void>ok_manual: Promise<never>ok_fetch: Promise<Response>fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)dangerous_unhandled: Promise<never>var Promise: PromiseConstructorPromiseConstructor.reject<never>(reason?: any): Promise<never>\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ untrack: <T>(fn: () => T) => TUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\nsrc/routes/+page.serverexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}untrack, url: URLThe URL of the current page\nurl }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack: <boolean>(fn: () => boolean) => booleanUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\nsrc/routes/+page.serverexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}untrack(() => url: URLThe URL of the current page\nurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/')) {\n\t\treturn { message: stringmessage: 'Welcome!' };\n\t}\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>untrack: <T>(fn: () => T) => Texport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}url: URLuntrack: <boolean>(fn: () => boolean) => booleanexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}url: URLURL.pathname: stringpathnamemessage: string\n```\n\nExample:\n```text\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ untrack: <T>(fn: () => T) => TUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\nsrc/routes/+page.serverexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}untrack, url: URLThe URL of the current page\nurl }) => {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack: <boolean>(fn: () => boolean) => booleanUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\nsrc/routes/+page.serverexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}untrack(() => url: URLThe URL of the current page\nurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/')) {\n\t\treturn { message: stringmessage: 'Welcome!' };\n\t}\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>untrack: <T>(fn: () => T) => Texport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}url: URLuntrack: <boolean>(fn: () => boolean) => booleanexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}url: URLURL.pathname: stringpathnamemessage: string\n```\n\nExample:\n```text\n/** @type {import('./$types').PageLoad} */\nexport async function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, depends: (...deps: Array<`${string}:${string}`>) => voidThis function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.\nMost 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.\nURLs can be absolute or relative to the page being loaded, and must be encoded.\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.\nThe following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.\nsrc/routes/+pagelet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}src/routes/+page<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>depends }) {\n\t// load reruns when `invalidate('https://api.example.com/random-number')` is called...\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('https://api.example.com/random-number');\n\n\t// ...or when `invalidate('app:random')` is called\n\tdepends: (...deps: Array<`${string}:${string}`>) => voidThis function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.\nMost 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.\nURLs can be absolute or relative to the page being loaded, and must be encoded.\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.\nThe following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.\nsrc/routes/+pagelet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}src/routes/+page<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>depends('app:random');\n\n\treturn {\n\t\tnumber: anynumber: await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson()\n\t};\n}function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersdepends: (...deps: Array<`${string}:${string}`>) => voidloadinvalidate()loadfetchdependsfetchdependsinvalidateloadlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>const response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)depends: (...deps: Array<`${string}:${string}`>) => voidloadinvalidate()loadfetchdependsfetchdependsinvalidateloadlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>number: anyconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}\n```\n\nExample:\n```text\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\nExample:\n```text\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here\nfetch, depends: (...deps: Array<`${string}:${string}`>) => voidThis function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.\nMost 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.\nURLs can be absolute or relative to the page being loaded, and must be encoded.\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.\nThe following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.\nsrc/routes/+pagelet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}src/routes/+page<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>depends }) => {\n\t// load reruns when `invalidate('https://api.example.com/random-number')` is called...\n\tconst const response: Responseresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch('https://api.example.com/random-number');\n\n\t// ...or when `invalidate('app:random')` is called\n\tdepends: (...deps: Array<`${string}:${string}`>) => voidThis function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.\nMost 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.\nURLs can be absolute or relative to the page being loaded, and must be encoded.\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.\nThe following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.\nsrc/routes/+pagelet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}src/routes/+page<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>depends('app:random');\n\n\treturn {\n\t\tnumber: anynumber: await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson()\n\t};\n};type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersdepends: (...deps: Array<`${string}:${string}`>) => voidloadinvalidate()loadfetchdependsfetchdependsinvalidateloadlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>const response: Responsefetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)depends: (...deps: Array<`${string}:${string}`>) => voidloadinvalidate()loadfetchdependsfetchdependsinvalidateloadlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>number: anyconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\n<script>\n\timport { invalidate, invalidateAll } from '$app/navigation';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tfunction rerunLoadFunction() {\n\t\t// any of these will cause the `load` function to rerun\n\t\tinvalidate('app:random');\n\t\tinvalidate('https://api.example.com/random-number');\n\t\tinvalidate(url => url.href.includes('random-number'));\n\t\tinvalidateAll();\n\t}\n</script>\n\n<p>random number: {data.number}</p>\n<button onclick={rerunLoadFunction}>Update random number</button>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { invalidate, invalidateAll } from '$app/navigation';\n\timport type { PageProps } from './$types';\n\tlet { data }: PageProps = $props();\n\n\tfunction rerunLoadFunction() {\n\t\t// any of these will cause the `load` function to rerun\n\t\tinvalidate('app:random');\n\t\tinvalidate('https://api.example.com/random-number');\n\t\tinvalidate(url => url.href.includes('random-number'));\n\t\tinvalidateAll();\n\t}\n</script>\n\n<p>random number: {data.number}</p>\n<button onclick={rerunLoadFunction}>Update random number</button>\n```\n\nExample:\n```text\nimport { function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\nimport { function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent } from '$app/server';\n\nexport function function requireLogin(): UserrequireLogin() {\n\tconst { const locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals, const url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl } = function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent();\n\n\t// assume `locals.user` is populated in `handle`\n\tif (!const locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: User | undefineduser) {\n\t\tconst const redirectTo: stringredirectTo = const url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname + const url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.search: stringThe search property of the URL interface is a search string, also called a query string, that is a string containing a “?\" followed by the parameters of the URL. If the URL does not have a search query, this property contains an empty string, “\".\nMDN Reference\nsearch;\n\t\tconst const params: URLSearchParamsparams = new var URLSearchParams: new (init?: string[][] | Record<string, string> | string | URLSearchParams) => URLSearchParamsThe URLSearchParams interface defines utility methods to work with the query string of a URL.\nMDN Reference\nURLSearchParams class is a global reference for import { URLSearchParams } from 'node:url'\nhttps://nodejs.org/api/url.html#class-urlsearchparams\n@sincev10.0.0URLSearchParams({ redirectTo: stringredirectTo });\n\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(303, `/login?${const params: URLSearchParamsparams}`);\n\t}\n\n\treturn const locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user?: Useruser;\n}function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectfunction getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitfunction requireLogin(): Userconst locals: App.Localsserver handle hookconst url: URLfunction getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitconst locals: App.Localsserver handle hookApp.Locals.user?: User | undefinedconst redirectTo: stringconst url: URLURL.pathname: stringpathnameconst url: URLURL.search: stringsearchconst params: URLSearchParamsvar URLSearchParams: new (init?: string[][] | Record<string, string> | string | URLSearchParams) => URLSearchParamsURLSearchParamsURLSearchParamsimport { URLSearchParams } from 'node:url'redirectTo: stringfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectconst params: URLSearchParamsconst locals: App.Localsserver handle hookApp.Locals.user?: User\n```\n\nExample:\n```text\nimport { function requireLogin(): UserrequireLogin } from '$lib/server/auth';\n\nexport function function load(): {\n    message: string;\n}load() {\n\tconst const user: Useruser = function requireLogin(): UserrequireLogin();\n\n\t// `user` is guaranteed to be a user object here, because otherwise\n\t// `requireLogin` would throw a redirect and we wouldn't get here\n\treturn {\n\t\tmessage: stringmessage: `hello ${const user: Useruser.User.name: stringname}!`\n\t};\n}function requireLogin(): Userfunction load(): {\n    message: string;\n}function load(): {\n    message: string;\n}const user: Userfunction requireLogin(): Usermessage: stringconst user: UserUser.name: string\n```\n\nExample:\n```text\nfunction load(): {\n    message: string;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.251Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":84,"totalLines":2241,"estimatedTokens":31298}}163{"id":"doc-remote_functions_sveltekit_docs-45e22ec0","source":"documentation","title":"Remote functions • SvelteKit Docs","url":"https://svelte.dev/docs/kit/remote-functions","text":"Example:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\nexperimental: {\n\t\t\tremoteFunctions?: boolean | undefinedWhether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.\n@defaultfalseremoteFunctions: true\n\t\t}\n\t},\n\tSvelteConfig.compilerOptions?: Omit<CompileOptions, \"filename\" | \"format\" | \"generate\"> | undefinedThe options to be passed to the Svelte compiler. A few options are set by default,\nincluding dev and css. However, some options are non-configurable, like\nfilename, format, generate, and cssHash (in dev).\n@seehttps://svelte.dev/docs/svelte/svelte-compiler#CompileOptionscompilerOptions: {\n\t\texperimental?: {\n    async?: boolean;\n} | undefinedExperimental options\n@since5.36experimental: {\n\t\t\tasync?: boolean | undefinedAllow await keyword in deriveds, template expressions, and the top level of components\n@since5.36async: true\n\t\t}\n\t}\n};\n\nexport default const config: Configconfig;const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedremoteFunctions?: boolean | undefinedSvelteConfig.compilerOptions?: Omit<CompileOptions, \"filename\" | \"format\" | \"generate\"> | undefineddevcssfilenameformatgeneratecssHashexperimental?: {\n    async?: boolean;\n} | undefinedexperimental?: {\n    async?: boolean;\n} | undefinedasync?: boolean | undefinedawaitconst config: Config\n```\n\nExample:\n```text\nKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefined\n```\n\nExample:\n```text\nexperimental?: {\n    async?: boolean;\n} | undefined\n```\n\nExample:\n```text\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getPosts: RemoteQueryFunction<void, any[]>getPosts = query<any[]>(fn: () => MaybePromise<any[]>): RemoteQueryFunction<void, any[]> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => {\n\tconst const posts: any[]posts = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn const posts: any[]posts;\n});function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getPosts: RemoteQueryFunction<void, any[]>query<any[]>(fn: () => MaybePromise<any[]>): RemoteQueryFunction<void, any[]> (+2 overloads)fetchconst posts: any[]module \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>const posts: any[]\n```\n\nExample:\n```text\n<script>\n\timport { getPosts } from './data.remote';\n</script>\n\n<h1>Recent posts</h1>\n\n<ul>\n\t{#each await getPosts() as { title, slug }}\n\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getPosts } from './data.remote';\n</script>\n\n<h1>Recent posts</h1>\n\n<ul>\n\t{#each await getPosts() as { title, slug }}\n\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t{/each}\n</ul>\n```\n\nExample:\n```text\n<script>\n\timport { getPosts } from './data.remote';\n\n\tconst query = getPosts();\n</script>\n\n<h1>Recent posts</h1>\n\n{#if query.error}\n\t<p>oops!</p>\n{:else if query.loading}\n\t<p>loading...</p>\n{:else}\n\t<ul>\n\t\t{#each query.current as { title, slug }}\n\t\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t\t{/each}\n\t</ul>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getPosts } from './data.remote';\n\n\tconst query = getPosts();\n</script>\n\n<h1>Recent posts</h1>\n\n{#if query.error}\n\t<p>oops!</p>\n{:else if query.loading}\n\t<p>loading...</p>\n{:else}\n\t<ul>\n\t\t{#each query.current as { title, slug }}\n\t\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t\t{/each}\n\t</ul>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { getPost } from '../data.remote';\n\n\tlet { params } = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getPost } from '../data.remote';\n\n\tlet { params } = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => { /* ... */ });\n\nexport const const getPost: RemoteQueryFunction<string, any, string>getPost = query<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any): RemoteQueryFunction<string, any, string> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (slug: stringslug) => {\n\tconst [const post: anypost] = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug: stringslug}\n\t`;\n\n\tif (!const post: anypost) function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n\treturn const post: anypost;\n});import vfunction error(status: number, body: App.Error): never (+1 overload)handleErrorfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getPosts: RemoteQueryFunction<void, void>query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)fetchconst getPost: RemoteQueryFunction<string, any, string>query<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any): RemoteQueryFunction<string, any, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringconst post: anymodule \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>slug: stringconst post: anyfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorconst post: any\n```\n\nExample:\n```text\nfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\n<script>\n\timport { getData } from './data.remote.js';\n\n  // awaited inside the component template — populates the cache\n  const data = getData();\n</script>\n\n<p>{await data}</p>\n\n<!-- this dedupes with the component-level use above; no extra request -->\n<button onclick={async () => console.log(await getData())}>\n\tclick me!\n</button>\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getWeather: RemoteQueryFunction<string, any, string>getWeather = function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery.function query.batch<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (args: string[]) => MaybePromise<(arg: string, idx: number) => any>): RemoteQueryFunction<string, any, string> (+1 overload)Creates a batch query function that collects multiple calls and executes them in a single request\nSee Remote functions for full documentation.\n@since2.35batch(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (cityIds: string[]cityIds) => {\n\tconst const weather: any[]weather = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT * FROM weather\n\t\tWHERE city_id = ANY(${cityIds: string[]cityIds})\n\t`;\n\tconst const lookup: Map<any, any>lookup = new var Map: MapConstructor\nnew <any, any>(iterable?: Iterable<readonly [any, any]> | null | undefined) => Map<any, any> (+3 overloads)Map(const weather: any[]weather.Array<any>.map<[any, any]>(callbackfn: (value: any, index: number, array: any[]) => [any, any], thisArg?: any): [any, any][]Calls a defined callback function on each element of an array, and returns an array that contains the results.\n@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(w: anyw => [w: anyw.city_id, w: anyw]));\n\n\treturn (cityId: stringcityId) => const lookup: Map<any, any>lookup.Map<any, any>.get(key: any): anyReturns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.\n@returnsReturns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.get(cityId: stringcityId);\n});import vfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getWeather: RemoteQueryFunction<string, any, string>function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction query.batch<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (args: string[]) => MaybePromise<(arg: string, idx: number) => any>): RemoteQueryFunction<string, any, string> (+1 overload)import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringcityIds: string[]const weather: any[]module \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>cityIds: string[]const lookup: Map<any, any>var Map: MapConstructor\nnew <any, any>(iterable?: Iterable<readonly [any, any]> | null | undefined) => Map<any, any> (+3 overloads)var Map: MapConstructor\nnew <any, any>(iterable?: Iterable<readonly [any, any]> | null | undefined) => Map<any, any> (+3 overloads)const weather: any[]Array<any>.map<[any, any]>(callbackfn: (value: any, index: number, array: any[]) => [any, any], thisArg?: any): [any, any][]w: anyw: anyw: anycityId: stringconst lookup: Map<any, any>Map<any, any>.get(key: any): anycityId: string\n```\n\nExample:\n```text\nvar Map: MapConstructor\nnew <any, any>(iterable?: Iterable<readonly [any, any]> | null | undefined) => Map<any, any> (+3 overloads)\n```\n\nExample:\n```text\n<script>\n\timport CityWeather from './CityWeather.svelte';\n\timport { getWeather } from './weather.remote';\n\n\tlet { cities } = $props();\n\tlet limit = $state(5);\n</script>\n\n<h2>Weather</h2>\n\n{#each cities.slice(0, limit) as city}\n\t<h3>{city.name}</h3>\n\t<CityWeather weather={await getWeather(city.id)} />\n{/each}\n\n{#if cities.length > limit}\n\t<button onclick={() => limit += 5}>\n\t\tLoad more\n\t</button>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport CityWeather from './CityWeather.svelte';\n\timport { getWeather } from './weather.remote';\n\n\tlet { cities } = $props();\n\tlet limit = $state(5);\n</script>\n\n<h2>Weather</h2>\n\n{#each cities.slice(0, limit) as city}\n\t<h3>{city.name}</h3>\n\t<CityWeather weather={await getWeather(city.id)} />\n{/each}\n\n{#if cities.length > limit}\n\t<button onclick={() => limit += 5}>\n\t\tLoad more\n\t</button>\n{/if}\n```\n\nExample:\n```text\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\n\nexport const const getTime: RemoteLiveQueryFunction<void, Date>getTime = function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery.function query.live<Date>(fn: (arg: void) => RemoteLiveQueryUserFunctionReturnType<Date>): RemoteLiveQueryFunction<void, Date> (+2 overloads)Creates a live remote query. When called from the browser, the function will be invoked on the server via a streaming fetch call.\nSee Remote functions for full documentation.\nlive(async function* () {\n\twhile (true) {\n\t\tyield new var Date: DateConstructor\nnew () => Date (+4 overloads)Date();\n\t\tawait new var Promise: PromiseConstructor\nnew <unknown>(executor: (resolve: (value: unknown) => void, reject: (reason?: any) => void) => void) => Promise<unknown>Creates a new Promise.\n@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:\na resolve callback used to resolve the promise with a value or the result of another promise,\nand a reject callback used to reject the promise with a provided reason or error.Promise((f: (value: unknown) => voidf) => function setTimeout(callback: (_: void) => void, delay?: number): NodeJS.Timeout (+2 overloads)MDN Reference\nsetTimeout(f: (value: unknown) => voidf, 1000));\n\t}\n});function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchconst getTime: RemoteLiveQueryFunction<void, Date>function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction query.live<Date>(fn: (arg: void) => RemoteLiveQueryUserFunctionReturnType<Date>): RemoteLiveQueryFunction<void, Date> (+2 overloads)fetchvar Date: DateConstructor\nnew () => Date (+4 overloads)var Date: DateConstructor\nnew () => Date (+4 overloads)var Promise: PromiseConstructor\nnew <unknown>(executor: (resolve: (value: unknown) => void, reject: (reason?: any) => void) => void) => Promise<unknown>var Promise: PromiseConstructor\nnew <unknown>(executor: (resolve: (value: unknown) => void, reject: (reason?: any) => void) => void) => Promise<unknown>f: (value: unknown) => voidfunction setTimeout(callback: (_: void) => void, delay?: number): NodeJS.Timeout (+2 overloads)f: (value: unknown) => void\n```\n\nExample:\n```text\nvar Date: DateConstructor\nnew () => Date (+4 overloads)\n```\n\nExample:\n```text\nvar Promise: PromiseConstructor\nnew <unknown>(executor: (resolve: (value: unknown) => void, reject: (reason?: any) => void) => void) => Promise<unknown>\n```\n\nExample:\n```text\n<script>\n\timport { getTime } from './time.remote.js';\n\n\tconst time = getTime();\n</script>\n\n<p>{await time}</p>\n<p>connected: {time.connected}</p>\n<button onclick={() => time.reconnect()}>Reconnect</button>\n```\n\nExample:\n```text\nasync function function logTimes(): Promise<void>logTimes() {\n\tfor await (const const value: Datevalue of function getTime(arg: void | undefined): RemoteLiveQuery<Date>getTime()) {\n\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(const value: Datevalue);\n\t\tif (someCondition) break;\n\t}\n}function logTimes(): Promise<void>const value: Datefunction getTime(arg: void | undefined): RemoteLiveQuery<Date>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const value: Date\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect } from '@sveltejs/kit';\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery, function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\nimport * as module \"$lib/server/auth\"auth from '$lib/server/auth';\n\nexport const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => { /* ... */ });\n\nexport const const getPost: RemoteQueryFunction<string, void, string>getPost = query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (slug: stringslug) => { /* ... */ });\n\nexport const const createPost: RemoteForm<{\n    title: string;\n    content: string;\n}, never>createPost = form<v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, never>(validate: v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}>(entries: {\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}): v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\t\ttitle: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>title: import vv.pipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipeAdds a pipeline to a schema, that can validate and transform its input.\n@paramschema The root schema.@paramitem1 The first pipe item.@returnsA schema with a pipeline.pipe(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), import vv.nonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptyCreates a non-empty validation action.\n@returnsA non-empty action.nonEmpty()),\n\t\tcontent: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>content:import vv.pipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipeAdds a pipeline to a schema, that can validate and transform its input.\n@paramschema The root schema.@paramitem1 The first pipe item.@returnsA schema with a pipeline.pipe(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), import vv.nonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptyCreates a non-empty validation action.\n@returnsA non-empty action.nonEmpty())\n\t}),\n\tasync ({ title: stringtitle, content: stringcontent }) => {\n\t\t// Check the user is logged in\n\t\tconst const user: auth.User | nulluser = await module \"$lib/server/auth\"auth.function getUser(): Promise<auth.User | null>Gets a user’s info from their cookies, using getRequestEvent\ngetUser();\n\t\tif (!const user: auth.User | nulluser) function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(401, 'Unauthorized');\n\n\t\tconst const slug: stringslug = title: stringtitle.String.toLowerCase(): stringConverts all the alphabetic characters in a string to lowercase.\ntoLowerCase().String.replace(searchValue: {\n    [Symbol.replace](string: string, replaceValue: string): string;\n}, replaceValue: string): string (+3 overloads)Passes a string and \n{@linkcode \nreplaceValue\n}\n to the [Symbol.replace] method on \n{@linkcode \nsearchValue\n}\n. This method is expected to implement its own replacement algorithm.\n@paramsearchValue An object that supports searching for and replacing matches within a string.@paramreplaceValue The replacement text.replace(/ /g, '-');\n\n\t\t// Insert into the database\n\t\tawait module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\t\tINSERT INTO post (slug, title, content)\n\t\t\tVALUES (${const slug: stringslug}, ${title: stringtitle}, ${content: stringcontent})\n\t\t`;\n\n\t\t// Redirect to the newly created page\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(303, `/blog/${const slug: stringslug}`);\n\t}\n);import vfunction error(status: number, body: App.Error): never (+1 overload)handleErrorfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>module \"$lib/server/database\"module \"$lib/server/auth\"const getPosts: RemoteQueryFunction<void, void>query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)fetchconst getPost: RemoteQueryFunction<string, void, string>query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringconst createPost: RemoteForm<{\n    title: string;\n    content: string;\n}, never>const createPost: RemoteForm<{\n    title: string;\n    content: string;\n}, never>form<v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, never>(validate: v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, never>(validate: v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<...>): RemoteForm<...> (+2 overloads)<form>import vobject<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}>(entries: {\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}): v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}>(entries: {\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}): v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithResttitle: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>import vpipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipepipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipeimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringimport vnonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptynonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptycontent: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>import vpipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipepipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipeimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringimport vnonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptynonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmptytitle: stringcontent: stringconst user: auth.User | nullmodule \"$lib/server/auth\"function getUser(): Promise<auth.User | null>getRequestEventconst user: auth.User | nullfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorconst slug: stringtitle: stringString.toLowerCase(): stringString.replace(searchValue: {\n    [Symbol.replace](string: string, replaceValue: string): string;\n}, replaceValue: string): string (+3 overloads)String.replace(searchValue: {\n    [Symbol.replace](string: string, replaceValue: string): string;\n}, replaceValue: string): string (+3 overloads)[Symbol.replace]module \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>const slug: stringtitle: stringcontent: stringfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectconst slug: string\n```\n\nExample:\n```text\nconst createPost: RemoteForm<{\n    title: string;\n    content: string;\n}, never>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, never>(validate: v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}>(entries: {\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}): v.ObjectSchema<{\n    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\npipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]> (+20 overloads)\nexport pipe\n```\n\nExample:\n```text\nnonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)\nexport nonEmpty\n```\n\nExample:\n```text\nString.replace(searchValue: {\n    [Symbol.replace](string: string, replaceValue: string): string;\n}, replaceValue: string): string (+3 overloads)\n```\n\nExample:\n```text\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- form content goes here -->\n\n\t<button>Publish!</button>\n</form>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- form content goes here -->\n\n\t<button>Publish!</button>\n</form>\n```\n\nExample:\n```text\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\t\t<input {...createPost.fields.title.as('text')} />\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\t\t<textarea {...createPost.fields.content.as('text')}></textarea>\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nExample:\n```text\nconst const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>datingProfile = import vv.object<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}): v.ObjectSchema<...> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\tname: v.StringSchema<undefined>name: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(),\n\tphoto: v.FileSchema<undefined>photo: import vv.function file(): v.FileSchema<undefined> (+1 overload)\nexport fileCreates a file schema.\n@returnsA file schema.file(),\n\tinfo: v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined>info: import vv.object<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}>(entries: {\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}): v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\t\theight: v.NumberSchema<undefined>height: import vv.function number(): v.NumberSchema<undefined> (+1 overload)\nexport numberCreates a number schema.\n@returnsA number schema.number(),\n\t\tlikesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>likesDogs: import vv.optional<v.BooleanSchema<undefined>, false>(wrapped: v.BooleanSchema<undefined>, default_: false): v.OptionalSchema<v.BooleanSchema<undefined>, false> (+1 overload)\nexport optionalCreates an optional schema.\n@paramwrapped The wrapped schema.@paramdefault_ The default value.@returnsAn optional schema.optional(import vv.function boolean(): v.BooleanSchema<undefined> (+1 overload)\nexport booleanCreates a boolean schema.\n@returnsA boolean schema.boolean(), false)\n\t}),\n\tattributes: v.ArraySchema<v.StringSchema<undefined>, undefined>attributes: import vv.array<v.StringSchema<undefined>>(item: v.StringSchema<undefined>): v.ArraySchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport arrayCreates an array schema.\n@paramitem The item schema.@returnsAn array schema.array(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string())\n});\n\nexport const const createProfile: RemoteForm<{\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs?: boolean | undefined;\n    };\n    attributes: string[];\n}, void>createProfile = form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>datingProfile, (data: {\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs: boolean;\n    };\n    attributes: string[];\n}data) => { /* ... */ });const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>import vobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}): v.ObjectSchema<...> (+1 overload)\nexport objectobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}): v.ObjectSchema<...> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestname: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringphoto: v.FileSchema<undefined>import vfunction file(): v.FileSchema<undefined> (+1 overload)\nexport filefunction file(): v.FileSchema<undefined> (+1 overload)\nexport fileinfo: v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined>info: v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined>import vobject<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}>(entries: {\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}): v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}>(entries: {\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}): v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestheight: v.NumberSchema<undefined>import vfunction number(): v.NumberSchema<undefined> (+1 overload)\nexport numberfunction number(): v.NumberSchema<undefined> (+1 overload)\nexport numberlikesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>import voptional<v.BooleanSchema<undefined>, false>(wrapped: v.BooleanSchema<undefined>, default_: false): v.OptionalSchema<v.BooleanSchema<undefined>, false> (+1 overload)\nexport optionaloptional<v.BooleanSchema<undefined>, false>(wrapped: v.BooleanSchema<undefined>, default_: false): v.OptionalSchema<v.BooleanSchema<undefined>, false> (+1 overload)\nexport optionalimport vfunction boolean(): v.BooleanSchema<undefined> (+1 overload)\nexport booleanfunction boolean(): v.BooleanSchema<undefined> (+1 overload)\nexport booleanattributes: v.ArraySchema<v.StringSchema<undefined>, undefined>import varray<v.StringSchema<undefined>>(item: v.StringSchema<undefined>): v.ArraySchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport arrayarray<v.StringSchema<undefined>>(item: v.StringSchema<undefined>): v.ArraySchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport arrayimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringconst createProfile: RemoteForm<{\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs?: boolean | undefined;\n    };\n    attributes: string[];\n}, void>const createProfile: RemoteForm<{\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs?: boolean | undefined;\n    };\n    attributes: string[];\n}, void>form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)<form>const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>const datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>data: {\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs: boolean;\n    };\n    attributes: string[];\n}data: {\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs: boolean;\n    };\n    attributes: string[];\n}\n```\n\nExample:\n```text\nconst datingProfile: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>\n```\n\nExample:\n```text\nobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}): v.ObjectSchema<...> (+1 overload)\nexport object\n```\n\nExample:\n```text\nfunction file(): v.FileSchema<undefined> (+1 overload)\nexport file\n```\n\nExample:\n```text\ninfo: v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined>\n```\n\nExample:\n```text\nobject<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}>(entries: {\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}): v.ObjectSchema<{\n    readonly height: v.NumberSchema<undefined>;\n    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\nfunction number(): v.NumberSchema<undefined> (+1 overload)\nexport number\n```\n\nExample:\n```text\noptional<v.BooleanSchema<undefined>, false>(wrapped: v.BooleanSchema<undefined>, default_: false): v.OptionalSchema<v.BooleanSchema<undefined>, false> (+1 overload)\nexport optional\n```\n\nExample:\n```text\nfunction boolean(): v.BooleanSchema<undefined> (+1 overload)\nexport boolean\n```\n\nExample:\n```text\narray<v.StringSchema<undefined>>(item: v.StringSchema<undefined>): v.ArraySchema<v.StringSchema<undefined>, undefined> (+1 overload)\nexport array\n```\n\nExample:\n```text\nconst createProfile: RemoteForm<{\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs?: boolean | undefined;\n    };\n    attributes: string[];\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly photo: v.FileSchema<undefined>;\n    readonly info: v.ObjectSchema<{\n        readonly height: v.NumberSchema<undefined>;\n        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;\n    }, undefined>;\n    readonly attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\ndata: {\n    name: string;\n    photo: File;\n    info: {\n        height: number;\n        likesDogs: boolean;\n    };\n    attributes: string[];\n}\n```\n\nExample:\n```text\n<script>\n\timport { createProfile } from './data.remote';\n\n\tconst { name, photo, info, attributes } = createProfile.fields;\n</script>\n\n<form {...createProfile} enctype=\"multipart/form-data\">\n\t<label>\n\t\t<input {...name.as('text')} /> Name\n\t</label>\n\n\t<label>\n\t\t<input {...photo.as('file')} /> Photo\n\t</label>\n\n\t<label>\n\t\t<input {...info.height.as('number')} /> Height (cm)\n\t</label>\n\n\t<label>\n\t\t<input {...info.likesDogs.as('checkbox')} /> I like dogs\n\t</label>\n\n\t<h2>My best attributes</h2>\n\t<input {...attributes[0].as('text')} />\n\t<input {...attributes[1].as('text')} />\n\t<input {...attributes[2].as('text')} />\n\n\t<button>submit</button>\n</form>\n```\n\nExample:\n```text\nexport const const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]operatingSystems = /** @type {const} */ (['windows', 'mac', 'linux']);\nexport const const languages: readonly [\"html\", \"css\", \"js\"]languages = /** @type {const} */ (['html', 'css', 'js']);const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]const languages: readonly [\"html\", \"css\", \"js\"]\n```\n\nExample:\n```text\nexport const const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]operatingSystems = ['windows', 'mac', 'linux'] as type const = readonly [\"windows\", \"mac\", \"linux\"]const;\nexport const const languages: readonly [\"html\", \"css\", \"js\"]languages = ['html', 'css', 'js'] as type const = readonly [\"html\", \"css\", \"js\"]const;const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]type const = readonly [\"windows\", \"mac\", \"linux\"]const languages: readonly [\"html\", \"css\", \"js\"]type const = readonly [\"html\", \"css\", \"js\"]\n```\n\nExample:\n```text\nimport { const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]operatingSystems, const languages: readonly [\"html\", \"css\", \"js\"]languages } from './constants';\n\nexport const const survey: RemoteForm<{\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages?: (\"html\" | \"css\" | \"js\")[] | undefined;\n}, void>survey = form<v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}>(entries: {\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}): v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\t\toperatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>operatingSystem: import vv.picklist<readonly [\"windows\", \"mac\", \"linux\"]>(options: readonly [\"windows\", \"mac\", \"linux\"]): v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined> (+1 overload)\nexport picklistCreates a picklist schema.\n@paramoptions The picklist options.@returnsA picklist schema.picklist(const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]operatingSystems),\n\t\tlanguages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>languages: import vv.optional<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>(wrapped: v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, default_: readonly []): v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []> (+1 overload)\nexport optionalCreates an optional schema.\n@paramwrapped The wrapped schema.@paramdefault_ The default value.@returnsAn optional schema.optional(import vv.array<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>>(item: v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>): v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined> (+1 overload)\nexport arrayCreates an array schema.\n@paramitem The item schema.@returnsAn array schema.array(import vv.picklist<readonly [\"html\", \"css\", \"js\"]>(options: readonly [\"html\", \"css\", \"js\"]): v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined> (+1 overload)\nexport picklistCreates a picklist schema.\n@paramoptions The picklist options.@returnsA picklist schema.picklist(const languages: readonly [\"html\", \"css\", \"js\"]languages)), []),\n\t}),\n\t(data: {\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages: (\"html\" | \"css\" | \"js\")[];\n}data) => { /* ... */ },\n);const operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]const languages: readonly [\"html\", \"css\", \"js\"]const survey: RemoteForm<{\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages?: (\"html\" | \"css\" | \"js\")[] | undefined;\n}, void>const survey: RemoteForm<{\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages?: (\"html\" | \"css\" | \"js\")[] | undefined;\n}, void>form<v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)<form>import vobject<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}>(entries: {\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}): v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}>(entries: {\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}): v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestoperatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>import vpicklist<readonly [\"windows\", \"mac\", \"linux\"]>(options: readonly [\"windows\", \"mac\", \"linux\"]): v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined> (+1 overload)\nexport picklistpicklist<readonly [\"windows\", \"mac\", \"linux\"]>(options: readonly [\"windows\", \"mac\", \"linux\"]): v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined> (+1 overload)\nexport picklistconst operatingSystems: readonly [\"windows\", \"mac\", \"linux\"]languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>import voptional<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>(wrapped: v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, default_: readonly []): v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []> (+1 overload)\nexport optionaloptional<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>(wrapped: v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, default_: readonly []): v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []> (+1 overload)\nexport optionalimport varray<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>>(item: v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>): v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined> (+1 overload)\nexport arrayarray<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>>(item: v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>): v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined> (+1 overload)\nexport arrayimport vpicklist<readonly [\"html\", \"css\", \"js\"]>(options: readonly [\"html\", \"css\", \"js\"]): v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined> (+1 overload)\nexport picklistpicklist<readonly [\"html\", \"css\", \"js\"]>(options: readonly [\"html\", \"css\", \"js\"]): v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined> (+1 overload)\nexport picklistconst languages: readonly [\"html\", \"css\", \"js\"]data: {\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages: (\"html\" | \"css\" | \"js\")[];\n}data: {\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages: (\"html\" | \"css\" | \"js\")[];\n}\n```\n\nExample:\n```text\nconst survey: RemoteForm<{\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages?: (\"html\" | \"css\" | \"js\")[] | undefined;\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined>, fn: (data: {\n    ...;\n}, issue: {\n    ...;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}>(entries: {\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}): v.ObjectSchema<{\n    readonly operatingSystem: v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined>;\n    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\npicklist<readonly [\"windows\", \"mac\", \"linux\"]>(options: readonly [\"windows\", \"mac\", \"linux\"]): v.PicklistSchema<readonly [\"windows\", \"mac\", \"linux\"], undefined> (+1 overload)\nexport picklist\n```\n\nExample:\n```text\noptional<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []>(wrapped: v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, default_: readonly []): v.OptionalSchema<v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined>, readonly []> (+1 overload)\nexport optional\n```\n\nExample:\n```text\narray<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>>(item: v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>): v.ArraySchema<v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined>, undefined> (+1 overload)\nexport array\n```\n\nExample:\n```text\npicklist<readonly [\"html\", \"css\", \"js\"]>(options: readonly [\"html\", \"css\", \"js\"]): v.PicklistSchema<readonly [\"html\", \"css\", \"js\"], undefined> (+1 overload)\nexport picklist\n```\n\nExample:\n```text\ndata: {\n    operatingSystem: \"windows\" | \"mac\" | \"linux\";\n    languages: (\"html\" | \"css\" | \"js\")[];\n}\n```\n\nExample:\n```text\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t{#each operatingSystems as os}\n\t\t<label>\n\t\t\t<input {...survey.fields.operatingSystem.as('radio', os)}>\n\t\t\t{os}\n\t\t</label>\n\t{/each}\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t{#each languages as language}\n\t\t<label>\n\t\t\t<input {...survey.fields.languages.as('checkbox', language)}>\n\t\t\t{language}\n\t\t</label>\n\t{/each}\n\n\t<button>submit</button>\n</form>\n```\n\nExample:\n```text\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t<select {...survey.fields.operatingSystem.as('select')}>\n\t\t{#each operatingSystems as os}\n\t\t\t<option>{os}</option>\n\t\t{/each}\n\t</select>\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t<select {...survey.fields.languages.as('select multiple')}>\n\t\t{#each languages as language}\n\t\t\t<option>{language}</option>\n\t\t{/each}\n\t</select>\n\n\t<button>submit</button>\n</form>\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverUse this to throw a validation error to imperatively fail form validation.\nCan be used in combination with issue passed to form actions to create field-specific issues.\n@exampleimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);@since2.47.3referenceinvalid } from '@sveltejs/kit';\nimport { function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const buyHotcakes: RemoteForm<{\n    qty: number;\n}, void>buyHotcakes = form<v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, fn: (data: {\n    qty: number;\n}, issue: {\n    qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}>(entries: {\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}): v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\t\tqty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>qty: import vv.pipe<v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">>(schema: v.NumberSchema<undefined>, item1: v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> | v.PipeAction<number, number, v.MinValueIssue<number, 1>>): v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]> (+20 overloads)\nexport pipeAdds a pipeline to a schema, that can validate and transform its input.\n@paramschema The root schema.@paramitem1 The first pipe item.@returnsA schema with a pipeline.pipe(\n\t\t\timport vv.function number(): v.NumberSchema<undefined> (+1 overload)\nexport numberCreates a number schema.\n@returnsA number schema.number(),\n\t\t\timport vv.minValue<number, 1, \"you must buy at least one hotcake\">(requirement: 1, message: \"you must buy at least one hotcake\"): v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> (+1 overload)\nexport minValueCreates a min value validation action.\n@paramrequirement The minimum value.@parammessage The error message.@returnsA min value action.minValue(1, 'you must buy at least one hotcake')\n\t\t)\n\t}),\n\tasync (data: {\n    qty: number;\n}data, issue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)issue) => {\n\t\ttry {\n\t\t\tawait module \"$lib/server/database\"db.function buy(qty: number): Promise<void>buy(data: {\n    qty: number;\n}data.qty: numberqty);\n\t\t} catch (function (local var) e: unknowne) {\n\t\t\tif (e.code === 'OUT_OF_STOCK') {\n\t\t\t\tfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverUse this to throw a validation error to imperatively fail form validation.\nCan be used in combination with issue passed to form actions to create field-specific issues.\n@exampleimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);@since2.47.3referenceinvalid(\n\t\t\t\t\tissue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)issue.qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issueqty(`we don't have enough hotcakes`)\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n);import vfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverissueimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>module \"$lib/server/database\"const buyHotcakes: RemoteForm<{\n    qty: number;\n}, void>const buyHotcakes: RemoteForm<{\n    qty: number;\n}, void>form<v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, fn: (data: {\n    qty: number;\n}, issue: {\n    qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, fn: (data: {\n    qty: number;\n}, issue: {\n    qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)<form>import vobject<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}>(entries: {\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}): v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}>(entries: {\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}): v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestqty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>import vpipe<v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">>(schema: v.NumberSchema<undefined>, item1: v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> | v.PipeAction<number, number, v.MinValueIssue<number, 1>>): v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]> (+20 overloads)\nexport pipepipe<v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">>(schema: v.NumberSchema<undefined>, item1: v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> | v.PipeAction<number, number, v.MinValueIssue<number, 1>>): v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]> (+20 overloads)\nexport pipeimport vfunction number(): v.NumberSchema<undefined> (+1 overload)\nexport numberfunction number(): v.NumberSchema<undefined> (+1 overload)\nexport numberimport vminValue<number, 1, \"you must buy at least one hotcake\">(requirement: 1, message: \"you must buy at least one hotcake\"): v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> (+1 overload)\nexport minValueminValue<number, 1, \"you must buy at least one hotcake\">(requirement: 1, message: \"you must buy at least one hotcake\"): v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> (+1 overload)\nexport minValuedata: {\n    qty: number;\n}data: {\n    qty: number;\n}issue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)issue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)module \"$lib/server/database\"function buy(qty: number): Promise<void>data: {\n    qty: number;\n}data: {\n    qty: number;\n}qty: numberfunction (local var) e: unknownfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverissueimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);issue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)issue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue\n```\n\nExample:\n```text\nimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);\n```\n\nExample:\n```text\nconst buyHotcakes: RemoteForm<{\n    qty: number;\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined>, fn: (data: {\n    qty: number;\n}, issue: {\n    qty: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}>(entries: {\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}): v.ObjectSchema<{\n    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\npipe<v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">>(schema: v.NumberSchema<undefined>, item1: v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> | v.PipeAction<number, number, v.MinValueIssue<number, 1>>): v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, \"you must buy at least one hotcake\">]> (+20 overloads)\nexport pipe\n```\n\nExample:\n```text\nminValue<number, 1, \"you must buy at least one hotcake\">(requirement: 1, message: \"you must buy at least one hotcake\"): v.MinValueAction<number, 1, \"you must buy at least one hotcake\"> (+1 overload)\nexport minValue\n```\n\nExample:\n```text\ndata: {\n    qty: number;\n}\n```\n\nExample:\n```text\nissue: {\n    qty: (message: string) => StandardSchemaV1.Issue;\n} & ((message: string) => StandardSchemaV1.Issue)\n```\n\nExample:\n```text\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\n\t\t{#each createPost.fields.title.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}\n\n\t\t<input {...createPost.fields.title.as('text')} />\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\n\t\t{#each createPost.fields.content.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}\n\n\t\t<textarea {...createPost.fields.content.as('text')}></textarea>\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nExample:\n```text\n<form {...createPost} oninput={() => createPost.validate()}>\n\t<!-- -->\n</form>\n```\n\nExample:\n```text\n<script>\n\timport * as v from 'valibot';\n\timport { createPost } from '../data.remote';\n\n\tconst schema = v.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent: v.pipe(v.string(), v.nonEmpty())\n\t});\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost.preflight(schema)}>\n\t<!-- -->\n</form>\n```\n\nExample:\n```text\n{#each createPost.fields.allIssues() as issue}\n\t<p>{issue.message}</p>\n{/each}\n```\n\nExample:\n```text\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n<div class=\"preview\">\n\t<h2>{createPost.fields.title.value()}</h2>\n\t<div>{@html render(createPost.fields.content.value())}</div>\n</div>\n```\n\nExample:\n```text\n<script>\n\timport { createPost } from '../data.remote';\n\n\t// this...\n\tcreatePost.fields.set({\n\t\ttitle: 'My new blog post',\n\t\tcontent: 'Lorem ipsum dolor sit amet...'\n\t});\n\n\t// ...is equivalent to this:\n\tcreatePost.fields.title.set('My new blog post');\n\tcreatePost.fields.content.set('Lorem ipsum dolor sit amet');\n</script>\n```\n\nExample:\n```text\n<form {...register}>\n\t<label>\n\t\tUsername\n\t\t<input {...register.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tPassword\n\t\t<input {...register.fields._password.as('password')} />\n\t</label>\n\n\t<button>Sign up!</button>\n</form>\n```\n\nExample:\n```text\nexport const const createPost: RemoteForm<{}, {\n    success: boolean;\n}>createPost = form<v.ObjectSchema<{}, undefined>, {\n    success: boolean;\n}>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<{\n    success: boolean;\n}>): RemoteForm<{}, {\n    success: boolean;\n}> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({/* ... */}),\n\tasync (data: {}data) => {\n\t\t// ...\n\n\t\treturn { success: booleansuccess: true };\n\t}\n);const createPost: RemoteForm<{}, {\n    success: boolean;\n}>const createPost: RemoteForm<{}, {\n    success: boolean;\n}>form<v.ObjectSchema<{}, undefined>, {\n    success: boolean;\n}>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<{\n    success: boolean;\n}>): RemoteForm<{}, {\n    success: boolean;\n}> (+2 overloads)form<v.ObjectSchema<{}, undefined>, {\n    success: boolean;\n}>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<{\n    success: boolean;\n}>): RemoteForm<{}, {\n    success: boolean;\n}> (+2 overloads)<form>import vobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestdata: {}success: boolean\n```\n\nExample:\n```text\nconst createPost: RemoteForm<{}, {\n    success: boolean;\n}>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{}, undefined>, {\n    success: boolean;\n}>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<{\n    success: boolean;\n}>): RemoteForm<{}, {\n    success: boolean;\n}> (+2 overloads)\n```\n\nExample:\n```text\nobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n{#if createPost.result?.success}\n\t<p>Successfully published!</p>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n{#if createPost.result?.success}\n\t<p>Successfully published!</p>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { createPost } from '../data.remote';\n\timport { showToast } from '$lib/toast';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost.enhance(async (form) => {\n\ttry {\n\t\tif (await form.submit()) {\n\t\t\tform.element.reset();\n\n\t\t\tshowToast('Successfully published!');\n\t\t} else {\n\t\t\tshowToast('Invalid data!');\n\t\t}\n\t} catch (error) {\n\t\tshowToast('Oh no! Something went wrong');\n\t}\n})}>\n\t<!-- -->\n</form>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { createPost } from '../data.remote';\n\timport { showToast } from '$lib/toast';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost.enhance(async (form) => {\n\ttry {\n\t\tif (await form.submit()) {\n\t\t\tform.element.reset();\n\n\t\t\tshowToast('Successfully published!');\n\t\t} else {\n\t\t\tshowToast('Invalid data!');\n\t\t}\n\t} catch (error) {\n\t\tshowToast('Oh no! Something went wrong');\n\t}\n})}>\n\t<!-- -->\n</form>\n```\n\nExample:\n```text\n<script>\n\timport { getTodos, modifyTodo } from '../data.remote';\n</script>\n\n<h1>Todos</h1>\n\n{#each await getTodos() as todo}\n\t{@const modify = modifyTodo.for(todo.id)}\n\t<form {...modify}>\n\t\t<input {...modify.fields.description.as('text', todo.description)} />\n\t\t<button disabled={!!modify.pending}>save changes</button>\n\t</form>\n{/each}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getTodos, modifyTodo } from '../data.remote';\n</script>\n\n<h1>Todos</h1>\n\n{#each await getTodos() as todo}\n\t{@const modify = modifyTodo.for(todo.id)}\n\t<form {...modify}>\n\t\t<input {...modify.fields.description.as('text', todo.description)} />\n\t\t<button disabled={!!modify.pending}>save changes</button>\n\t</form>\n{/each}\n```\n\nExample:\n```text\n<script>\n\timport { loginOrRegister } from '$lib/auth';\n</script>\n\n<form {...loginOrRegister}>\n\t<label>\n\t\tYour username\n\t\t<input {...loginOrRegister.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tYour password\n\t\t<input {...loginOrRegister.fields._password.as('password')} />\n\t</label>\n\n\t<button {...loginOrRegister.fields.action.as('submit', 'login')}>login</button>\n\t<button {...loginOrRegister.fields.action.as('submit', 'register')}>register</button>\n</form>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { loginOrRegister } from '$lib/auth';\n</script>\n\n<form {...loginOrRegister}>\n\t<label>\n\t\tYour username\n\t\t<input {...loginOrRegister.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tYour password\n\t\t<input {...loginOrRegister.fields._password.as('password')} />\n\t</label>\n\n\t<button {...loginOrRegister.fields.action.as('submit', 'login')}>login</button>\n\t<button {...loginOrRegister.fields.action.as('submit', 'register')}>register</button>\n</form>\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform } from '$app/server';\n\nexport const const loginOrRegister: RemoteForm<{\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, void>loginOrRegister = form<v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, fn: (data: {\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, issue: {\n    username: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    action: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}>(entries: {\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}): v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({\n\t\tusername: v.StringSchema<undefined>username: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(),\n\t\t_password: v.StringSchema<undefined>_password: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(),\n\t\taction: v.PicklistSchema<[\"login\", \"register\"], undefined>action: import vv.picklist<[\"login\", \"register\"]>(options: [\"login\", \"register\"]): v.PicklistSchema<[\"login\", \"register\"], undefined> (+1 overload)\nexport picklistCreates a picklist schema.\n@paramoptions The picklist options.@returnsA picklist schema.picklist(['login', 'register'])\n\t}),\n\tasync ({ username: stringusername, _password: string_password, action: \"login\" | \"register\"action }) => {\n\t\tif (action: \"login\" | \"register\"action === 'login') {\n\t\t\t// handle login\n\t\t} else {\n\t\t\t// handle registration\n\t\t}\n\t}\n);import vfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>const loginOrRegister: RemoteForm<{\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, void>const loginOrRegister: RemoteForm<{\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, void>form<v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, fn: (data: {\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, issue: {\n    username: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    action: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, fn: (data: {\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, issue: {\n    username: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    action: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)<form>import vobject<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}>(entries: {\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}): v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}>(entries: {\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}): v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestusername: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string_password: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringaction: v.PicklistSchema<[\"login\", \"register\"], undefined>import vpicklist<[\"login\", \"register\"]>(options: [\"login\", \"register\"]): v.PicklistSchema<[\"login\", \"register\"], undefined> (+1 overload)\nexport picklistpicklist<[\"login\", \"register\"]>(options: [\"login\", \"register\"]): v.PicklistSchema<[\"login\", \"register\"], undefined> (+1 overload)\nexport picklistusername: string_password: stringaction: \"login\" | \"register\"action: \"login\" | \"register\"\n```\n\nExample:\n```text\nconst loginOrRegister: RemoteForm<{\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined>, fn: (data: {\n    username: string;\n    _password: string;\n    action: \"login\" | \"register\";\n}, issue: {\n    username: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    action: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}>(entries: {\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}): v.ObjectSchema<{\n    readonly username: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n    readonly action: v.PicklistSchema<[\"login\", \"register\"], undefined>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\npicklist<[\"login\", \"register\"]>(options: [\"login\", \"register\"]): v.PicklistSchema<[\"login\", \"register\"], undefined> (+1 overload)\nexport picklist\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery, function command<Output>(fn: () => MaybePromise<Output>): RemoteCommand<void, Output> (+2 overloads)Creates a remote command. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencecommand } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getLikes: RemoteQueryFunction<string, any, string>getLikes = query<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any): RemoteQueryFunction<string, any, string> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (id: stringid) => {\n\tconst [const row: anyrow] = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT likes\n\t\tFROM item\n\t\tWHERE id = ${id: stringid}\n\t`;\n\n\treturn const row: anyrow.likes;\n});\n\nexport const const addLike: RemoteCommand<string, void>addLike = command<v.StringSchema<undefined>, void>(validate: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteCommand<string, void> (+2 overloads)Creates a remote command. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencecommand(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (id: stringid) => {\n\tawait module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tUPDATE item\n\t\tSET likes = likes + 1\n\t\tWHERE id = ${id: stringid}\n\t`;\n});import vfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction command<Output>(fn: () => MaybePromise<Output>): RemoteCommand<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getLikes: RemoteQueryFunction<string, any, string>query<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any): RemoteQueryFunction<string, any, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringid: stringconst row: anymodule \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>id: stringconst row: anyconst addLike: RemoteCommand<string, void>command<v.StringSchema<undefined>, void>(validate: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteCommand<string, void> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringid: stringmodule \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>id: string\n```\n\nExample:\n```text\n<script>\n\timport { getLikes, addLike } from './likes.remote';\n\timport { showToast } from '$lib/toast';\n\n\tlet { item } = $props();\n</script>\n\n<button\n\tonclick={async () => {\n\t\ttry {\n\t\t\tawait addLike(item.id);\n\t\t} catch (error) {\n\t\t\tshowToast('Something went wrong!');\n\t\t}\n\t}}\n>\n\tadd like\n</button>\n\n<p>likes: {await getLikes(item.id)}</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { getLikes, addLike } from './likes.remote';\n\timport { showToast } from '$lib/toast';\n\n\tlet { item } = $props();\n</script>\n\n<button\n\tonclick={async () => {\n\t\ttry {\n\t\t\tawait addLike(item.id);\n\t\t} catch (error) {\n\t\t\tshowToast('Something went wrong!');\n\t\t}\n\t}}\n>\n\tadd like\n</button>\n\n<p>likes: {await getLikes(item.id)}</p>\n```\n\nExample:\n```text\nexport const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => { /* ... */ });\n\nexport const const getPost: RemoteQueryFunction<string, void, string>getPost = query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (slug: stringslug) => { /* ... */ });\n\nexport const const createPost: RemoteForm<{}, never>createPost = form<v.ObjectSchema<{}, undefined>, never>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<never>): RemoteForm<{}, never> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({/* ... */}),\n\tasync (data: {}data) => {\n\t\t// form logic goes here...\n\n\t\t// Refresh `getPosts()` on the server, and send\n\t\t// the data back with the result of `createPost`\n\t\t// it's safe to throw away the promise from `refresh`,\n\t\t// as the framework awaits it for us before serving the response\n\t\tvoid const getPosts: (arg: void) => RemoteQuery<void>getPosts().function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n\n\t\t// Redirect to the newly created page\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect(303, `/blog/${const slug: \"\"slug}`);\n\t}\n);\n\nexport const const updatePost: RemoteForm<{\n    id: string;\n}, void>updatePost = form<v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    id: string;\n}, issue: {\n    id: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    id: string;\n}, void> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly id: v.StringSchema<undefined>;\n}>(entries: {\n    readonly id: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({ id: v.StringSchema<undefined>id: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string() }),\n\tasync (post: {\n    id: string;\n}post) => {\n\t\t// form logic goes here...\n\t\tconst const result: anyresult = const externalApi: anyexternalApi.update(post: {\n    id: string;\n}post);\n\n\t\t// The API already gives us the updated post,\n\t\t// no need to refresh it, we can set it directly\n\t\tconst getPost: (arg: string) => RemoteQuery<void>getPost(post: {\n    id: string;\n}post.id: stringid).function set(value: void): voidOn the client, this function will update the value of the query without re-fetching it.\nOn the server, this can be called in the context of a command or form and the specified data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nset(const result: anyresult);\n\t}\n);const getPosts: RemoteQueryFunction<void, void>query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)fetchconst getPost: RemoteQueryFunction<string, void, string>query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringconst createPost: RemoteForm<{}, never>form<v.ObjectSchema<{}, undefined>, never>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<never>): RemoteForm<{}, never> (+2 overloads)<form>import vobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestdata: {}const getPosts: (arg: void) => RemoteQuery<void>function refresh(): Promise<void>commandformfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectconst slug: \"\"const updatePost: RemoteForm<{\n    id: string;\n}, void>const updatePost: RemoteForm<{\n    id: string;\n}, void>form<v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    id: string;\n}, issue: {\n    id: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    id: string;\n}, void> (+2 overloads)form<v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    id: string;\n}, issue: {\n    id: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    id: string;\n}, void> (+2 overloads)<form>import vobject<{\n    readonly id: v.StringSchema<undefined>;\n}>(entries: {\n    readonly id: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly id: v.StringSchema<undefined>;\n}>(entries: {\n    readonly id: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestid: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringpost: {\n    id: string;\n}post: {\n    id: string;\n}const result: anyconst externalApi: anypost: {\n    id: string;\n}post: {\n    id: string;\n}const getPost: (arg: string) => RemoteQuery<void>post: {\n    id: string;\n}post: {\n    id: string;\n}id: stringfunction set(value: void): voidcommandformconst result: any\n```\n\nExample:\n```text\nconst updatePost: RemoteForm<{\n    id: string;\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    id: string;\n}, issue: {\n    id: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    id: string;\n}, void> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly id: v.StringSchema<undefined>;\n}>(entries: {\n    readonly id: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly id: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\npost: {\n    id: string;\n}\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform, function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\n\nexport const const getNotifications: RemoteLiveQueryFunction<string, any, string>getNotifications = function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery.function query.live<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => RemoteLiveQueryUserFunctionReturnType<any>): RemoteLiveQueryFunction<string, any, string> (+2 overloads)Creates a live remote query. When called from the browser, the function will be invoked on the server via a streaming fetch call.\nSee Remote functions for full documentation.\nlive(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async function* (userId: stringuserId) {\n\twhile (true) {\n\t\tyield await db.notifications(userId: stringuserId);\n\t\tawait wait(1000);\n\t}\n});\n\nexport const const markAllRead: RemoteForm<{\n    userId: string;\n}, void>markAllRead = form<v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    userId: string;\n}, issue: {\n    userId: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    userId: string;\n}, void> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(import vv.object<{\n    readonly userId: v.StringSchema<undefined>;\n}>(entries: {\n    readonly userId: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({ userId: v.StringSchema<undefined>userId: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string() }), async ({ userId: stringuserId }) => {\n\t// mutation logic...\n\tconst getNotifications: (arg: string) => RemoteLiveQuery<any>getNotifications(userId: stringuserId).function reconnect(): Promise<void>Reconnects the live stream immediately.\nreconnect();\n});import vfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchconst getNotifications: RemoteLiveQueryFunction<string, any, string>function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction query.live<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => RemoteLiveQueryUserFunctionReturnType<any>): RemoteLiveQueryFunction<string, any, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringuserId: stringuserId: stringconst markAllRead: RemoteForm<{\n    userId: string;\n}, void>const markAllRead: RemoteForm<{\n    userId: string;\n}, void>form<v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    userId: string;\n}, issue: {\n    userId: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    userId: string;\n}, void> (+2 overloads)form<v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    userId: string;\n}, issue: {\n    userId: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    userId: string;\n}, void> (+2 overloads)<form>import vobject<{\n    readonly userId: v.StringSchema<undefined>;\n}>(entries: {\n    readonly userId: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly userId: v.StringSchema<undefined>;\n}>(entries: {\n    readonly userId: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestuserId: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringuserId: stringconst getNotifications: (arg: string) => RemoteLiveQuery<any>userId: stringfunction reconnect(): Promise<void>\n```\n\nExample:\n```text\nconst markAllRead: RemoteForm<{\n    userId: string;\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    userId: string;\n}, issue: {\n    userId: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<void>): RemoteForm<{\n    userId: string;\n}, void> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly userId: v.StringSchema<undefined>;\n}>(entries: {\n    readonly userId: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly userId: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\nawait function submit(): Promise<any> & {\n    updates(...updates: RemoteQueryUpdate[]): Promise<any>;\n}submit().function updates(...updates: RemoteQueryUpdate[]): Promise<any>updates(\n\t// to request all active instances of getPosts\n\tfunction getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>getPosts,\n\t// to request a specific instance\n\tfunction getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>getPosts({ filter: stringfilter: 'author:santa' }),\n\t// to request a specific instance with an optimistic override\n\tfunction getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>getPosts({ filter: stringfilter: 'author:santa' }).function withOverride(update: (current: Post[]) => Post[]): RemoteQueryOverrideTemporarily override a query’s value during a single-flight mutation to provide optimistic updates.\n<script>\n  import { getTodos, addTodo } from './todos.remote.js';\n  const todos = getTodos();\n</script>\n\n<form {...addTodo.enhance(async (form) => {\n  await form.submit().updates(\n\ttodos.withOverride((todos) => [...todos, { text: form.fields.text.value() }])\n  );\n})}>\n  <input type=\"text\" name=\"text\" />\n  <button type=\"submit\">Add Todo</button>\n</form>withOverride((posts: Post[]posts) => [const newPost: PostnewPost, ...posts: Post[]posts])\n);function submit(): Promise<any> & {\n    updates(...updates: RemoteQueryUpdate[]): Promise<any>;\n}function submit(): Promise<any> & {\n    updates(...updates: RemoteQueryUpdate[]): Promise<any>;\n}function updates(...updates: RemoteQueryUpdate[]): Promise<any>function getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>function getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>function getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>function getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>filter: stringfunction getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>function getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>filter: stringfunction withOverride(update: (current: Post[]) => Post[]): RemoteQueryOverride<script>\n  import { getTodos, addTodo } from './todos.remote.js';\n  const todos = getTodos();\n</script>\n\n<form {...addTodo.enhance(async (form) => {\n  await form.submit().updates(\n\ttodos.withOverride((todos) => [...todos, { text: form.fields.text.value() }])\n  );\n})}>\n  <input type=\"text\" name=\"text\" />\n  <button type=\"submit\">Add Todo</button>\n</form>posts: Post[]const newPost: Postposts: Post[]\n```\n\nExample:\n```text\nfunction submit(): Promise<any> & {\n    updates(...updates: RemoteQueryUpdate[]): Promise<any>;\n}\n```\n\nExample:\n```text\nfunction getPosts(args: {\n    filter: string;\n}): RemoteQuery<Post[]>\n```\n\nExample:\n```text\n<script>\n  import { getTodos, addTodo } from './todos.remote.js';\n  const todos = getTodos();\n</script>\n\n<form {...addTodo.enhance(async (form) => {\n  await form.submit().updates(\n\ttodos.withOverride((todos) => [...todos, { text: form.fields.text.value() }])\n  );\n})}>\n  <input type=\"text\" name=\"text\" />\n  <button type=\"submit\">Add Todo</button>\n</form>\n```\n\nExample:\n```text\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27query, function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27form, function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nrequested } from '$app/server';\n\nexport const const getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>getPosts = query<v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, void>(schema: v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, fn: (arg: {\n    filter: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27query(import vv.object<{\n    readonly filter: v.StringSchema<undefined>;\n}>(entries: {\n    readonly filter: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({ filter: v.StringSchema<undefined>filter: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string() }), async ({ filter: stringfilter }) => { /* ... */ });\n\nexport const const createPost: RemoteForm<{}, never>createPost = form<v.ObjectSchema<{}, undefined>, never>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<never>): RemoteForm<{}, never> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27form(\n\timport vv.object<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({/* ... */}),\n\tasync (data: {}data) => {\n\t\t// form logic goes here...\n\n\t\tfor (const { const query: RemoteQuery<void>query } of requested<{\n    filter: string;\n}, void, {\n    filter: string;\n}>(query: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>, limit: number): QueryRequestedResult<{\n    filter: string;\n}, void> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nrequested(const getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>getPosts, 1)) {\n\t\t\tvoid const query: RemoteQuery<void>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n\t\t}\n\n\t\t// Redirect to the newly created page\n\t\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.redirect(303, `/blog/${const slug: \"\"slug}`);\n\t}\n);function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandformrefreshAllimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}query.batchreconnectreconnectAllconst getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>const getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>query<v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, void>(schema: v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, fn: (arg: {\n    filter: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}> (+2 overloads)query<v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, void>(schema: v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, fn: (arg: {\n    filter: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}> (+2 overloads)fetchimport vobject<{\n    readonly filter: v.StringSchema<undefined>;\n}>(entries: {\n    readonly filter: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly filter: v.StringSchema<undefined>;\n}>(entries: {\n    readonly filter: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestfilter: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfilter: stringconst createPost: RemoteForm<{}, never>form<v.ObjectSchema<{}, undefined>, never>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}, issue: {} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => Promise<never>): RemoteForm<{}, never> (+2 overloads)<form>import vobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectobject<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestdata: {}const query: RemoteQuery<void>requested<{\n    filter: string;\n}, void, {\n    filter: string;\n}>(query: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>, limit: number): QueryRequestedResult<{\n    filter: string;\n}, void> (+1 overload)requested<{\n    filter: string;\n}, void, {\n    filter: string;\n}>(query: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>, limit: number): QueryRequestedResult<{\n    filter: string;\n}, void> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandformrefreshAllimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}query.batchreconnectreconnectAllconst getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>const getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>const query: RemoteQuery<void>function refresh(): Promise<void>commandformfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectconst slug: \"\"\n```\n\nExample:\n```text\nimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandform\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();\n```\n\nExample:\n```text\nimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}\n```\n\nExample:\n```text\nconst getPosts: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>\n```\n\nExample:\n```text\nquery<v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, void>(schema: v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined>, fn: (arg: {\n    filter: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly filter: v.StringSchema<undefined>;\n}>(entries: {\n    readonly filter: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly filter: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\nrequested<{\n    filter: string;\n}, void, {\n    filter: string;\n}>(query: RemoteQueryFunction<{\n    filter: string;\n}, void, {\n    filter: string;\n}>, limit: number): QueryRequestedResult<{\n    filter: string;\n}, void> (+1 overload)\n```\n\nExample:\n```text\n// this is the same as looping over the result and calling `void query.refresh()`.\nawait requested<any, any, any>(query: RemoteQueryFunction<any, any, any>, limit: number): QueryRequestedResult<any, any> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nrequested(const getPosts: RemoteQueryFunction<any, any>getPosts, 1).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();requested<any, any, any>(query: RemoteQueryFunction<any, any, any>, limit: number): QueryRequestedResult<any, any> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandformrefreshAllimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}query.batchreconnectreconnectAllconst getPosts: RemoteQueryFunction<any, any>refreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}\n```\n\nExample:\n```text\nimport { function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getPosts: RemotePrerenderFunction<void, any[]>getPosts = prerender<any[]>(fn: () => MaybePromise<any[]>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, any[]> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender(async () => {\n\tconst const posts: any[]posts = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn const posts: any[]posts;\n});function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getPosts: RemotePrerenderFunction<void, any[]>prerender<any[]>(fn: () => MaybePromise<any[]>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, any[]> (+2 overloads)prerender<any[]>(fn: () => MaybePromise<any[]>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, any[]> (+2 overloads)fetchconst posts: any[]module \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>const posts: any[]\n```\n\nExample:\n```text\nfunction prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)\n```\n\nExample:\n```text\nprerender<any[]>(fn: () => MaybePromise<any[]>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, any[]> (+2 overloads)\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport { function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender } from '$app/server';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\nexport const const getPosts: RemotePrerenderFunction<void, void>getPosts = prerender<void>(fn: () => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, void> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender(async () => { /* ... */ });\n\nexport const const getPost: RemotePrerenderFunction<string, any>getPost = prerender<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, any> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), async (slug: stringslug) => {\n\tconst [const post: anypost] = await module \"$lib/server/database\"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug: stringslug}\n\t`;\n\n\tif (!const post: anypost) function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not found');\n\treturn const post: anypost;\n});import vfunction error(status: number, body: App.Error): never (+1 overload)handleErrorfunction prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)fetchmodule \"$lib/server/database\"const getPosts: RemotePrerenderFunction<void, void>prerender<void>(fn: () => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, void> (+2 overloads)prerender<void>(fn: () => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, void> (+2 overloads)fetchconst getPost: RemotePrerenderFunction<string, any>prerender<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, any> (+2 overloads)prerender<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, any> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringconst post: anymodule \"$lib/server/database\"function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>slug: stringconst post: anyfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleErrorconst post: any\n```\n\nExample:\n```text\nprerender<void>(fn: () => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, void> (+2 overloads)\n```\n\nExample:\n```text\nprerender<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, any> (+2 overloads)\n```\n\nExample:\n```text\nexport const const getPost: RemotePrerenderFunction<string, void>getPost = prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender(\n\timport vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(),\n\tasync (slug: stringslug) => { /* ... */ },\n\t{\n\t\tinputs?: RemotePrerenderInputsGenerator<string> | undefinedinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);const getPost: RemotePrerenderFunction<string, void>prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringinputs?: RemotePrerenderInputsGenerator<string> | undefined\n```\n\nExample:\n```text\nprerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)\n```\n\nExample:\n```text\nexport const const getPost: RemotePrerenderFunction<string, void>getPost = prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referenceprerender(\n\timport vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(),\n\tasync (slug: stringslug) => { /* ... */ },\n\t{\n\t\tdynamic?: boolean | undefineddynamic: true,\n\t\tinputs?: RemotePrerenderInputsGenerator<string> | undefinedinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);const getPost: RemotePrerenderFunction<string, void>prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)prerender<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<string> | undefined;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<string, void> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringslug: stringdynamic?: boolean | undefinedinputs?: RemotePrerenderInputsGenerator<string> | undefined\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>handleValidationError({ event: RequestEvent<Record<string, string>, string | null>event, issues: StandardSchemaV1.Issue[]issues }) {\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Nice try, hacker!'\n\t};\n}function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>event: RequestEvent<Record<string, string>, string | null>issues: StandardSchemaV1.Issue[]App.Error.message: string\n```\n\nExample:\n```text\nfunction handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>\n```\n\nExample:\n```text\nimport type { type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>The handleValidationError hook runs when the argument to a remote function fails validation.\nIt will be called with the validation issues and the event, and must return an object shape that matches App.Error.\nreferenceHandleValidationError } from '@sveltejs/kit';\n\nexport const const handleValidationError: HandleValidationErrorhandleValidationError: type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>The handleValidationError hook runs when the argument to a remote function fails validation.\nIt will be called with the validation issues and the event, and must return an object shape that matches App.Error.\nreferenceHandleValidationError = ({ event: RequestEvent<Record<string, string>, string | null>event, issues: StandardSchemaV1.Issue[]issues }) => {\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Nice try, hacker!'\n\t};\n};type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>handleValidationErrorApp.Errorconst handleValidationError: HandleValidationErrortype HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>handleValidationErrorApp.Errorevent: RequestEvent<Record<string, string>, string | null>issues: StandardSchemaV1.Issue[]App.Error.message: string\n```\n\nExample:\n```text\ntype HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>\n```\n\nExample:\n```text\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\n\nexport const const getStuff: RemoteQueryFunction<{\n    id: string;\n}, void>getStuff = query<{\n    id: string;\n}, void>(validate: \"unchecked\", fn: (arg: {\n    id: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    id: string;\n}, void> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery('unchecked', async ({ id: stringid }: { id: stringid: string }) => {\n\t// the shape might not actually be what TypeScript thinks\n\t// since bad actors might call this function with other arguments\n});function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchconst getStuff: RemoteQueryFunction<{\n    id: string;\n}, void>const getStuff: RemoteQueryFunction<{\n    id: string;\n}, void>query<{\n    id: string;\n}, void>(validate: \"unchecked\", fn: (arg: {\n    id: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    id: string;\n}, void> (+2 overloads)query<{\n    id: string;\n}, void>(validate: \"unchecked\", fn: (arg: {\n    id: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    id: string;\n}, void> (+2 overloads)fetchid: stringid: string\n```\n\nExample:\n```text\nconst getStuff: RemoteQueryFunction<{\n    id: string;\n}, void>\n```\n\nExample:\n```text\nquery<{\n    id: string;\n}, void>(validate: \"unchecked\", fn: (arg: {\n    id: string;\n}) => MaybePromise<void>): RemoteQueryFunction<{\n    id: string;\n}, void> (+2 overloads)\n```\n\nExample:\n```text\nimport { function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent, function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\nimport { function findUser(sessionId: string | undefined): Promise<User | null>findUser } from '$lib/server/database';\n\nexport const const getProfile: RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null>getProfile = query<{\n    name: string;\n    avatar: string;\n} | null>(fn: () => MaybePromise<{\n    name: string;\n    avatar: string;\n} | null>): RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => {\n\tconst const user: User | nulluser = await const getUser: (arg: void) => RemoteQuery<User | null>getUser();\n\n\treturn const user: User | nulluser && {\n\t\tname: stringname: const user: Useruser.User.name: stringname,\n\t\tavatar: stringavatar: const user: Useruser.User.avatar: stringavatar\n\t};\n});\n\n// this query could be called from multiple places, but\n// the function will only run once per request\nconst const getUser: RemoteQueryFunction<void, User | null>getUser = query<User | null>(fn: () => MaybePromise<User | null>): RemoteQueryFunction<void, User | null> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(async () => {\n\tconst { const cookies: CookiesGet or set cookies related to the current request\ncookies } = function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent();\n\n\treturn await function findUser(sessionId: string | undefined): Promise<User | null>findUser(const cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('session_id'));\n});function getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction findUser(sessionId: string | undefined): Promise<User | null>const getProfile: RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null>const getProfile: RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null>query<{\n    name: string;\n    avatar: string;\n} | null>(fn: () => MaybePromise<{\n    name: string;\n    avatar: string;\n} | null>): RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null> (+2 overloads)query<{\n    name: string;\n    avatar: string;\n} | null>(fn: () => MaybePromise<{\n    name: string;\n    avatar: string;\n} | null>): RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null> (+2 overloads)fetchconst user: User | nullconst getUser: (arg: void) => RemoteQuery<User | null>const user: User | nullname: stringconst user: UserUser.name: stringavatar: stringconst user: UserUser.avatar: stringconst getUser: RemoteQueryFunction<void, User | null>query<User | null>(fn: () => MaybePromise<User | null>): RemoteQueryFunction<void, User | null> (+2 overloads)fetchconst cookies: Cookiesfunction getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitfunction findUser(sessionId: string | undefined): Promise<User | null>const cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parse\n```\n\nExample:\n```text\nconst getProfile: RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null>\n```\n\nExample:\n```text\nquery<{\n    name: string;\n    avatar: string;\n} | null>(fn: () => MaybePromise<{\n    name: string;\n    avatar: string;\n} | null>): RemoteQueryFunction<void, {\n    name: string;\n    avatar: string;\n} | null> (+2 overloads)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.262Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":142,"totalLines":4603,"estimatedTokens":58897}}164{"id":"doc-app_environment_sveltekit_docs-f091f2f1","source":"documentation","title":"$app/environment • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-environment","text":"Example:\n```text\nimport { const browser: booleantrue if the app is running in the browser.\nreferencebrowser, const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding, const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev, const version: stringThe value of config.kit.version.name.\nreferenceversion } from '$app/environment';const browser: booleantrueconst building: booleanbuildbuildingtrueconst dev: booleanNODE_ENVMODEconst version: stringconfig.kit.version.name\n```\n\nExample:\n```text\nconst browser: boolean;\n```\n\nExample:\n```text\nconst building: boolean;\n```\n\nExample:\n```text\nconst dev: boolean;\n```\n\nExample:\n```text\nconst version: string;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.264Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":30,"estimatedTokens":215}}165{"id":"doc-sveltejs_kit_vite_sveltekit_docs-23f255e9","source":"documentation","title":"@sveltejs/kit/vite • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit-vite","text":"Example:\n```text\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelte\n```\n\nExample:\n```text\nfunction sveltekit(\n\tconfig?: KitConfig &\n\t\tOmit<Options, 'onwarn'> &\n\t\tPick<SvelteConfig, 'vitePlugin'>\n): Promise<Plugin[]>;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.264Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":18,"estimatedTokens":183}}166{"id":"doc-app_env_sveltekit_docs-fa9abdbe","source":"documentation","title":"$app/env • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-env","text":"Example:\n```text\nimport { const browser: booleantrue if the app is running in the browser.\nreferencebrowser, const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding, const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev, const version: stringThe value of config.kit.version.name.\nreferenceversion } from '$app/env';const browser: booleantrueconst building: booleanbuildbuildingtrueconst dev: booleanNODE_ENVMODEconst version: stringconfig.kit.version.name\n```\n\nExample:\n```text\nconst browser: boolean;\n```\n\nExample:\n```text\nconst building: boolean;\n```\n\nExample:\n```text\nconst dev: boolean;\n```\n\nExample:\n```text\nconst version: string;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.264Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":30,"estimatedTokens":213}}167{"id":"doc-sveltejs_kit_node_polyfills_sveltekit_docs-07615021","source":"documentation","title":"@sveltejs/kit/node/polyfills • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit-node-polyfills","text":"Example:\n```text\nimport { function installPolyfills(): voidMake various web APIs available as globals:\n\ncrypto\nFile\n\nreferenceinstallPolyfills } from '@sveltejs/kit/node/polyfills';function installPolyfills(): voidcryptoFile\n```\n\nExample:\n```text\nfunction installPolyfills(): void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.264Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":16,"estimatedTokens":75}}168{"id":"doc-app_types_sveltekit_docs-1c8774e4","source":"documentation","title":"$app/types • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-types","text":"Example:\n```text\nimport type { type RouteId = stringA union of all the route IDs in your app. Used for page.route.id and event.route.id.\nreferenceRouteId, type RouteParams<T extends RouteId> = T extends string ? Record<string, string> : Record<string, never>A utility for getting the parameters associated with a given route.\nreferenceRouteParams, type LayoutParams<T extends RouteId> = T extends string ? Record<string, string> : Record<string, never>A utility for getting the parameters associated with a given layout, which is similar to RouteParams but also includes optional parameters for any child route.\nreferenceLayoutParams } from '$app/types';type RouteId = stringpage.route.idevent.route.idtype RouteParams<T extends RouteId> = T extends string ? Record<string, string> : Record<string, never>type LayoutParams<T extends RouteId> = T extends string ? Record<string, string> : Record<string, never>RouteParams\n```\n\nExample:\n```text\ntype Asset = '/favicon.png' | '/robots.txt' | (string & {});\n```\n\nExample:\n```text\ntype RouteId = '/' | '/my-route' | '/my-other-route/[param]';\n```\n\nExample:\n```text\ntype Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};\n```\n\nExample:\n```text\ntype ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};\n```\n\nExample:\n```text\ntype type BlogParams = RouteParams<\"/blog/[slug]\">BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }\ntype BlogParams = RouteParams<\"/blog/[slug]\">\n```\n\nExample:\n```text\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.265Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":40,"estimatedTokens":411}}169{"id":"doc-app_stores_sveltekit_docs-6e83dfe5","source":"documentation","title":"$app/stores • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-stores","text":"Example:\n```text\nimport { function getStores(): {\n    page: typeof page;\n    navigating: typeof navigating;\n    updated: typeof updated;\n}referencegetStores, const navigating: Readable<Navigation | null>A readable store.\nWhen navigating starts, its value is a Navigation object with from, to, type and (if type === 'popstate') delta properties.\nWhen navigating finishes, its value reverts to null.\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n@deprecatedUse navigating from $app/state instead (requires Svelte 5, see docs for more info)referencenavigating, const page: Readable<Page<Record<string, string>, string | null>>A readable store whose value contains page data.\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n@deprecatedUse page from $app/state instead (requires Svelte 5, see docs for more info)referencepage, const updated: Readable<boolean> & {\n    check(): Promise<boolean>;\n}A readable store whose initial value is false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to true when it detects one. updated.check() will force an immediate check, regardless of polling.\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n@deprecatedUse updated from $app/state instead (requires Svelte 5, see docs for more info)referenceupdated } from '$app/stores';function getStores(): {\n    page: typeof page;\n    navigating: typeof navigating;\n    updated: typeof updated;\n}function getStores(): {\n    page: typeof page;\n    navigating: typeof navigating;\n    updated: typeof updated;\n}const navigating: Readable<Navigation | null>Navigationfromtotypetype === 'popstate'deltanullnavigating$app/stateconst page: Readable<Page<Record<string, string>, string | null>>page$app/stateconst updated: Readable<boolean> & {\n    check(): Promise<boolean>;\n}const updated: Readable<boolean> & {\n    check(): Promise<boolean>;\n}falseversion.pollIntervaltrueupdated.check()updated$app/state\n```\n\nExample:\n```text\nfunction getStores(): {\n    page: typeof page;\n    navigating: typeof navigating;\n    updated: typeof updated;\n}\n```\n\nExample:\n```text\nconst updated: Readable<boolean> & {\n    check(): Promise<boolean>;\n}\n```\n\nExample:\n```text\nfunction getStores(): {\n\tpage: typeof page;\n\n\tnavigating: typeof navigating;\n\n\tupdated: typeof updated;\n};\n```\n\nExample:\n```text\nconst navigating: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Navigation | null\n>;\n```\n\nExample:\n```text\nconst page: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Page\n>;\n```\n\nExample:\n```text\nconst updated: import('svelte/store').Readable<boolean> & {\n\tcheck(): Promise<boolean>;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.265Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":80,"estimatedTokens":732}}170{"id":"doc-sveltejs_kit_node_sveltekit_docs-712d7dc4","source":"documentation","title":"@sveltejs/kit/node • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit-node","text":"Example:\n```text\nimport {\n\tfunction createReadableStream(file: string): ReadableStreamConverts a file on disk to a readable stream\n@since2.4.0referencecreateReadableStream,\n\tfunction getRequest({ request, base, bodySizeLimit }: {\n    request: import(\"http\").IncomingMessage;\n    base: string;\n    bodySizeLimit?: number;\n}): Promise<Request>referencegetRequest,\n\tfunction setResponse(res: import(\"http\").ServerResponse, response: Response): Promise<void>referencesetResponse\n} from '@sveltejs/kit/node';function createReadableStream(file: string): ReadableStreamfunction getRequest({ request, base, bodySizeLimit }: {\n    request: import(\"http\").IncomingMessage;\n    base: string;\n    bodySizeLimit?: number;\n}): Promise<Request>function getRequest({ request, base, bodySizeLimit }: {\n    request: import(\"http\").IncomingMessage;\n    base: string;\n    bodySizeLimit?: number;\n}): Promise<Request>function setResponse(res: import(\"http\").ServerResponse, response: Response): Promise<void>\n```\n\nExample:\n```text\nfunction getRequest({ request, base, bodySizeLimit }: {\n    request: import(\"http\").IncomingMessage;\n    base: string;\n    bodySizeLimit?: number;\n}): Promise<Request>\n```\n\nExample:\n```text\nfunction createReadableStream(file: string): ReadableStream;\n```\n\nExample:\n```text\nfunction getRequest({\n\trequest,\n\tbase,\n\tbodySizeLimit\n}: {\n\trequest: import('http').IncomingMessage;\n\tbase: string;\n\tbodySizeLimit?: number;\n}): Promise<Request>;\n```\n\nExample:\n```text\nfunction setResponse(\n\tres: import('http').ServerResponse,\n\tresponse: Response\n): Promise<void>;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.265Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":58,"estimatedTokens":396}}171{"id":"doc-env_dynamic_public_sveltekit_docs-40dc4263","source":"documentation","title":"$env/dynamic/public • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$env-dynamic-public","text":"Example:\n```text\nMY_FEATURE_FLAG=\n```\n\nExample:\n```text\nMY_FEATURE_FLAG=\"enabled\" npm run dev\n```\n\nExample:\n```text\nENVIRONMENT=production\nPUBLIC_BASE_URL=http://example.com\n```\n\nExample:\n```text\nimport { import envreferenceenv } from '$env/dynamic/public';\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import envreferenceenv.ENVIRONMENT); // => undefined, not public\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import envreferenceenv.PUBLIC_BASE_URL); // => \"http://example.com\"import envvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import envvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import env\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.265Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":247,"estimatedTokens":2529}}172{"id":"doc-env_dynamic_private_sveltekit_docs-52c43040","source":"documentation","title":"$env/dynamic/private • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$env-dynamic-private","text":"Example:\n```text\nMY_FEATURE_FLAG=\n```\n\nExample:\n```text\nMY_FEATURE_FLAG=\"enabled\" npm run dev\n```\n\nExample:\n```text\nENVIRONMENT=production\nPUBLIC_BASE_URL=http://site.com\n```\n\nExample:\n```text\nimport { import envreferenceenv } from '$env/dynamic/private';\n\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import envreferenceenv.ENVIRONMENT); // => \"production\"\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import envreferenceenv.PUBLIC_BASE_URL); // => undefinedimport envvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import envvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import env\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.266Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":248,"estimatedTokens":2524}}173{"id":"doc-app_forms_sveltekit_docs-91558d05","source":"documentation","title":"$app/forms • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-forms","text":"Example:\n```text\nimport { function applyAction<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: import(\"@sveltejs/kit\").ActionResult<Success, Failure>): Promise<void>This action updates the form property of the current page with the given data and updates page.status.\nIn case of an error, it redirects to the nearest error page.\nreferenceapplyAction, function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import(\"@sveltejs/kit\").ActionResult<Success, Failure>Use this function to deserialize the response from a form submission.\nUsage:\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}referencedeserialize, function enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import(\"@sveltejs/kit\").SubmitFunction<Success, Failure>): {\n    destroy(): void;\n}This action enhances a <form> element that otherwise would work without JavaScript.\nThe submit function is called upon submission with the given FormData and the action that should be triggered.\nIf cancel is called, the form will not be submitted.\nYou can use the abort controller to cancel the submission in case another one starts.\nIf a function is returned, that function is called with the response from the server.\nIf nothing is returned, the fallback will be used.\nIf this function or its return value isn’t set, it\n\nfalls back to updating the form prop with the returned data if the action is on the same page as the form\nupdates page.status\nresets the <form> element and invalidates all data in case of successful submission with no redirect response\nredirects in case of a redirect response\nredirects to the nearest error page in case of an unexpected error\n\nIf you provide a custom function with a callback and want to use the default behavior, invoke update in your callback.\nIt accepts an options object\n\nreset: false if you don’t want the <form> values to be reset after a successful submission\ninvalidateAll: false if you don’t want the action to call invalidateAll after submission\n\n@paramform_element The form element@paramsubmit Submit callbackreferenceenhance } from '$app/forms';function applyAction<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: import(\"@sveltejs/kit\").ActionResult<Success, Failure>): Promise<void>formpage.statusfunction deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import(\"@sveltejs/kit\").ActionResult<Success, Failure>import { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}function enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import(\"@sveltejs/kit\").SubmitFunction<Success, Failure>): {\n    destroy(): void;\n}function enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import(\"@sveltejs/kit\").SubmitFunction<Success, Failure>): {\n    destroy(): void;\n}<form>submitactioncancelcontrollerformpage.status<form>updatereset: false<form>invalidateAll: falseinvalidateAll\n```\n\nExample:\n```text\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}\n```\n\nExample:\n```text\nfunction enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import(\"@sveltejs/kit\").SubmitFunction<Success, Failure>): {\n    destroy(): void;\n}\n```\n\nExample:\n```text\nfunction applyAction<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: import('@sveltejs/kit').ActionResult<\n\t\tSuccess,\n\t\tFailure\n\t>\n): Promise<void>;\n```\n\nExample:\n```text\nimport { function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import(\"@sveltejs/kit\").ActionResult<Success, Failure>Use this function to deserialize the response from a form submission.\nUsage:\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}referencedeserialize } from '$app/forms';\n\nasync function function handleSubmit(event: any): Promise<void>handleSubmit(event: anyevent) {\n\tconst const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference\nfetch('/form?/action', {\n\t\tRequestInit.method?: string | undefinedA string to set request’s method.\nmethod: 'POST',\n\t\tRequestInit.body?: BodyInit | null | undefinedA BodyInit object or null to set request’s body.\nbody: new var FormData: new (form?: HTMLFormElement, submitter?: HTMLElement | null) => FormDataThe FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.\nMDN Reference\nFormData(event: anyevent.target)\n\t});\n\n\tconst const result: ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>result = deserialize<Record<string, unknown> | undefined, Record<string, unknown> | undefined>(result: string): ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>Use this function to deserialize the response from a form submission.\nUsage:\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}referencedeserialize(await const response: Responseresponse.Body.text(): Promise<string>MDN Reference\ntext());\n\t// ...\n}function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import(\"@sveltejs/kit\").ActionResult<Success, Failure>import { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}function handleSubmit(event: any): Promise<void>event: anyconst response: Responsefunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)RequestInit.method?: string | undefinedRequestInit.body?: BodyInit | null | undefinedvar FormData: new (form?: HTMLFormElement, submitter?: HTMLElement | null) => FormDataFormDataevent: anyconst result: ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>deserialize<Record<string, unknown> | undefined, Record<string, unknown> | undefined>(result: string): ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>import { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n  const response = await fetch('/form?/action', {\n\tmethod: 'POST',\n\tbody: new FormData(event.target)\n  });\n\n  const result = deserialize(await response.text());\n  // ...\n}const response: ResponseBody.text(): Promise<string>\n```\n\nExample:\n```text\nfunction deserialize<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: string\n): import('@sveltejs/kit').ActionResult<Success, Failure>;\n```\n\nExample:\n```text\nfunction enhance<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tform_element: HTMLFormElement,\n\tsubmit?: import('@sveltejs/kit').SubmitFunction<\n\t\tSuccess,\n\t\tFailure\n\t>\n): {\n\tdestroy(): void;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.266Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":182,"estimatedTokens":2197}}174{"id":"doc-app_state_sveltekit_docs-aa309afd","source":"documentation","title":"$app/state • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-state","text":"Example:\n```text\nimport { const navigating: Navigation | {\n    from: null;\n    to: null;\n    type: null;\n    willUnload: null;\n    delta: null;\n    complete: null;\n}A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties.\nValues are null when no navigation is occurring, or during server rendering.\nreferencenavigating, const page: Page<Record<string, string>, string | null>A read-only reactive object with information about the current page, serving several use cases:\n\nretrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)\nretrieving the current value of the form prop anywhere in your component tree (also see form actions)\nretrieving the page state that was set through goto, pushState or replaceState (also see goto and shallow routing)\nretrieving metadata such as the URL you’re on, the current route and its parameters, and whether or not there was an error\n\n+layout<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)\n+page<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script><script lang=\"ts\">\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.\nreferencepage, const updated: {\n    readonly current: boolean;\n    check(): Promise<boolean>;\n}A read-only reactive value that’s initially false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update current to true when it detects one. updated.check() will force an immediate check, regardless of polling.\nreferenceupdated } from '$app/state';const navigating: Navigation | {\n    from: null;\n    to: null;\n    type: null;\n    willUnload: null;\n    delta: null;\n    complete: null;\n}const navigating: Navigation | {\n    from: null;\n    to: null;\n    type: null;\n    willUnload: null;\n    delta: null;\n    complete: null;\n}fromtotypetype === 'popstate'deltanullconst page: Page<Record<string, string>, string | null>dataformgotopushStatereplaceState<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}page<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script><script lang=\"ts\">\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>loadconst updated: {\n    readonly current: boolean;\n    check(): Promise<boolean>;\n}const updated: {\n    readonly current: boolean;\n    check(): Promise<boolean>;\n}falseversion.pollIntervalcurrenttrueupdated.check()\n```\n\nExample:\n```text\nconst navigating: Navigation | {\n    from: null;\n    to: null;\n    type: null;\n    willUnload: null;\n    delta: null;\n    complete: null;\n}\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>\n```\n\nExample:\n```text\nconst updated: {\n    readonly current: boolean;\n    check(): Promise<boolean>;\n}\n```\n\nExample:\n```text\nconst navigating:\n\t| import('@sveltejs/kit').Navigation\n\t| {\n\t\t\tfrom: null;\n\t\t\tto: null;\n\t\t\ttype: null;\n\t\t\twillUnload: null;\n\t\t\tdelta: null;\n\t\t\tcomplete: null;\n\t  };\n```\n\nExample:\n```text\nconst page: import('@sveltejs/kit').Page;\n```\n\nExample:\n```text\nconst updated: {\n\tget current(): boolean;\n\tcheck(): Promise<boolean>;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.266Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":199,"estimatedTokens":1442}}175{"id":"doc-agents_md_svelte_ai_docs-43dda43e","source":"documentation","title":"AGENTS.md • Svelte AI Docs","url":"https://svelte.dev/docs/ai/instructions","text":"Example:\n```text\nYou are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:\n\n## Available Svelte MCP Tools:\n\n### 1. list-sections\n\nUse this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.\nWhen asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.\n\n### 2. get-documentation\n\nRetrieves full documentation content for specific sections. Accepts single or multiple sections.\nAfter calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.\n\n### 3. svelte-autofixer\n\nAnalyzes Svelte code and returns issues and suggestions.\nYou MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.\n\n### 4. playground-link\n\nGenerates a Svelte Playground link with the provided code.\nAfter completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.267Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":28,"estimatedTokens":338}}176{"id":"doc-app_paths_sveltekit_docs-2a51bb45","source":"documentation","title":"$app/paths • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-paths","text":"Example:\n```text\nimport { function asset(file: Asset): stringResolve the URL of an asset in your static directory, by prefixing it with config.kit.paths.assets if configured, or otherwise by prefixing it with the base path.\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n@example<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />@since2.26referenceasset, let assets: \"\" | `https://${string}` | `http://${string}` | \"/_svelte_kit_assets\"An absolute path that matches config.kit.paths.assets.\n If a value for config.kit.paths.assets is specified, it will be replaced with '/_svelte_kit_assets' during vite dev or vite preview, since the assets don’t yet live at their eventual URL.\n@deprecatedUse asset(...) insteadreferenceassets, let base: \"\" | `/${string}`A string that matches config.kit.paths.base.\nExample usage: <a href=\"{base}/your-page\">Link</a>\n@deprecatedUse resolve(...) insteadreferencebase, function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>Match a path or URL to a route ID and extracts any parameters.\n@exampleimport { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}@since2.52.0referencematch, function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n@exampleimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});@since2.26referenceresolve, function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathname@deprecatedUse resolve(...) insteadreferenceresolveRoute } from '$app/paths';function asset(file: Asset): stringstaticconfig.kit.paths.assets<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />let assets: \"\" | `https://${string}` | `http://${string}` | \"/_svelte_kit_assets\"config.kit.paths.assetsconfig.kit.paths.assets'/_svelte_kit_assets'vite devvite previewasset(...)let base: \"\" | `/${string}`config.kit.paths.base<a href=\"{base}/your-page\">Link</a>resolve(...)function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>import { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameresolve(...)\n```\n\nExample:\n```text\n<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />\n```\n\nExample:\n```text\nfunction match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>\n```\n\nExample:\n```text\nimport { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}\n```\n\nExample:\n```text\nimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});\n```\n\nExample:\n```text\nfunction asset(file: Asset): string;\n```\n\nExample:\n```text\nlet assets:\n\t| ''\n\t| `https://${string}`\n\t| `http://${string}`\n\t| '/_svelte_kit_assets';\n```\n\nExample:\n```text\nlet base: '' | `/${string}`;\n```\n\nExample:\n```text\nimport { function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>Match a path or URL to a route ID and extracts any parameters.\n@exampleimport { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}@since2.52.0referencematch } from '$app/paths';\n\nconst const route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullroute = await function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>Match a path or URL to a route ID and extracts any parameters.\n@exampleimport { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}@since2.52.0referencematch('/blog/hello-world');\n\nif (const route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullroute?.id: string | undefinedid === '/blog/[slug]') {\n\tconst const slug: stringslug = const route: {\n    id: RouteId;\n    params: Record<string, string>;\n}route.params: Record<string, string>params.stringslug;\n\tconst const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference\nfetch(`/api/posts/${const slug: stringslug}`);\n\tconst const post: anypost = await const response: Responseresponse.Body.json(): Promise<any>MDN Reference\njson();\n}function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>import { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}const route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullconst route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullfunction match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>function match(url: Pathname | URL | (string & {})): Promise<{\n    id: RouteId;\n    params: Record<string, string>;\n} | null>import { match } from '$app/paths';\n\nconst route = await match('/blog/hello-world');\n\nif (route?.id === '/blog/[slug]') {\n\tconst slug = route.params.slug;\n\tconst response = await fetch(`/api/posts/${slug}`);\n\tconst post = await response.json();\n}const route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullconst route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | nullid: string | undefinedconst slug: stringconst route: {\n    id: RouteId;\n    params: Record<string, string>;\n}const route: {\n    id: RouteId;\n    params: Record<string, string>;\n}params: Record<string, string>stringconst response: Responsefunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)const slug: stringconst post: anyconst response: ResponseBody.json(): Promise<any>\n```\n\nExample:\n```text\nconst route: {\n    id: RouteId;\n    params: Record<string, string>;\n} | null\n```\n\nExample:\n```text\nconst route: {\n    id: RouteId;\n    params: Record<string, string>;\n}\n```\n\nExample:\n```text\nfunction match(\n\turl: Pathname | URL | (string & {})\n): Promise<{\n\tid: RouteId;\n\tparams: Record<string, string>;\n} | null>;\n```\n\nExample:\n```text\nimport { function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n@exampleimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});@since2.26referenceresolve } from '$app/paths';\n\n// using a pathname\nconst const resolved: stringresolved = resolve<\"/blog/hello-world\">(route: \"/blog/hello-world\", params: Record<string, string>): ResolvedPathnameResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n@exampleimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});@since2.26referenceresolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst const resolved: stringresolved = resolve<\"/blog/[slug]\">(route: \"/blog/[slug]\", params: Record<string, string>): ResolvedPathnameResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n@exampleimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});@since2.26referenceresolve('/blog/[slug]', {\n\tslug: stringslug: 'hello-world'\n});function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});const resolved: stringresolve<\"/blog/hello-world\">(route: \"/blog/hello-world\", params: Record<string, string>): ResolvedPathnameimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});const resolved: stringresolve<\"/blog/[slug]\">(route: \"/blog/[slug]\", params: Record<string, string>): ResolvedPathnameimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});slug: string\n```\n\nExample:\n```text\nfunction resolve<\n\tT extends\n\t\t| RouteIdWithSearchOrHash\n\t\t| PathnameWithSearchOrHash\n>(...args: ResolveArgs<T>): ResolvedPathname;\n```\n\nExample:\n```text\nfunction resolveRoute<\n\tT extends\n\t\t| RouteIdWithSearchOrHash\n\t\t| PathnameWithSearchOrHash\n>(...args: ResolveArgs<T>): ResolvedPathname;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.267Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":331,"estimatedTokens":2959}}177{"id":"doc-app_navigation_sveltekit_docs-1c0b2065","source":"documentation","title":"$app/navigation • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-navigation","text":"Example:\n```text\nimport {\n\tfunction afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.\nafterNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nafterNavigate,\n\tfunction beforeNavigate(callback: (navigation: import(\"@sveltejs/kit\").BeforeNavigate) => void): voidA navigation interceptor that triggers before we navigate to a URL, whether by clicking a link, calling goto(...), or using the browser back/forward controls.\nCalling cancel() will prevent the navigation from completing. If navigation.type === 'leave' — meaning the user is navigating away from the app (or closing the tab) — calling cancel will trigger the native browser unload confirmation dialog. In this case, the navigation may or may not be cancelled depending on the user’s response.\nWhen a navigation isn’t to a SvelteKit-owned route (and therefore controlled by SvelteKit’s client-side router), navigation.to.route.id will be null.\nIf the navigation will (if not cancelled) cause the document to unload — in other words 'leave' navigations and 'link' navigations where navigation.to.route === null — navigation.willUnload is true.\nbeforeNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nbeforeNavigate,\n\tfunction disableScrollHandling(): voidIf called when the page is being updated following a navigation (in onMount or afterNavigate or an action, for example), this disables SvelteKit’s built-in scroll handling.\nThis is generally discouraged, since it breaks user expectations.\ndisableScrollHandling,\n\tfunction goto(url: string | URL, opts?: {\n    replaceState?: boolean | undefined;\n    noScroll?: boolean | undefined;\n    keepFocus?: boolean | undefined;\n    invalidateAll?: boolean | undefined;\n    invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;\n    state?: App.PageState | undefined;\n}): Promise<void>Allows you to navigate programmatically to a given route, with options such as keeping the current element focused.\nReturns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url.\nFor external URLs, use window.location = url instead of calling goto(url).\n@paramurl Where to navigate to. Note that if you've set config.kit.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.@paramopts Options related to the navigationgoto,\n\tfunction invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate } from '$app/navigation';\n\nfunction invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate((url: URLurl) => url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/path');@paramresource The invalidated URLinvalidate,\n\tfunction invalidateAll(): Promise<void>Causes all load and query functions belonging to the currently active page to re-run. Returns a Promise that resolves when the page is subsequently updated.\ninvalidateAll,\n\tfunction onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.\nIf you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.\nIf a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.\nonNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nonNavigate,\n\tfunction preloadCode(pathname: string): Promise<void>Programmatically imports the code for routes that haven’t yet been fetched.\nTypically, you might call this to speed up subsequent navigation.\nYou can specify routes by any matching pathname such as /about (to match src/routes/about/+page.svelte) or /blog/* (to match src/routes/blog/[slug]/+page.svelte).\nUnlike preloadData, this won’t call load functions.\nReturns a Promise that resolves when the modules have been imported.\npreloadCode,\n\tfunction preloadData(href: string): Promise<{\n    type: \"loaded\";\n    status: number;\n    data: Record<string, any>;\n} | {\n    type: \"redirect\";\n    location: string;\n}>Programmatically preloads the given page, which means\n\nensuring that the code for the page is loaded, and\ncalling the page’s load function with the appropriate options.\n\nThis is the same behaviour that SvelteKit triggers when the user taps or mouses over an <a> element with data-sveltekit-preload-data.\nIf the next navigation is to href, the values returned from load will be used, making navigation instantaneous.\nReturns a Promise that resolves with the result of running the new route’s load functions once the preload is complete.\n@paramhref Page to preloadpreloadData,\n\tfunction pushState(url: string | URL, state: App.PageState): voidProgrammatically create a new history entry with the given page.state. To use the current URL, you can pass '' as the first argument. Used for shallow routing.\npushState,\n\tfunction refreshAll({ includeLoadFunctions }?: {\n    includeLoadFunctions?: boolean;\n}): Promise<void>Causes all currently active remote functions to refresh, and all load functions belonging to the currently active page to re-run (unless disabled via the option argument).\nReturns a Promise that resolves when the page is subsequently updated.\nrefreshAll,\n\tfunction replaceState(url: string | URL, state: App.PageState): voidProgrammatically replace the current history entry with the given page.state. To use the current URL, you can pass '' as the first argument. Used for shallow routing.\nreplaceState\n} from '$app/navigation';function afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidcallbackafterNavigatefunction beforeNavigate(callback: (navigation: import(\"@sveltejs/kit\").BeforeNavigate) => void): voidgoto(...)cancel()navigation.type === 'leave'cancelnavigation.to.route.idnull'leave''link'navigation.to.route === nullnavigation.willUnloadtruebeforeNavigatefunction disableScrollHandling(): voidonMountafterNavigatefunction goto(url: string | URL, opts?: {\n    replaceState?: boolean | undefined;\n    noScroll?: boolean | undefined;\n    keepFocus?: boolean | undefined;\n    invalidateAll?: boolean | undefined;\n    invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;\n    state?: App.PageState | undefined;\n}): Promise<void>function goto(url: string | URL, opts?: {\n    replaceState?: boolean | undefined;\n    noScroll?: boolean | undefined;\n    keepFocus?: boolean | undefined;\n    invalidateAll?: boolean | undefined;\n    invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;\n    state?: App.PageState | undefined;\n}): Promise<void>urlwindow.location = urlgoto(url)config.kit.paths.basefunction invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>loadurlfetchdependsPromisestringURLfetchdepends[a-z]+:custom:statefunctionURLloadtrue// Example: Match '/path' regardless of the query parameters\nimport { function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate } from '$app/navigation';\n\nfunction invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate((url: URLurl) => url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/path');function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>loadurlfetchdependsPromisestringURLfetchdepends[a-z]+:custom:statefunctionURLloadtrue// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>loadurlfetchdependsPromisestringURLfetchdepends[a-z]+:custom:statefunctionURLloadtrue// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');url: URLurl: URLURL.pathname: stringpathnamefunction invalidateAll(): Promise<void>loadqueryPromisefunction onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidcallbackPromisedocument.startViewTransitionPromiseonNavigatefunction preloadCode(pathname: string): Promise<void>/aboutsrc/routes/about/+page.svelte/blog/*src/routes/blog/[slug]/+page.sveltepreloadDataloadfunction preloadData(href: string): Promise<{\n    type: \"loaded\";\n    status: number;\n    data: Record<string, any>;\n} | {\n    type: \"redirect\";\n    location: string;\n}>function preloadData(href: string): Promise<{\n    type: \"loaded\";\n    status: number;\n    data: Record<string, any>;\n} | {\n    type: \"redirect\";\n    location: string;\n}><a>data-sveltekit-preload-datahrefloadfunction pushState(url: string | URL, state: App.PageState): voidpage.state''function refreshAll({ includeLoadFunctions }?: {\n    includeLoadFunctions?: boolean;\n}): Promise<void>function refreshAll({ includeLoadFunctions }?: {\n    includeLoadFunctions?: boolean;\n}): Promise<void>loadPromisefunction replaceState(url: string | URL, state: App.PageState): voidpage.state''\n```\n\nExample:\n```text\nfunction goto(url: string | URL, opts?: {\n    replaceState?: boolean | undefined;\n    noScroll?: boolean | undefined;\n    keepFocus?: boolean | undefined;\n    invalidateAll?: boolean | undefined;\n    invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;\n    state?: App.PageState | undefined;\n}): Promise<void>\n```\n\nExample:\n```text\n// Example: Match '/path' regardless of the query parameters\nimport { function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate } from '$app/navigation';\n\nfunction invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.\nIf the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).\nTo create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.\nThe function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');@paramresource The invalidated URLreferenceinvalidate((url: URLurl) => url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/path');function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>loadurlfetchdependsPromisestringURLfetchdepends[a-z]+:custom:statefunctionURLloadtrue// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>loadurlfetchdependsPromisestringURLfetchdepends[a-z]+:custom:statefunctionURLloadtrue// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');url: URLurl: URLURL.pathname: stringpathname\n```\n\nExample:\n```text\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');\n```\n\nExample:\n```text\nfunction preloadData(href: string): Promise<{\n    type: \"loaded\";\n    status: number;\n    data: Record<string, any>;\n} | {\n    type: \"redirect\";\n    location: string;\n}>\n```\n\nExample:\n```text\nfunction refreshAll({ includeLoadFunctions }?: {\n    includeLoadFunctions?: boolean;\n}): Promise<void>\n```\n\nExample:\n```text\nfunction afterNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').AfterNavigate\n\t) => void\n): void;\n```\n\nExample:\n```text\nfunction beforeNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').BeforeNavigate\n\t) => void\n): void;\n```\n\nExample:\n```text\nfunction disableScrollHandling(): void;\n```\n\nExample:\n```text\nfunction goto(\n\turl: string | URL,\n\topts?: {\n\t\treplaceState?: boolean | undefined;\n\t\tnoScroll?: boolean | undefined;\n\t\tkeepFocus?: boolean | undefined;\n\t\tinvalidateAll?: boolean | undefined;\n\t\tinvalidate?:\n\t\t\t| (string | URL | ((url: URL) => boolean))[]\n\t\t\t| undefined;\n\t\tstate?: App.PageState | undefined;\n\t}\n): Promise<void>;\n```\n\nExample:\n```text\nfunction invalidate(\n\tresource: string | URL | ((url: URL) => boolean)\n): Promise<void>;\n```\n\nExample:\n```text\nfunction invalidateAll(): Promise<void>;\n```\n\nExample:\n```text\nfunction onNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').OnNavigate\n\t) => MaybePromise<(() => void) | void>\n): void;\n```\n\nExample:\n```text\nfunction preloadCode(pathname: string): Promise<void>;\n```\n\nExample:\n```text\nfunction preloadData(href: string): Promise<\n\t| {\n\t\t\ttype: 'loaded';\n\t\t\tstatus: number;\n\t\t\tdata: Record<string, any>;\n\t  }\n\t| {\n\t\t\ttype: 'redirect';\n\t\t\tlocation: string;\n\t  }\n>;\n```\n\nExample:\n```text\nfunction pushState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\nExample:\n```text\nfunction refreshAll({\n\tincludeLoadFunctions\n}?: {\n\tincludeLoadFunctions?: boolean;\n}): Promise<void>;\n```\n\nExample:\n```text\nfunction replaceState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.268Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":331,"estimatedTokens":4958}}178{"id":"doc-sveltejs_kit_hooks_sveltekit_docs-3f971c4d","source":"documentation","title":"@sveltejs/kit/hooks • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit-hooks","text":"Example:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\n@deprecatedImport defineEnvVars from @sveltejs/kit/env insteadreferencedefineEnvVars, function sequence(...handlers: Handle[]): HandleA helper function for sequencing multiple handle calls in a middleware-like manner.\nThe behavior for the handle options is as follows:\n\ntransformPageChunk is applied in reverse order and merged\npreload is applied in forward order, the first option “wins” and no preload options after it are called\nfilterSerializedResponseHeaders behaves the same as preload\n\nsrc/hooks.serverimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);The example above would print:\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing@paramhandlers The chain of handle functionsreferencesequence } from '@sveltejs/kit/hooks';function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/privatedefineEnvVars@sveltejs/kit/envfunction sequence(...handlers: Handle[]): HandlehandlehandletransformPageChunkpreloadpreloadfilterSerializedResponseHeaderspreloadimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);first pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processinghandle\n```\n\nExample:\n```text\nimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);\n```\n\nExample:\n```text\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing\n```\n\nExample:\n```text\nfunction defineEnvVars<\n\tT extends Record<string, EnvVarConfig<any>>\n>(variables: T): T;\n```\n\nExample:\n```text\nimport { function sequence(...handlers: Handle[]): HandleA helper function for sequencing multiple handle calls in a middleware-like manner.\nThe behavior for the handle options is as follows:\n\ntransformPageChunk is applied in reverse order and merged\npreload is applied in forward order, the first option “wins” and no preload options after it are called\nfilterSerializedResponseHeaders behaves the same as preload\n\nsrc/hooks.serverimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);The example above would print:\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing@paramhandlers The chain of handle functionsreferencesequence } from '@sveltejs/kit/hooks';\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function function first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>first({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first pre-processing');\n\tconst const result: Responseresult = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first transform');\n\t\t\treturn html: stringhtml;\n\t\t},\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first post-processing');\n\treturn const result: Responseresult;\n}\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function function second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>second({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second pre-processing');\n\tconst const result: Responseresult = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second transform');\n\t\t\treturn html: stringhtml;\n\t\t},\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: () => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedDetermines which headers should be included in serialized responses when a load function loads a resource with fetch.\nBy default, none will be included.\n@paramname header name@paramvalue header valuefilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second post-processing');\n\treturn const result: Responseresult;\n}\n\nexport const const handle: Handlehandle = function sequence(...handlers: Handle[]): HandleA helper function for sequencing multiple handle calls in a middleware-like manner.\nThe behavior for the handle options is as follows:\n\ntransformPageChunk is applied in reverse order and merged\npreload is applied in forward order, the first option “wins” and no preload options after it are called\nfilterSerializedResponseHeaders behaves the same as preload\n\nsrc/hooks.serverimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);The example above would print:\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing@paramhandlers The chain of handle functionsreferencesequence(function first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>first, function second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>second);function sequence(...handlers: Handle[]): HandlehandlehandletransformPageChunkpreloadpreloadfilterSerializedResponseHeaderspreloadimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);first pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processinghandlefunction first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()html: stringResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscssvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responsefunction second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()html: stringResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscssvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()ResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedloadfetchvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseconst handle: Handlefunction sequence(...handlers: Handle[]): HandlehandlehandletransformPageChunkpreloadpreloadfilterSerializedResponseHeaderspreloadimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);first pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processinghandlefunction first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nfunction first(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefined\n```\n\nExample:\n```text\nResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined\n```\n\nExample:\n```text\nfunction second(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nimport { function sequence(...handlers: Handle[]): HandleA helper function for sequencing multiple handle calls in a middleware-like manner.\nThe behavior for the handle options is as follows:\n\ntransformPageChunk is applied in reverse order and merged\npreload is applied in forward order, the first option “wins” and no preload options after it are called\nfilterSerializedResponseHeaders behaves the same as preload\n\nsrc/hooks.serverimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);The example above would print:\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing@paramhandlers The chain of handle functionsreferencesequence } from '@sveltejs/kit/hooks';\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nconst const first: Handlefirst: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first pre-processing');\n\tconst const result: Responseresult = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first transform');\n\t\t\treturn html: stringhtml;\n\t\t},\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('first post-processing');\n\treturn const result: Responseresult;\n};\n\nconst const second: Handlesecond: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second pre-processing');\n\tconst const result: Responseresult = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second transform');\n\t\t\treturn html: stringhtml;\n\t\t},\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: () => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedDetermines which headers should be included in serialized responses when a load function loads a resource with fetch.\nBy default, none will be included.\n@paramname header name@paramvalue header valuefilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log('second post-processing');\n\treturn const result: Responseresult;\n};\n\nexport const const handle: Handlehandle = function sequence(...handlers: Handle[]): HandleA helper function for sequencing multiple handle calls in a middleware-like manner.\nThe behavior for the handle options is as follows:\n\ntransformPageChunk is applied in reverse order and merged\npreload is applied in forward order, the first option “wins” and no preload options after it are called\nfilterSerializedResponseHeaders behaves the same as preload\n\nsrc/hooks.serverimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);The example above would print:\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing@paramhandlers The chain of handle functionsreferencesequence(const first: Handlefirst, const second: Handlesecond);function sequence(...handlers: Handle[]): HandlehandlehandletransformPageChunkpreloadpreloadfilterSerializedResponseHeaderspreloadimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);first pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processinghandletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst first: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()html: stringResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscssvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseconst second: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()html: stringResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscssvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()ResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedloadfetchvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()var console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const result: Responseconst handle: Handlefunction sequence(...handlers: Handle[]): HandlehandlehandletransformPageChunkpreloadpreloadfilterSerializedResponseHeaderspreloadimport { sequence } from '@sveltejs/kit/hooks';\n\n/// type: import('@sveltejs/kit').Handle\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/// type: import('@sveltejs/kit').Handle\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);first pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processinghandleconst first: Handleconst second: Handle\n```\n\nExample:\n```text\ntype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>\n```\n\nExample:\n```text\nfunction sequence(...handlers: Handle[]): Handle;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.276Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":2541,"estimatedTokens":27818}}179{"id":"doc-app_server_sveltekit_docs-6ddc878c","source":"documentation","title":"$app/server • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$app-server","text":"Example:\n```text\nimport {\n\tfunction command<Output>(fn: () => MaybePromise<Output>): RemoteCommand<void, Output> (+2 overloads)Creates a remote command. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27command,\n\tfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27form,\n\tfunction getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0getRequestEvent,\n\tfunction prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27prerender,\n\tfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27query,\n\tfunction read(asset: string): ResponseRead the contents of an imported asset from the filesystem\n@exampleimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();@since2.4.0read,\n\tfunction requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nrequested\n} from '$app/server';function command<Output>(fn: () => MaybePromise<Output>): RemoteCommand<void, Output> (+2 overloads)fetchfunction form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>function getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitfunction prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)function prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)fetchfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchfunction read(asset: string): Responseimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandformrefreshAllimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}query.batchreconnectreconnectAll\n```\n\nExample:\n```text\nfunction prerender<Output>(fn: () => MaybePromise<Output>, options?: {\n    inputs?: RemotePrerenderInputsGenerator<void>;\n    dynamic?: boolean;\n} | undefined): RemotePrerenderFunction<void, Output> (+2 overloads)\n```\n\nExample:\n```text\nimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();\n```\n\nExample:\n```text\nimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nfor (const { const arg: unknownarg, const query: RemoteQuery<unknown>query } of requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid const query: RemoteQuery<unknown>query.function refresh(): Promise<void>On the client, this function will re-fetch the query from the server.\nOn the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.\nThis prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\nrefresh();\n}function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst arg: unknownconst query: RemoteQuery<unknown>requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllconst query: RemoteQuery<unknown>function refresh(): Promise<void>commandform\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();\n```\n\nExample:\n```text\nimport { function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested } from '$app/server';\n\nawait requested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)Inside a remote command or form callback, returns an iterable\nof { arg, query } entries for the query instances the client asked to refresh, up to\nthe supplied limit. Each query is a RemoteQuery bound to the original\nclient-side cache key, so refresh() / set() propagate correctly even when\nthe query’s schema transforms the input. arg is the validated argument,\ni.e. the value after the schema has run (so InferOutput<Schema> for queries\ndeclared with a Standard Schema).\nArguments that fail validation or exceed limit are recorded as failures in\nthe response to the client.\nSee Client-requested refreshes\nfor usage in a remote command or form.\n@exampleimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}As a shorthand for the above, you can also call refreshAll on the result:\n@exampleimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();Works with query.batch as well — refreshes for individual entries are\ncollected into a single batched call.\nFor live queries, the same applies, but with reconnect and reconnectAll.\nreferencerequested(getPost, 5).refreshAll: () => Promise<void>Call refresh on all queries selected by this requested invocation.\nThis is identical to:\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}refreshAll();function requested<Input, Output, Validated = Input>(query: RemoteQueryFunction<Input, Output, Validated>, limit: number): QueryRequestedResult<Validated, Output> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrequested<unknown, unknown, unknown>(query: RemoteQueryFunction<unknown, unknown, unknown>, limit: number): QueryRequestedResult<unknown, unknown> (+1 overload)commandform{ arg, query }limitqueryRemoteQueryrefresh()set()argInferOutput<Schema>limitcommandformimport { requested } from '$app/server';\n\nfor (const { arg, query } of requested(getPost, 5)) {\n\t// `arg` is the validated argument; `query` is bound to the client's\n\t// cache key. It's safe to throw away this promise -- SvelteKit will\n\t// await it and forward any errors to the client.\n\tvoid query.refresh();\n}refreshAllimport { requested } from '$app/server';\n\nawait requested(getPost, 5).refreshAll();query.batchreconnectreconnectAllrefreshAll: () => Promise<void>refreshrequestedimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}\n```\n\nExample:\n```text\nimport { requested } from '$app/server';\n\nfor await (const { query } of requested(getPost, ...)) {\n  void query.refresh();\n}\n```\n\nExample:\n```text\nfunction command<Output>(\n\tfn: () => MaybePromise<Output>\n): RemoteCommand<void, Output>;\n```\n\nExample:\n```text\nfunction command<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>\n): RemoteCommand<Input, Output>;\n```\n\nExample:\n```text\nfunction command<Schema extends StandardSchemaV1, Output>(\n\tvalidate: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>\n): RemoteCommand<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\nExample:\n```text\nfunction form<Output>(\n\tfn: () => MaybePromise<Output>\n): RemoteForm<void, Output>;\n```\n\nExample:\n```text\nfunction form<Input extends RemoteFormInput, Output>(\n\tvalidate: 'unchecked',\n\tfn: (\n\t\tdata: Input,\n\t\tissue: InvalidField<Input>\n\t) => MaybePromise<Output>\n): RemoteForm<Input, Output>;\n```\n\nExample:\n```text\nfunction form<\n\tSchema extends StandardSchemaV1<\n\t\tRemoteFormInput,\n\t\tRecord<string, any>\n\t>,\n\tOutput\n>(\n\tvalidate: true extends HasNonOptionalBoolean<\n\t\tStandardSchemaV1.InferInput<Schema>\n\t>\n\t\t? 'Error: All booleans in form schemas must be optional (e.g. `v.optional(v.boolean(), false)`) because checkbox inputs do not send a false value when unchecked.'\n\t\t: Schema,\n\tfn: (\n\t\tdata: StandardSchemaV1.InferOutput<Schema>,\n\t\tissue: InvalidField<StandardSchemaV1.InferInput<Schema>>\n\t) => MaybePromise<Output>\n): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\nExample:\n```text\nfunction getRequestEvent(): RequestEvent;\n```\n\nExample:\n```text\nfunction prerender<Output>(\n\tfn: () => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<void>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<void, Output>;\n```\n\nExample:\n```text\nfunction prerender<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<Input>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<Input, Output>;\n```\n\nExample:\n```text\nfunction prerender<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<\n\t\t\t\t\tStandardSchemaV1.InferInput<Schema>\n\t\t\t\t>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\nExample:\n```text\nfunction query<Output>(\n\tfn: () => MaybePromise<Output>\n): RemoteQueryFunction<void, Output>;\n```\n\nExample:\n```text\nfunction query<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>\n): RemoteQueryFunction<Input, Output>;\n```\n\nExample:\n```text\nfunction query<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>\n): RemoteQueryFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput,\n\tStandardSchemaV1.InferOutput<Schema>\n>;\n```\n\nExample:\n```text\nimport { function read(asset: string): ResponseRead the contents of an imported asset from the filesystem\n@exampleimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();@since2.4.0referenceread } from '$app/server';\nimport const somefile: stringsomefile from './somefile.txt';\n\nconst const asset: Responseasset = function read(asset: string): ResponseRead the contents of an imported asset from the filesystem\n@exampleimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();@since2.4.0referenceread(const somefile: stringsomefile);\nconst const text: stringtext = await const asset: Responseasset.Body.text(): Promise<string>MDN Reference\ntext();function read(asset: string): Responseimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();const somefile: stringconst asset: Responsefunction read(asset: string): Responseimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();const somefile: stringconst text: stringconst asset: ResponseBody.text(): Promise<string>\n```\n\nExample:\n```text\nfunction read(asset: string): Response;\n```\n\nExample:\n```text\nfunction requested<Input, Output, Validated = Input>(\n\tquery: RemoteQueryFunction<Input, Output, Validated>,\n\tlimit: number\n): QueryRequestedResult<Validated, Output>;\n```\n\nExample:\n```text\nfunction requested<Input, Output, Validated = Input>(\n\tquery: RemoteLiveQueryFunction<Input, Output, Validated>,\n\tlimit: number\n): LiveQueryRequestedResult<Validated, Output>;\n```\n\nExample:\n```text\nnamespace query {\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Input, Output>(\n\t\tvalidate: 'unchecked',\n\t\tfn: (\n\t\t\targs: Input[]\n\t\t) => MaybePromise<(arg: Input, idx: number) => Output>\n\t): RemoteQueryFunction<Input, Output>;\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Schema extends StandardSchemaV1, Output>(\n\t\tschema: Schema,\n\t\tfn: (\n\t\t\targs: StandardSchemaV1.InferOutput<Schema>[]\n\t\t) => MaybePromise<\n\t\t\t(\n\t\t\t\targ: StandardSchemaV1.InferOutput<Schema>,\n\t\t\t\tidx: number\n\t\t\t) => Output\n\t\t>\n\t): RemoteQueryFunction<\n\t\tStandardSchemaV1.InferInput<Schema>,\n\t\tOutput,\n\t\tStandardSchemaV1.InferOutput<Schema>\n\t>;\n\t/**\n\t * Creates a live remote query. When called from the browser, the function will be invoked on the server via a streaming `fetch` call.\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.live) for full documentation.\n\t *\n\t * */\n\tfunction live<Output>(\n\t\tfn: (\n\t\t\targ: void\n\t\t) => RemoteLiveQueryUserFunctionReturnType<Output>\n\t): RemoteLiveQueryFunction<void, Output>;\n\n\tfunction live<Input, Output>(\n\t\tvalidate: 'unchecked',\n\t\tfn: (\n\t\t\targ: Input\n\t\t) => RemoteLiveQueryUserFunctionReturnType<Output>\n\t): RemoteLiveQueryFunction<Input, Output>;\n\n\tfunction live<Schema extends StandardSchemaV1, Output>(\n\t\tschema: Schema,\n\t\tfn: (\n\t\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t\t) => RemoteLiveQueryUserFunctionReturnType<Output>\n\t): RemoteLiveQueryFunction<\n\t\tStandardSchemaV1.InferInput<Schema>,\n\t\tOutput,\n\t\tStandardSchemaV1.InferOutput<Schema>\n\t>;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.278Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":802,"estimatedTokens":9813}}180{"id":"doc-sveltejs_kit_sveltekit_docs-2b2ebfb3","source":"documentation","title":"@sveltejs/kit • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit","text":"Example:\n```text\nimport {\n\tclass ServerreferenceServer,\n\tconst VERSION: stringreferenceVERSION,\n\tfunction error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror,\n\tfunction fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object. Call when form submission fails.\n@paramstatus The HTTP status code. Must be in the range 400-599.referencefail,\n\tfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverUse this to throw a validation error to imperatively fail form validation.\nCan be used in combination with issue passed to form actions to create field-specific issues.\n@exampleimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);@since2.47.3referenceinvalid,\n\tfunction isActionFailure(e: unknown): e is ActionFailureChecks whether this is an action failure thrown by \n{@link \nfail\n}\n.\n@parame The object to check.referenceisActionFailure,\n\tfunction isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {\n    status: T extends undefined ? never : T;\n})Checks whether this is an error thrown by \n{@link \nerror\n}\n.\n@paramstatus The status to filter for.referenceisHttpError,\n\tfunction isRedirect(e: unknown): e is Redirect_1Checks whether this is a redirect thrown by \n{@link \nredirect\n}\n.\n@parame The object to check.referenceisRedirect,\n\tfunction isValidationError(e: unknown): e is ActionFailureChecks whether this is an validation error thrown by \n{@link \ninvalid\n}\n.\n@parame The object to check.@since2.47.3referenceisValidationError,\n\tfunction json(data: any, init?: ResponseInit): ResponseCreate a JSON Response object from the supplied data.\n@paramdata The value that will be serialized as JSON.@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.referencejson,\n\tfunction normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.\nReturns the normalized URL as well as a method for adding the potential suffix back\nbased on a new pathname (possibly including search) or URL.\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json@since2.18.0referencenormalizeUrl,\n\tfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.\nMost common status codes:\n\n303 See Other: redirect as a GET request (often used after a form POST request)\n307 Temporary Redirect: redirect will keep the request method\n308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page\n\nSee all redirect status codes\n@paramstatus The HTTP status code. Must be in the range 300-308.@paramlocation The location to redirect to.@throwsRedirect This error instructs SvelteKit to redirect to the specified location.@throwsError If the provided status is invalid or the location cannot be used as a header value.referenceredirect,\n\tfunction text(body: string, init?: ResponseInit): ResponseCreate a Response object from the supplied body.\n@parambody The value that will be used as-is.@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.referencetext\n} from '@sveltejs/kit';class Serverconst VERSION: stringfunction error(status: number, body: App.Error): never (+1 overload)handleErrorfunction fail(status: number): ActionFailure<undefined> (+1 overload)ActionFailurefunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverissueimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);function isActionFailure(e: unknown): e is ActionFailurefunction isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {\n    status: T extends undefined ? never : T;\n})function isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {\n    status: T extends undefined ? never : T;\n})function isRedirect(e: unknown): e is Redirect_1function isValidationError(e: unknown): e is ActionFailurefunction json(data: any, init?: ResponseInit): ResponseResponsestatusheadersContent-Type: application/jsonContent-Lengthfunction normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}function normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}import { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.jsonfunction redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never303 See Other307 Temporary Redirect308 Permanent Redirectfunction text(body: string, init?: ResponseInit): ResponseResponsestatusheadersContent-Length\n```\n\nExample:\n```text\nimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);\n```\n\nExample:\n```text\nfunction isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {\n    status: T extends undefined ? never : T;\n})\n```\n\nExample:\n```text\nfunction normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}\n```\n\nExample:\n```text\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json\n```\n\nExample:\n```text\nclass Server {…}\n```\n\nExample:\n```text\nconstructor(manifest: SSRManifest);\n```\n\nExample:\n```text\ninit(options: ServerInitOptions): Promise<void>;\n```\n\nExample:\n```text\nrespond(request: Request, options: RequestOptions): Promise<Response>;\n```\n\nExample:\n```text\nconst VERSION: string;\n```\n\nExample:\n```text\nfunction error(status: number, body: App.Error): never;\n```\n\nExample:\n```text\nfunction error(\n\tstatus: number,\n\tbody?: {\n\t\tmessage: string;\n\t} extends App.Error\n\t\t? App.Error | string | undefined\n\t\t: never\n): never;\n```\n\nExample:\n```text\nfunction fail(status: number): ActionFailure<undefined>;\n```\n\nExample:\n```text\nfunction fail<T = undefined>(\n\tstatus: number,\n\tdata: T\n): ActionFailure<T>;\n```\n\nExample:\n```text\nimport { function invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverUse this to throw a validation error to imperatively fail form validation.\nCan be used in combination with issue passed to form actions to create field-specific issues.\n@exampleimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);@since2.47.3referenceinvalid } from '@sveltejs/kit';\nimport { function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform } from '$app/server';\nimport { import tryLogintryLogin } from '$lib/server/auth';\nimport * as import vv from 'valibot';\n\nexport const const login: RemoteForm<{\n    name: string;\n    _password: string;\n}, void>login = form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    name: string;\n    _password: string;\n}, issue: {\n    name: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)Creates a form object that can be spread onto a <form> element.\nSee Remote functions for full documentation.\n@since2.27referenceform(\n\timport vv.object<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectCreates an object schema.\nHint: This schema removes unknown entries. The output will only include the\nentries you specify. To include unknown entries, use looseObject. To\nreturn an issue for unknown entries, use strictObject. To include and\nvalidate unknown entries, use objectWithRest.\n@paramentries The entries schema.@returnsAn object schema.object({ name: v.StringSchema<undefined>name: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), _password: v.StringSchema<undefined>_password: import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string() }),\n\tasync ({ name: stringname, _password: string_password }) => {\n\t\tconst const success: anysuccess = import tryLogintryLogin(name: stringname, _password: string_password);\n\t\tif (!const success: anysuccess) {\n\t\t\tfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverUse this to throw a validation error to imperatively fail form validation.\nCan be used in combination with issue passed to form actions to create field-specific issues.\n@exampleimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);@since2.47.3referenceinvalid('Incorrect username or password');\n\t\t}\n\n\t\t// ...\n\t}\n);function invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverissueimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)<form>import tryLoginimport vconst login: RemoteForm<{\n    name: string;\n    _password: string;\n}, void>const login: RemoteForm<{\n    name: string;\n    _password: string;\n}, void>form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    name: string;\n    _password: string;\n}, issue: {\n    name: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)form<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    name: string;\n    _password: string;\n}, issue: {\n    name: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)<form>import vobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport objectlooseObjectstrictObjectobjectWithRestname: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string_password: v.StringSchema<undefined>import vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringname: string_password: stringconst success: anyimport tryLoginname: string_password: stringconst success: anyfunction invalid(...issues: (StandardSchemaV1<Input = unknown, Output = Input>.Issue | string)[]): neverissueimport { invalid } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport { tryLogin } from '$lib/server/auth';\nimport * as v from 'valibot';\n\nexport const login = form(\n  v.object({ name: v.string(), _password: v.string() }),\n  async ({ name, _password }) => {\n\tconst success = tryLogin(name, _password);\n\tif (!success) {\n\t  invalid('Incorrect username or password');\n\t}\n\n\t// ...\n  }\n);\n```\n\nExample:\n```text\nconst login: RemoteForm<{\n    name: string;\n    _password: string;\n}, void>\n```\n\nExample:\n```text\nform<v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, void>(validate: v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined>, fn: (data: {\n    name: string;\n    _password: string;\n}, issue: {\n    name: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n    _password: (message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue;\n} & ((message: string) => StandardSchemaV1<Input = unknown, Output = Input>.Issue)) => MaybePromise<...>): RemoteForm<...> (+2 overloads)\n```\n\nExample:\n```text\nobject<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}>(entries: {\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}): v.ObjectSchema<{\n    readonly name: v.StringSchema<undefined>;\n    readonly _password: v.StringSchema<undefined>;\n}, undefined> (+1 overload)\nexport object\n```\n\nExample:\n```text\nfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string\n```\n\nExample:\n```text\nfunction invalid(\n\t...issues: (StandardSchemaV1.Issue | string)[]\n): never;\n```\n\nExample:\n```text\nfunction isActionFailure(e: unknown): e is ActionFailure;\n```\n\nExample:\n```text\nfunction isHttpError<T extends number>(\n\te: unknown,\n\tstatus?: T\n): e is HttpError_1 & {\n\tstatus: T extends undefined ? never : T;\n};\n```\n\nExample:\n```text\nfunction isRedirect(e: unknown): e is Redirect_1;\n```\n\nExample:\n```text\nfunction isValidationError(e: unknown): e is ActionFailure;\n```\n\nExample:\n```text\nfunction json(data: any, init?: ResponseInit): Response;\n```\n\nExample:\n```text\nimport { function normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.\nReturns the normalized URL as well as a method for adding the potential suffix back\nbased on a new pathname (possibly including search) or URL.\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json@since2.18.0referencenormalizeUrl } from '@sveltejs/kit';\n\nconst { const url: URLurl, const denormalize: (url?: string | URL) => URLdenormalize } = function normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}Strips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.\nReturns the normalized URL as well as a method for adding the potential suffix back\nbased on a new pathname (possibly including search) or URL.\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json@since2.18.0referencenormalizeUrl('/blog/post/__data.json');\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(const url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname); // /blog/post\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(const denormalize: (url?: string | URL) => URLdenormalize('/blog/post/a')); // /blog/post/a/__data.jsonfunction normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}function normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}import { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.jsonconst url: URLconst denormalize: (url?: string | URL) => URLfunction normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}function normalizeUrl(url: URL | string): {\n    url: URL;\n    wasNormalized: boolean;\n    denormalize: (url?: string | URL) => URL;\n}import { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.jsonvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const url: URLURL.pathname: stringpathnamevar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()const denormalize: (url?: string | URL) => URL\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nfunction normalizeUrl(url: URL | string): {\n\turl: URL;\n\twasNormalized: boolean;\n\tdenormalize: (url?: string | URL) => URL;\n};\n```\n\nExample:\n```text\nfunction redirect(\n\tstatus:\n\t\t| 300\n\t\t| 301\n\t\t| 302\n\t\t| 303\n\t\t| 304\n\t\t| 305\n\t\t| 306\n\t\t| 307\n\t\t| 308\n\t\t| ({} & number),\n\tlocation: string | URL\n): never;\n```\n\nExample:\n```text\nfunction text(body: string, init?: ResponseInit): Response;\n```\n\nExample:\n```text\ntype Action<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<OutputData>;\n```\n\nExample:\n```text\ninterface ActionFailure<T = undefined> {…}\n```\n\nExample:\n```text\nstatus: number;\n```\n\nExample:\n```text\ndata: T;\n```\n\nExample:\n```text\n[uniqueSymbol]: true;\n```\n\nExample:\n```text\n<form method=\"post\" use:enhance={() => {\n\treturn ({ result }) => {\n\t\t// result is of type ActionResult\n\t};\n}}\n```\n\nExample:\n```text\ntype ActionResult<\n\tSuccess extends Record<string, unknown> | undefined =\n\t\tRecord<string, any>,\n\tFailure extends Record<string, unknown> | undefined =\n\t\tRecord<string, any>\n> =\n\t| { type: 'success'; status: number; data?: Success }\n\t| { type: 'failure'; status: number; data?: Failure }\n\t| { type: 'redirect'; status: number; location: string }\n\t| { type: 'error'; status?: number; error: any };\n```\n\nExample:\n```text\ntype Actions<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = Record<string, Action<Params, OutputData, RouteId>>;\n```\n\nExample:\n```text\ninterface Adapter {…}\n```\n\nExample:\n```text\nname: string;\n```\n\nExample:\n```text\nadapt: (builder: Builder) => MaybePromise<void>;\n```\n\nExample:\n```text\nsupports?: {…}\n```\n\nExample:\n```text\nread?: (details: { config: any; route: { id: string } }) => boolean;\n```\n\nExample:\n```text\ninstrumentation?: () => boolean;\n```\n\nExample:\n```text\nemulate?: () => MaybePromise<Emulator>;\n```\n\nExample:\n```text\ntype AfterNavigate = (Navigation | NavigationEnter) & {\n\ttype: Exclude<NavigationType, 'leave'>;\n\t/**\n\t * Since `afterNavigate` callbacks are called after a navigation completes, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\nExample:\n```text\ntype AwaitedActions<\n\tT extends Record<string, (...args: any) => any>\n> = OptionalUnion<\n\t{\n\t\t[Key in keyof T]: UnpackValidationError<\n\t\t\tAwaited<ReturnType<T[Key]>>\n\t\t>;\n\t}[keyof T]\n>;\n```\n\nExample:\n```text\ntype BeforeNavigate = Navigation & {\n\t/**\n\t * Call this to prevent the navigation from starting.\n\t */\n\tcancel: () => void;\n};\n```\n\nExample:\n```text\ninterface Builder {…}\n```\n\nExample:\n```text\nlog: Logger;\n```\n\nExample:\n```text\nrimraf: (dir: string) => void;\n```\n\nExample:\n```text\nmkdirp: (dir: string) => void;\n```\n\nExample:\n```text\nconfig: ValidatedConfig;\n```\n\nExample:\n```text\nprerendered: Prerendered;\n```\n\nExample:\n```text\nroutes: RouteDefinition[];\n```\n\nExample:\n```text\ncreateEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise<void>;\n```\n\nExample:\n```text\nfindServerAssets: (routes: RouteDefinition[]) => string[];\n```\n\nExample:\n```text\ngenerateFallback: (dest: string) => Promise<void>;\n```\n\nExample:\n```text\ngenerateEnvModule: () => void;\n```\n\nExample:\n```text\ngenerateManifest: (opts: { relativePath: string; routes?: RouteDefinition[] }) => string;\n```\n\nExample:\n```text\ngetBuildDirectory: (name: string) => string;\n```\n\nExample:\n```text\ngetClientDirectory: () => string;\n```\n\nExample:\n```text\ngetServerDirectory: () => string;\n```\n\nExample:\n```text\ngetAppPath: () => string;\n```\n\nExample:\n```text\nwriteClient: (dest: string) => string[];\n```\n\nExample:\n```text\nwritePrerendered: (dest: string) => string[];\n```\n\nExample:\n```text\nwriteServer: (dest: string) => string[];\n```\n\nExample:\n```text\ncopy: (\n\tfrom: string,\n\tto: string,\n\topts?: {\n\t\tfilter?(basename: string): boolean;\n\t\treplace?: Record<string, string>;\n\t}\n) => string[];\n```\n\nExample:\n```text\nhasServerInstrumentationFile: () => boolean;\n```\n\nExample:\n```text\ninstrument: (args: {\n\tentrypoint: string;\n\tinstrumentation: string;\n\tstart?: string;\n\tmodule?:\n\t\t| {\n\t\t\t\texports: string[];\n\t\t  }\n\t\t| {\n\t\t\t\tgenerateText: (args: { instrumentation: string; start: string }) => string;\n\t\t  };\n}) => void;\n```\n\nExample:\n```text\ncompress: (directory: string) => Promise<void>;\n```\n\nExample:\n```text\ntype ClientInit = () => MaybePromise<void>;\n```\n\nExample:\n```text\ninterface Cookies {…}\n```\n\nExample:\n```text\nget: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined;\n```\n\nExample:\n```text\ngetAll: (opts?: import('cookie').CookieParseOptions) => Array<{ name: string; value: string }>;\n```\n\nExample:\n```text\nset: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => void;\n```\n\nExample:\n```text\ndelete: (name: string, opts: import('cookie').CookieSerializeOptions & { path: string }) => void;\n```\n\nExample:\n```text\nserialize: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => string;\n```\n\nExample:\n```text\ninterface Emulator {…}\n```\n\nExample:\n```text\nplatform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;\n```\n\nExample:\n```text\ninterface EnvVarConfig<T> {…}\n```\n\nExample:\n```text\npublic?: boolean;\n```\n\nExample:\n```text\nstatic?: boolean;\n```\n\nExample:\n```text\nschema?: StandardSchemaV1<string | undefined, T>;\n```\n\nExample:\n```text\ndescription?: string;\n```\n\nExample:\n```text\ntype Handle = (input: {\n\tevent: RequestEvent;\n\tresolve: (\n\t\tevent: RequestEvent,\n\t\topts?: ResolveOptions\n\t) => MaybePromise<Response>;\n}) => MaybePromise<Response>;\n```\n\nExample:\n```text\ntype HandleClientError = (input: {\n\terror: unknown;\n\tevent: NavigationEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\nExample:\n```text\ntype HandleFetch = (input: {\n\tevent: RequestEvent;\n\trequest: Request;\n\tfetch: typeof fetch;\n}) => MaybePromise<Response>;\n```\n\nExample:\n```text\ntype HandleServerError = (input: {\n\terror: unknown;\n\tevent: RequestEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\nExample:\n```text\ntype HandleValidationError<\n\tIssue extends StandardSchemaV1.Issue =\n\t\tStandardSchemaV1.Issue\n> = (input: {\n\tissues: Issue[];\n\tevent: RequestEvent;\n}) => MaybePromise<App.Error>;\n```\n\nExample:\n```text\ninterface HttpError {…}\n```\n\nExample:\n```text\nbody: App.Error;\n```\n\nExample:\n```text\ntype InvalidField<T> =\n\tWillRecurseIndefinitely<T> extends true\n\t\t? Record<string | number, any>\n\t\t: NonNullable<T> extends\n\t\t\t\t\t| string\n\t\t\t\t\t| number\n\t\t\t\t\t| boolean\n\t\t\t\t\t| File\n\t\t\t? (message: string) => StandardSchemaV1.Issue\n\t\t\t: NonNullable<T> extends Array<infer U>\n\t\t\t\t? {\n\t\t\t\t\t\t[K in number]: InvalidField<U>;\n\t\t\t\t\t} & ((message: string) => StandardSchemaV1.Issue)\n\t\t\t\t: NonNullable<T> extends RemoteFormInput\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t[K in keyof T]-?: InvalidField<T[K]>;\n\t\t\t\t\t\t} & ((\n\t\t\t\t\t\t\tmessage: string\n\t\t\t\t\t\t) => StandardSchemaV1.Issue)\n\t\t\t\t\t: Record<string, never>;\n```\n\nExample:\n```text\ntype LessThan<\n\tTNumber extends number,\n\tTArray extends any[] = []\n> = TNumber extends TArray['length']\n\t? TArray[number]\n\t: LessThan<TNumber, [...TArray, TArray['length']]>;\n```\n\nExample:\n```text\ntype LiveQueryRequestedResult<Validated, Output> = Iterable<\n\tLiveRequestedEntry<Validated, Output>\n> &\n\tAsyncIterable<LiveRequestedEntry<Validated, Output>> & {\n\t\t/**\n\t\t * Call `reconnect` on all live queries selected by this `requested` invocation.\n\t\t * This is identical to:\n\t\t * ```ts\n\t\t * import { requested } from '$app/server';\n\t\t *\n\t\t * for await (const { query } of requested(liveQuery, ...)) {\n\t\t *   void query.reconnect();\n\t\t * }\n\t\t * ```\n\t\t */\n\t\treconnectAll: () => Promise<void>;\n\t};\n```\n\nExample:\n```text\ntype LiveRequestedEntry<Validated, Output> = {\n\targ: Validated;\n\tquery: RemoteLiveQuery<Output>;\n};\n```\n\nExample:\n```text\ntype Load<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tInputData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<string, unknown> | void =\n\t\tRecord<string, any> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: LoadEvent<Params, InputData, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\nExample:\n```text\ninterface LoadEvent<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends NavigationEvent<Params, RouteId> {…}\n```\n\nExample:\n```text\nfetch: typeof fetch;\n```\n\nExample:\n```text\ndata: Data;\n```\n\nExample:\n```text\nsetHeaders: (headers: Record<string, string>) => void;\n```\n\nExample:\n```text\nexport async function function load({ fetch, setHeaders }: {\n    fetch: any;\n    setHeaders: any;\n}): Promise<any>load({ fetch, setHeaders }) {\n\n\tconst const url: \"https://cms.example.com/articles.json\"url = `https://cms.example.com/articles.json`;\n\tconst const response: anyresponse = await fetch: anyfetch(const url: \"https://cms.example.com/articles.json\"url);\n\n\tsetHeaders: anysetHeaders({\n\t\tage: anyage: const response: anyresponse.headers.get('age'),\n\t\t'cache-control': const response: anyresponse.headers.get('cache-control')\n\t});\n\n\treturn const response: anyresponse.json();\n}function load({ fetch, setHeaders }: {\n    fetch: any;\n    setHeaders: any;\n}): Promise<any>function load({ fetch, setHeaders }: {\n    fetch: any;\n    setHeaders: any;\n}): Promise<any>const url: \"https://cms.example.com/articles.json\"const response: anyfetch: anyconst url: \"https://cms.example.com/articles.json\"setHeaders: anyage: anyconst response: anyconst response: anyconst response: any\n```\n\nExample:\n```text\nfunction load({ fetch, setHeaders }: {\n    fetch: any;\n    setHeaders: any;\n}): Promise<any>\n```\n\nExample:\n```text\nparent: () => Promise<ParentData>;\n```\n\nExample:\n```text\ndepends: (...deps: Array<`${string}:${string}`>) => void;\n```\n\nExample:\n```text\nlet let count: numbercount = 0;\nexport async function function load({ depends }: {\n    depends: any;\n}): Promise<{\n    count: number;\n}>load({ depends }) {\n\tdepends: anydepends('increase:count');\n\n\treturn { count: numbercount: let count: numbercount++ };\n}let count: numberfunction load({ depends }: {\n    depends: any;\n}): Promise<{\n    count: number;\n}>function load({ depends }: {\n    depends: any;\n}): Promise<{\n    count: number;\n}>depends: anycount: numberlet count: number\n```\n\nExample:\n```text\nfunction load({ depends }: {\n    depends: any;\n}): Promise<{\n    count: number;\n}>\n```\n\nExample:\n```text\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\nExample:\n```text\nuntrack: <T>(fn: () => T) => T;\n```\n\nExample:\n```text\nexport async function function load({ untrack, url }: {\n    untrack: any;\n    url: any;\n}): Promise<{\n    message: string;\n} | undefined>load({ untrack, url }) {\n\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack: anyuntrack(() => url: anyurl.pathname === '/')) {\n\t\treturn { message: stringmessage: 'Welcome!' };\n\t}\n}function load({ untrack, url }: {\n    untrack: any;\n    url: any;\n}): Promise<{\n    message: string;\n} | undefined>function load({ untrack, url }: {\n    untrack: any;\n    url: any;\n}): Promise<{\n    message: string;\n} | undefined>untrack: anyurl: anymessage: string\n```\n\nExample:\n```text\nfunction load({ untrack, url }: {\n    untrack: any;\n    url: any;\n}): Promise<{\n    message: string;\n} | undefined>\n```\n\nExample:\n```text\ntracing: {…}\n```\n\nExample:\n```text\nenabled: boolean;\n```\n\nExample:\n```text\nroot: Span;\n```\n\nExample:\n```text\ncurrent: Span;\n```\n\nExample:\n```text\ntype LoadProperties<\n\tinput extends Record<string, any> | void\n> = input extends void\n\t? undefined // needs to be undefined, because void will break intellisense\n\t: input extends Record<string, any>\n\t\t? input\n\t\t: unknown;\n```\n\nExample:\n```text\ntype Navigation =\n\t| NavigationExternal\n\t| NavigationFormSubmit\n\t| NavigationPopState\n\t| NavigationLink;\n```\n\nExample:\n```text\ninterface NavigationBase {…}\n```\n\nExample:\n```text\ntype: NavigationType;\n```\n\nExample:\n```text\nfrom: NavigationTarget | null;\n```\n\nExample:\n```text\nto: NavigationTarget | null;\n```\n\nExample:\n```text\nwillUnload: boolean;\n```\n\nExample:\n```text\ncomplete: Promise<void>;\n```\n\nExample:\n```text\ninterface NavigationEnter extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'enter';\n```\n\nExample:\n```text\ndelta?: undefined;\n```\n\nExample:\n```text\nevent?: undefined;\n```\n\nExample:\n```text\ninterface NavigationEvent<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {…}\n```\n\nExample:\n```text\nparams: Params;\n```\n\nExample:\n```text\nroute: {…}\n```\n\nExample:\n```text\nid: RouteId;\n```\n\nExample:\n```text\nurl: URL;\n```\n\nExample:\n```text\ntype NavigationExternal = NavigationGoto | NavigationLeave;\n```\n\nExample:\n```text\ninterface NavigationFormSubmit extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'form';\n```\n\nExample:\n```text\nevent: SubmitEvent;\n```\n\nExample:\n```text\ninterface NavigationGoto extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'goto';\n```\n\nExample:\n```text\ninterface NavigationLeave extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'leave';\n```\n\nExample:\n```text\ninterface NavigationLink extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'link';\n```\n\nExample:\n```text\nevent: PointerEvent;\n```\n\nExample:\n```text\ninterface NavigationPopState extends NavigationBase {…}\n```\n\nExample:\n```text\ntype: 'popstate';\n```\n\nExample:\n```text\ndelta: number;\n```\n\nExample:\n```text\nevent: PopStateEvent;\n```\n\nExample:\n```text\ninterface NavigationTarget<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {…}\n```\n\nExample:\n```text\nparams: Params | null;\n```\n\nExample:\n```text\nid: RouteId | null;\n```\n\nExample:\n```text\nscroll: { x: number; y: number } | null;\n```\n\nExample:\n```text\ntype NavigationType =\n\t| 'enter'\n\t| 'form'\n\t| 'leave'\n\t| 'link'\n\t| 'goto'\n\t| 'popstate';\n```\n\nExample:\n```text\ntype NumericRange<\n\tTStart extends number,\n\tTEnd extends number\n> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;\n```\n\nExample:\n```text\ntype OnNavigate = Navigation & {\n\ttype: Exclude<NavigationType, 'enter' | 'leave'>;\n\t/**\n\t * Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\nExample:\n```text\ninterface Page<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {…}\n```\n\nExample:\n```text\nurl: URL & { pathname: ResolvedPathname };\n```\n\nExample:\n```text\nerror: App.Error | null;\n```\n\nExample:\n```text\ndata: App.PageData & Record<string, any>;\n```\n\nExample:\n```text\nstate: App.PageState;\n```\n\nExample:\n```text\nform: any;\n```\n\nExample:\n```text\ntype ParamMatcher = (param: string) => boolean;\n```\n\nExample:\n```text\ntype PrerenderOption = boolean | 'auto';\n```\n\nExample:\n```text\ntype QueryRequestedResult<Validated, Output> = Iterable<\n\tRequestedEntry<Validated, Output>\n> &\n\tAsyncIterable<RequestedEntry<Validated, Output>> & {\n\t\t/**\n\t\t * Call `refresh` on all queries selected by this `requested` invocation.\n\t\t * This is identical to:\n\t\t * ```ts\n\t\t * import { requested } from '$app/server';\n\t\t *\n\t\t * for await (const { query } of requested(getPost, ...)) {\n\t\t *   void query.refresh();\n\t\t * }\n\t\t * ```\n\t\t */\n\t\trefreshAll: () => Promise<void>;\n\t};\n```\n\nExample:\n```text\ninterface Redirect {…}\n```\n\nExample:\n```text\nstatus: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;\n```\n\nExample:\n```text\nlocation: string;\n```\n\nExample:\n```text\ntype RemoteCommand<Input, Output> = {\n\t(\n\t\targ: undefined extends Input ? Input | void : Input\n\t): Promise<Output> & {\n\t\tupdates(\n\t\t\t...updates: RemoteQueryUpdate[]\n\t\t): Promise<Output>;\n\t};\n\t/** The number of pending command executions */\n\tget pending(): number;\n};\n```\n\nExample:\n```text\ntype RemoteForm<\n\tInput extends RemoteFormInput | void,\n\tOutput\n> = {\n\t/** Attachment that sets up an event handler that intercepts the form submission on the client to prevent a full page reload */\n\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\tmethod: 'POST';\n\t/** The URL to send the form to. */\n\taction: string;\n\t/** The `<form>` element this instance is currently attached to, if any. */\n\tget element(): HTMLFormElement | null;\n\t/** Submit the currently attached form programmatically. */\n\tsubmit(): Promise<boolean> & {\n\t\tupdates: (\n\t\t\t...updates: RemoteQueryUpdate[]\n\t\t) => Promise<boolean>;\n\t};\n\t/** Use the `enhance` method to influence what happens when the form is submitted. */\n\tenhance(\n\t\tcallback: RemoteFormEnhanceCallback<Input, Output>\n\t): {\n\t\tmethod: 'POST';\n\t\taction: string;\n\t\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\t};\n\t/**\n\t * Create an instance of the form for the given `id`.\n\t * The `id` is stringified and used for deduplication to potentially reuse existing instances.\n\t * Useful when you have multiple forms that use the same remote form action, for example in a loop.\n\t * ```svelte\n\t * {#each todos as todo}\n\t *\t{@const todoForm = updateTodo.for(todo.id)}\n\t *\t<form {...todoForm}>\n\t *\t\t{#if todoForm.result?.invalid}<p>Invalid data</p>{/if}\n\t *\t\t...\n\t *\t</form>\n\t *\t{/each}\n\t * ```\n\t */\n\tfor(\n\t\tid: ExtractId<Input>\n\t): Omit<RemoteForm<Input, Output>, 'for'>;\n\t/** Preflight checks */\n\tpreflight(\n\t\tschema: StandardSchemaV1<Input, any>\n\t): RemoteForm<Input, Output>;\n\t/** Validate the form contents programmatically */\n\tvalidate(options?: {\n\t\t/** Set this to `true` to also show validation issues of fields that haven't been touched yet. */\n\t\tincludeUntouched?: boolean;\n\t\t/** Set this to `true` to only run the `preflight` validation. */\n\t\tpreflightOnly?: boolean;\n\t}): Promise<void>;\n\t/** The result of the form submission */\n\tget result(): Output | undefined;\n\t/** The number of pending submissions */\n\tget pending(): number;\n\t/** True if the form has been submitted at least once */\n\tget submitted(): boolean;\n\t/** Access form fields using object notation */\n\tfields: RemoteFormFieldsRoot<Input>;\n};\n```\n\nExample:\n```text\ntype RemoteFormEnhanceCallback<\n\tInput extends RemoteFormInput | void =\n\t\tRemoteFormInput | void,\n\tOutput = any\n> = (\n\tform: RemoteFormEnhanceInstance<Input, Output>\n) => MaybePromise<void>;\n```\n\nExample:\n```text\ntype RemoteFormEnhanceInstance<\n\tInput extends RemoteFormInput | void =\n\t\tRemoteFormInput | void,\n\tOutput = any\n> = Omit<\n\tRemoteForm<Input, Output>,\n\t'enhance' | 'element'\n> & {\n\treadonly element: HTMLFormElement;\n};\n```\n\nExample:\n```text\ntype RemoteFormField<Value extends RemoteFormFieldValue> =\n\tRemoteFormFieldMethods<Value> & {\n\t\t/**\n\t\t * Returns an object that can be spread onto an input element with the correct type attribute,\n\t\t * aria-invalid attribute if the field is invalid, and appropriate value/checked property getters/setters.\n\t\t * @example\n\t\t * ```svelte\n\t\t * <input {...myForm.fields.myString.as('text')} />\n\t\t * <input {...myForm.fields.myNumber.as('number')} />\n\t\t * <input {...myForm.fields.myBoolean.as('checkbox')} />\n\t\t * ```\n\t\t */\n\t\tas<T extends RemoteFormFieldType<Value>>(\n\t\t\t...args: AsArgs<T, Value>\n\t\t): InputElementProps<T>;\n\t};\n```\n\nExample:\n```text\ntype RemoteFormFieldType<T> = {\n\t[K in keyof InputTypeMap]: T extends InputTypeMap[K]\n\t\t? K\n\t\t: never;\n}[keyof InputTypeMap];\n```\n\nExample:\n```text\ntype RemoteFormFieldValue =\n\t| string\n\t| string[]\n\t| number\n\t| boolean\n\t| File\n\t| File[];\n```\n\nExample:\n```text\ntype RemoteFormFields<T> =\n\tWillRecurseIndefinitely<T> extends true\n\t\t? RecursiveFormFields\n\t\t: NonNullable<T> extends\n\t\t\t\t\t| string\n\t\t\t\t\t| number\n\t\t\t\t\t| boolean\n\t\t\t\t\t| File\n\t\t\t? RemoteFormField<NonNullable<T>>\n\t\t\t: // [NonNullable<T>] is used to prevent distributing over union while still allowing\n\t\t\t\t// nullable wrappers (e.g. `string[] | undefined` from a schema with `.default([])`)\n\t\t\t\t// to be treated as arrays; only the last condition should distribute over unions\n\t\t\t\t[NonNullable<T>] extends [string[] | File[]]\n\t\t\t\t? RemoteFormField<NonNullable<T>> & {\n\t\t\t\t\t\t[K in number]: RemoteFormField<\n\t\t\t\t\t\t\tNonNullable<T>[number]\n\t\t\t\t\t\t>;\n\t\t\t\t\t}\n\t\t\t\t: [NonNullable<T>] extends [Array<infer U>]\n\t\t\t\t\t? RemoteFormFieldContainer<NonNullable<T>> & {\n\t\t\t\t\t\t\t[K in number]: RemoteFormFields<U>;\n\t\t\t\t\t\t}\n\t\t\t\t\t: RemoteFormFieldContainer<T> & {\n\t\t\t\t\t\t\t[K in KeysOfUnion<T>]-?: RemoteFormFields<\n\t\t\t\t\t\t\t\tValueOfUnionKey<T, K>\n\t\t\t\t\t\t\t>;\n\t\t\t\t\t\t};\n```\n\nExample:\n```text\ninterface RemoteFormInput {…}\n```\n\nExample:\n```text\n[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput> | undefined;\n```\n\nExample:\n```text\ninterface RemoteFormIssue {…}\n```\n\nExample:\n```text\nmessage: string;\n```\n\nExample:\n```text\npath: Array<string | number>;\n```\n\nExample:\n```text\ntype RemoteLiveQuery<T> = RemoteResource<T> &\n\tAsyncIterable<T> & {\n\t\t/** `true` if the live stream is currently connected. */\n\t\treadonly connected: boolean;\n\t\t/** `true` once the current live stream iterator is done. */\n\t\treadonly done: boolean;\n\t\t/** Reconnects the live stream immediately. */\n\t\treconnect(): Promise<void>;\n\t};\n```\n\nExample:\n```text\ntype RemoteLiveQueryFunction<\n\tInput,\n\tOutput,\n\t_Validated = Input\n> = (\n\targ: undefined extends Input ? Input | void : Input\n) => RemoteLiveQuery<Output>;\n```\n\nExample:\n```text\ntype RemotePrerenderFunction<Input, Output> = (\n\targ: undefined extends Input ? Input | void : Input\n) => RemoteResource<Output>;\n```\n\nExample:\n```text\ntype RemoteQuery<T> = RemoteResource<T> & {\n\t/**\n\t * On the client, this function will update the value of the query without re-fetching it.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the specified data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\tset(value: T): void;\n\t/**\n\t * On the client, this function will re-fetch the query from the server.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the refreshed data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\trefresh(): Promise<void>;\n\t/**\n\t * Temporarily override a query's value during a [single-flight mutation](https://svelte.dev/docs/kit/remote-functions#Single-flight-mutations) to provide optimistic updates.\n\t *\n\t * ```svelte\n\t * <script>\n\t *   import { getTodos, addTodo } from './todos.remote.js';\n\t *   const todos = getTodos();\n\t * </script>\n\t *\n\t * <form {...addTodo.enhance(async (form) => {\n\t *   await form.submit().updates(\n\t *     todos.withOverride((todos) => [...todos, { text: form.fields.text.value() }])\n\t *   );\n\t * })}>\n\t *   <input type=\"text\" name=\"text\" />\n\t *   <button type=\"submit\">Add Todo</button>\n\t * </form>\n\t * ```\n\t */\n\twithOverride(\n\t\tupdate: (current: T) => T\n\t): RemoteQueryOverride;\n};\n```\n\nExample:\n```text\ntype RemoteQueryFunction<\n\tInput,\n\tOutput,\n\t_Validated = Input\n> = (\n\targ: undefined extends Input ? Input | void : Input\n) => RemoteQuery<Output>;\n```\n\nExample:\n```text\ntype RemoteQueryOverride = () => void;\n```\n\nExample:\n```text\ntype RemoteQueryUpdate =\n\t| RemoteQuery<any>\n\t| RemoteLiveQuery<any>\n\t| RemoteQueryFunction<any, any>\n\t| RemoteLiveQueryFunction<any, any>\n\t| RemoteQueryOverride;\n```\n\nExample:\n```text\ntype RemoteResource<T> = Promise<T> & {\n\t/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */\n\tget error(): any;\n\t/** `true` before the first result is available and during refreshes */\n\tget loading(): boolean;\n} & (\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): undefined;\n\t\t\t\tready: false;\n\t\t  }\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): T;\n\t\t\t\tready: true;\n\t\t  }\n\t);\n```\n\nExample:\n```text\ninterface RequestEvent<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {…}\n```\n\nExample:\n```text\ncookies: Cookies;\n```\n\nExample:\n```text\ngetClientAddress: () => string;\n```\n\nExample:\n```text\nlocals: App.Locals;\n```\n\nExample:\n```text\nplatform: Readonly<App.Platform> | undefined;\n```\n\nExample:\n```text\nrequest: Request;\n```\n\nExample:\n```text\nisDataRequest: boolean;\n```\n\nExample:\n```text\nisSubRequest: boolean;\n```\n\nExample:\n```text\nisRemoteRequest: boolean;\n```\n\nExample:\n```text\ntype RequestHandler<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<Response>;\n```\n\nExample:\n```text\ntype RequestedEntry<Validated, Output> = {\n\targ: Validated;\n\tquery: RemoteQuery<Output>;\n};\n```\n\nExample:\n```text\ntype RequestedResult<Validated, Output> =\n\t| QueryRequestedResult<Validated, Output>\n\t| LiveQueryRequestedResult<Validated, Output>;\n```\n\nExample:\n```text\ntype Reroute = (event: {\n\turl: URL;\n\tfetch: typeof fetch;\n}) => MaybePromise<void | string>;\n```\n\nExample:\n```text\ninterface ResolveOptions {…}\n```\n\nExample:\n```text\ntransformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;\n```\n\nExample:\n```text\nfilterSerializedResponseHeaders?: (name: string, value: string) => boolean;\n```\n\nExample:\n```text\npreload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }) => boolean;\n```\n\nExample:\n```text\ninterface RouteDefinition<Config = any> {…}\n```\n\nExample:\n```text\nid: string;\n```\n\nExample:\n```text\napi: {\n\tmethods: Array<HttpMethod | '*'>;\n};\n```\n\nExample:\n```text\npage: {\n\tmethods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;\n};\n```\n\nExample:\n```text\npattern: RegExp;\n```\n\nExample:\n```text\nprerender: PrerenderOption;\n```\n\nExample:\n```text\nsegments: RouteSegment[];\n```\n\nExample:\n```text\nmethods: Array<HttpMethod | '*'>;\n```\n\nExample:\n```text\nconfig: Config;\n```\n\nExample:\n```text\ninterface SSRManifest {…}\n```\n\nExample:\n```text\nappDir: string;\n```\n\nExample:\n```text\nappPath: string;\n```\n\nExample:\n```text\nassets: Set<string>;\n```\n\nExample:\n```text\nmimeTypes: Record<string, string>;\n```\n\nExample:\n```text\n_: {…}\n```\n\nExample:\n```text\nclient: BuildData['client'];\n```\n\nExample:\n```text\nnodes: SSRNodeLoader[];\n```\n\nExample:\n```text\nremotes: Record<string, () => Promise<any>>;\n```\n\nExample:\n```text\nroutes: SSRRoute[];\n```\n\nExample:\n```text\nprerendered_routes: Set<string>;\n```\n\nExample:\n```text\nmatchers: () => Promise<Record<string, ParamMatcher>>;\n```\n\nExample:\n```text\nserver_assets: Record<string, number>;\n```\n\nExample:\n```text\ntype ServerInit = () => MaybePromise<void>;\n```\n\nExample:\n```text\ninterface ServerInitOptions {…}\n```\n\nExample:\n```text\nenv: Record<string, string>;\n```\n\nExample:\n```text\nread?: (file: string) => MaybePromise<ReadableStream | null>;\n```\n\nExample:\n```text\ntype ServerLoad<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: ServerLoadEvent<Params, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\nExample:\n```text\ninterface ServerLoadEvent<\n\tParams extends AppLayoutParams<'/'> =\n\t\tAppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends RequestEvent<Params, RouteId> {…}\n```\n\nExample:\n```text\ndepends: (...deps: string[]) => void;\n```\n\nExample:\n```text\ninterface Snapshot<T = any> {…}\n```\n\nExample:\n```text\ncapture: () => T;\n```\n\nExample:\n```text\nrestore: (snapshot: T) => void;\n```\n\nExample:\n```text\ntype SubmitFunction<\n\tSuccess extends Record<string, unknown> | undefined =\n\t\tRecord<string, any>,\n\tFailure extends Record<string, unknown> | undefined =\n\t\tRecord<string, any>\n> = (input: {\n\taction: URL;\n\tformData: FormData;\n\tformElement: HTMLFormElement;\n\tcontroller: AbortController;\n\tsubmitter: HTMLElement | null;\n\tcancel: () => void;\n}) => MaybePromise<\n\t| void\n\t| ((opts: {\n\t\t\tformData: FormData;\n\t\t\tformElement: HTMLFormElement;\n\t\t\taction: URL;\n\t\t\tresult: ActionResult<Success, Failure>;\n\t\t\t/**\n\t\t\t * Call this to get the default behavior of a form submission response.\n\t\t\t * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.\n\t\t\t * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.\n\t\t\t */\n\t\t\tupdate: (options?: {\n\t\t\t\treset?: boolean;\n\t\t\t\tinvalidateAll?: boolean;\n\t\t\t}) => Promise<void>;\n\t  }) => MaybePromise<void>)\n>;\n```\n\nExample:\n```text\nimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};type Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};class MyCustomTypeMyCustomType.data: anyconst transport: Transporttype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyclass MyCustomTypevalue: MyCustomTypeMyCustomType.data: anyTransporter<any, any>.decode: (data: any) => anydata: anyconstructor MyCustomType(): MyCustomTypedata: any\n```\n\nExample:\n```text\ntype Transport = {\n    [x: string]: Transporter<any, any>;\n}\n```\n\nExample:\n```text\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};\n```\n\nExample:\n```text\ntype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}\n```\n\nExample:\n```text\ntype Transport = Record<string, Transporter>;\n```\n\nExample:\n```text\ninterface Transporter<\n\tT = any,\n\tU = Exclude<\n\t\tany,\n\t\tfalse | 0 | '' | null | undefined | typeof NaN\n\t>\n> {…}\n```\n\nExample:\n```text\nencode: (value: T) => false | U;\n```\n\nExample:\n```text\ndecode: (data: U) => T;\n```\n\nExample:\n```text\ninterface ValidationError {…}\n```\n\nExample:\n```text\nissues: StandardSchemaV1.Issue[];\n```\n\nExample:\n```text\ninterface AdapterEntry {…}\n```\n\nExample:\n```text\nfilter(route: RouteDefinition): boolean;\n```\n\nExample:\n```text\ncomplete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;\n```\n\nExample:\n```text\nnamespace Csp {\n\ttype ActionSource = 'strict-dynamic' | 'report-sample';\n\ttype BaseSource =\n\t\t| 'self'\n\t\t| 'unsafe-eval'\n\t\t| 'unsafe-hashes'\n\t\t| 'unsafe-inline'\n\t\t| 'unsafe-allow-redirects'\n\t\t| 'unsafe-webtransport-hashes'\n\t\t| 'wasm-unsafe-eval'\n\t\t| 'trusted-types-eval'\n\t\t| 'none';\n\ttype CryptoSource =\n\t\t`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;\n\ttype FrameSource =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| 'self'\n\t\t| 'none';\n\ttype HostNameScheme = `${string}.${string}` | 'localhost';\n\ttype HostSource =\n\t\t`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;\n\ttype HostProtocolSchemes = `${string}://` | '';\n\ttype HttpDelineator = '/' | '?' | '#' | '\\\\';\n\ttype PortScheme = `:${number}` | '' | ':*';\n\ttype SchemeSource =\n\t\t| 'http:'\n\t\t| 'https:'\n\t\t| 'ws:'\n\t\t| 'wss:'\n\t\t| 'data:'\n\t\t| 'mediastream:'\n\t\t| 'blob:'\n\t\t| 'filesystem:'\n\t\t| (`${string}:` & {});\n\ttype Source =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| CryptoSource\n\t\t| BaseSource;\n\ttype Sources = Source[];\n}\n```\n\nExample:\n```text\ninterface CspDirectives {…}\n```\n\nExample:\n```text\n'child-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'default-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\n'frame-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'worker-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'connect-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'font-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'img-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'manifest-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'media-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'object-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'prefetch-src'?: Csp.Sources;\n```\n\nExample:\n```text\n'script-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\n'script-src-elem'?: Csp.Sources;\n```\n\nExample:\n```text\n'script-src-attr'?: Csp.Sources;\n```\n\nExample:\n```text\n'style-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\n'style-src-elem'?: Csp.Sources;\n```\n\nExample:\n```text\n'style-src-attr'?: Csp.Sources;\n```\n\nExample:\n```text\n'base-uri'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\nsandbox?: Array<\n| 'allow-downloads-without-user-activation'\n| 'allow-forms'\n| 'allow-modals'\n| 'allow-orientation-lock'\n| 'allow-pointer-lock'\n| 'allow-popups'\n| 'allow-popups-to-escape-sandbox'\n| 'allow-presentation'\n| 'allow-same-origin'\n| 'allow-scripts'\n| 'allow-storage-access-by-user-activation'\n| 'allow-top-navigation'\n| 'allow-top-navigation-by-user-activation'\n>;\n```\n\nExample:\n```text\n'form-action'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\n'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;\n```\n\nExample:\n```text\n'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\nExample:\n```text\n'report-uri'?: string[];\n```\n\nExample:\n```text\n'report-to'?: string[];\n```\n\nExample:\n```text\n'require-trusted-types-for'?: Array<'script'>;\n```\n\nExample:\n```text\n'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;\n```\n\nExample:\n```text\n'upgrade-insecure-requests'?: boolean;\n```\n\nExample:\n```text\n'require-sri-for'?: Array<'script' | 'style' | 'script style'>;\n```\n\nExample:\n```text\n'block-all-mixed-content'?: boolean;\n```\n\nExample:\n```text\n'plugin-types'?: Array<`${string}/${string}` | 'none'>;\n```\n\nExample:\n```text\nreferrer?: Array<\n| 'no-referrer'\n| 'no-referrer-when-downgrade'\n| 'origin'\n| 'origin-when-cross-origin'\n| 'same-origin'\n| 'strict-origin'\n| 'strict-origin-when-cross-origin'\n| 'unsafe-url'\n| 'none'\n>;\n```\n\nExample:\n```text\ntype DeepPartial<T> = T extends\n\t| Record<PropertyKey, unknown>\n\t| unknown[]\n\t? {\n\t\t\t[K in keyof T]?: T[K] extends\n\t\t\t\t| Record<PropertyKey, unknown>\n\t\t\t\t| unknown[]\n\t\t\t\t? DeepPartial<T[K]>\n\t\t\t\t: T[K];\n\t\t}\n\t: T | undefined;\n```\n\nExample:\n```text\ntype HasNonOptionalBoolean<T> =\n\tIsAny<T> extends true\n\t\t? never\n\t\t: [T] extends [boolean]\n\t\t\t? true\n\t\t\t: T extends Array<infer U>\n\t\t\t\t? HasNonOptionalBoolean<U>\n\t\t\t\t: T extends Record<string, any>\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t[K in keyof T]: HasNonOptionalBoolean<T[K]>;\n\t\t\t\t\t\t}[keyof T]\n\t\t\t\t\t: never;\n```\n\nExample:\n```text\ntype HttpMethod =\n\t| 'GET'\n\t| 'HEAD'\n\t| 'POST'\n\t| 'PUT'\n\t| 'DELETE'\n\t| 'PATCH'\n\t| 'OPTIONS';\n```\n\nExample:\n```text\ntype IsAny<T> = 0 extends 1 & T ? true : false;\n```\n\nExample:\n```text\ninterface Logger {…}\n```\n\nExample:\n```text\n(msg: string): void;\n```\n\nExample:\n```text\nsuccess(msg: string): void;\n```\n\nExample:\n```text\nerror(msg: string): void;\n```\n\nExample:\n```text\nwarn(msg: string): void;\n```\n\nExample:\n```text\nminor(msg: string): void;\n```\n\nExample:\n```text\ninfo(msg: string): void;\n```\n\nExample:\n```text\ntype MaybePromise<T> = T | Promise<T>;\n```\n\nExample:\n```text\ninterface PrerenderEntryGeneratorMismatchHandler {…}\n```\n\nExample:\n```text\n(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;\n```\n\nExample:\n```text\ntype PrerenderEntryGeneratorMismatchHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderEntryGeneratorMismatchHandler;\n```\n\nExample:\n```text\ninterface PrerenderHttpErrorHandler {…}\n```\n\nExample:\n```text\n(details: {\nstatus: number;\npath: string;\nreferrer: string | null;\nreferenceType: 'linked' | 'fetched';\nmessage: string;\n}): void;\n```\n\nExample:\n```text\ntype PrerenderHttpErrorHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderHttpErrorHandler;\n```\n\nExample:\n```text\ninterface PrerenderInvalidUrlHandler {…}\n```\n\nExample:\n```text\n(details: { href: string; referrer: string | null; message: string }): void;\n```\n\nExample:\n```text\ntype PrerenderInvalidUrlHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderInvalidUrlHandler;\n```\n\nExample:\n```text\ntype PrerenderMap = Map<string, PrerenderOption>;\n```\n\nExample:\n```text\ninterface PrerenderMissingIdHandler {…}\n```\n\nExample:\n```text\n(details: { path: string; id: string; referrers: string[]; message: string }): void;\n```\n\nExample:\n```text\ntype PrerenderMissingIdHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderMissingIdHandler;\n```\n\nExample:\n```text\ninterface PrerenderUnseenRoutesHandler {…}\n```\n\nExample:\n```text\n(details: { routes: string[]; message: string }): void;\n```\n\nExample:\n```text\ntype PrerenderUnseenRoutesHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderUnseenRoutesHandler;\n```\n\nExample:\n```text\ninterface Prerendered {…}\n```\n\nExample:\n```text\npages: Map<\nstring,\n{\n\t/** The location of the .html file relative to the output directory */\n\tfile: string;\n}\n>;\n```\n\nExample:\n```text\nassets: Map<\nstring,\n{\n\t/** The MIME type of the asset */\n\ttype: string;\n}\n>;\n```\n\nExample:\n```text\nredirects: Map<\nstring,\n{\n\tstatus: number;\n\tlocation: string;\n}\n>;\n```\n\nExample:\n```text\npaths: string[];\n```\n\nExample:\n```text\ninterface RequestOptions {…}\n```\n\nExample:\n```text\ngetClientAddress(): string;\n```\n\nExample:\n```text\nplatform?: App.Platform;\n```\n\nExample:\n```text\ninterface RouteSegment {…}\n```\n\nExample:\n```text\ncontent: string;\n```\n\nExample:\n```text\ndynamic: boolean;\n```\n\nExample:\n```text\nrest: boolean;\n```\n\nExample:\n```text\ntype TrailingSlash = 'never' | 'always' | 'ignore';\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.283Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":326,"totalLines":3102,"estimatedTokens":18029}}181{"id":"doc-seo_sveltekit_docs-a801ea17","source":"documentation","title":"SEO • SvelteKit Docs","url":"https://svelte.dev/docs/kit/seo","text":"Example:\n```text\nexport async function function GET(): Promise<Response>GET() {\n\treturn new var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse(\n\t\t`\n\t\t<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n\t\t<urlset\n\t\t\txmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"\n\t\t\txmlns:xhtml=\"http://www.w3.org/1999/xhtml\"\n\t\t\txmlns:mobile=\"http://www.google.com/schemas/sitemap-mobile/1.0\"\n\t\t\txmlns:news=\"http://www.google.com/schemas/sitemap-news/0.9\"\n\t\t\txmlns:image=\"http://www.google.com/schemas/sitemap-image/1.1\"\n\t\t\txmlns:video=\"http://www.google.com/schemas/sitemap-video/1.1\"\n\t\t>\n\t\t\t<!-- <url> elements go here -->\n\t\t</urlset>`.String.trim(): stringRemoves the leading and trailing white space and line terminator characters from a string.\ntrim(),\n\t\t{\n\t\t\tResponseInit.headers?: HeadersInit | undefinedheaders: {\n\t\t\t\t'Content-Type': 'application/xml'\n\t\t\t}\n\t\t}\n\t);\n}function GET(): Promise<Response>var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseResponseString.trim(): stringResponseInit.headers?: HeadersInit | undefined\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\t// since <link rel=\"stylesheet\"> isn't\n\t\t// allowed, inline all styles\n\t\tKitConfig.inlineStyleThreshold?: number | undefinedInline CSS inside a <style> block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the String.length property, to be inlined. All CSS files needed for the page that are smaller than this value are merged and inlined in a <style> block.\n This results in fewer initial requests and can improve your First Contentful Paint score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.\n@default0inlineStyleThreshold: var Infinity: numberInfinity\n\t}\n};\n\nexport default const config: Configconfig;const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.inlineStyleThreshold?: number | undefined<style><style>var Infinity: numberconst config: Config\n```\n\nExample:\n```text\nexport const const csr: falsecsr = false;const csr: false\n```\n\nExample:\n```text\n<html amp>\n...\n```\n\nExample:\n```text\nimport * as import ampamp from '@sveltejs/amp';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tlet let buffer: stringbuffer = '';\n\treturn await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {\n\t\t\tlet buffer: stringbuffer += html: stringhtml;\n\t\t\tif (done: booleandone) return import ampamp.function transform(html: string): stringtransform(let buffer: stringbuffer);\n\t\t}\n\t});\n}import ampfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>let buffer: stringresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringdone: booleanlet buffer: stringhtml: stringdone: booleanimport ampfunction transform(html: string): stringlet buffer: string\n```\n\nExample:\n```text\nfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefined\n```\n\nExample:\n```text\nimport * as import ampamp from '@sveltejs/amp';\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tlet let buffer: stringbuffer = '';\n\treturn await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {\n\t\t\tlet buffer: stringbuffer += html: stringhtml;\n\t\t\tif (done: booleandone) return import ampamp.function transform(html: string): stringtransform(let buffer: stringbuffer);\n\t\t}\n\t});\n};import amptype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>let buffer: stringresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringdone: booleanlet buffer: stringhtml: stringdone: booleanimport ampfunction transform(html: string): stringlet buffer: string\n```\n\nExample:\n```text\ntype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>\n```\n\nExample:\n```text\nimport * as import ampamp from '@sveltejs/amp';\nimport module \"dropcss\"dropcss from 'dropcss';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tlet let buffer: stringbuffer = '';\n\n\treturn await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {\n\t\t\tlet buffer: stringbuffer += html: stringhtml;\n\n\t\t\tif (done: booleandone) {\n\t\t\t\tlet let css: stringcss = '';\n\t\t\t\tconst const markup: stringmarkup = import ampamp\n\t\t\t\t\t.function transform(html: string): stringtransform(let buffer: stringbuffer)\n\t\t\t\t\t.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('⚡', 'amp') // dropcss can't handle this character\n\t\t\t\t\t.String.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)Replaces text in a string, using an object that supports replacement within a string.\n@paramsearchValue A object can search for and replace matches within a string.@paramreplacer A function that returns the replacement text.replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match: stringmatch, attributes: anyattributes, contents: anycontents) => {\n\t\t\t\t\t\tlet css: stringcss = contents: anycontents;\n\t\t\t\t\t\treturn `<style amp-custom${attributes: anyattributes}></style>`;\n\t\t\t\t\t});\n\n\t\t\t\tlet css: stringcss = module \"dropcss\"dropcss({ css: stringcss, html: stringhtml: const markup: stringmarkup }).css;\n\t\t\t\treturn const markup: stringmarkup.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('</style>', `${let css: stringcss}</style>`);\n\t\t\t}\n\t\t}\n\t});\n}\nimport ampmodule \"dropcss\"function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>let buffer: stringresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringdone: booleanlet buffer: stringhtml: stringdone: booleanlet css: stringconst markup: stringimport ampfunction transform(html: string): stringlet buffer: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyString.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)String.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)match: stringattributes: anycontents: anylet css: stringcontents: anyattributes: anylet css: stringmodule \"dropcss\"css: stringhtml: stringconst markup: stringconst markup: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgylet css: string\n```\n\nExample:\n```text\nString.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)\n```\n\nExample:\n```text\nimport * as import ampamp from '@sveltejs/amp';\nimport module \"dropcss\"dropcss from 'dropcss';\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tlet let buffer: stringbuffer = '';\n\n\treturn await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {\n\t\t\tlet buffer: stringbuffer += html: stringhtml;\n\n\t\t\tif (done: booleandone) {\n\t\t\t\tlet let css: stringcss = '';\n\t\t\t\tconst const markup: stringmarkup = import ampamp\n\t\t\t\t\t.function transform(html: string): stringtransform(let buffer: stringbuffer)\n\t\t\t\t\t.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('⚡', 'amp') // dropcss can't handle this character\n\t\t\t\t\t.String.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)Replaces text in a string, using an object that supports replacement within a string.\n@paramsearchValue A object can search for and replace matches within a string.@paramreplacer A function that returns the replacement text.replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match: stringmatch, attributes: anyattributes, contents: anycontents) => {\n\t\t\t\t\t\tlet css: stringcss = contents: anycontents;\n\t\t\t\t\t\treturn `<style amp-custom${attributes: anyattributes}></style>`;\n\t\t\t\t\t});\n\n\t\t\t\tlet css: stringcss = module \"dropcss\"dropcss({ css: stringcss, html: stringhtml: const markup: stringmarkup }).css;\n\t\t\t\treturn const markup: stringmarkup.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('</style>', `${let css: stringcss}</style>`);\n\t\t\t}\n\t\t}\n\t});\n};import ampmodule \"dropcss\"type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>let buffer: stringresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringdone: booleanlet buffer: stringhtml: stringdone: booleanlet css: stringconst markup: stringimport ampfunction transform(html: string): stringlet buffer: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyString.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)String.replace(searchValue: {\n    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;\n}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)match: stringattributes: anycontents: anylet css: stringcontents: anyattributes: anylet css: stringmodule \"dropcss\"css: stringhtml: stringconst markup: stringconst markup: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgylet css: string\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.284Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":319,"estimatedTokens":5469}}182{"id":"doc-advanced_routing_sveltekit_docs-76d2b98f","source":"documentation","title":"Advanced routing • SvelteKit Docs","url":"https://svelte.dev/docs/kit/advanced-routing","text":"Example:\n```text\n/[org]/[repo]/tree/[branch]/[...file]\n```\n\nExample:\n```text\n{\n\torg: 'sveltejs',\n\trepo: 'kit',\n\tbranch: 'main',\n\tfile: 'documentation/docs/04-advanced-routing.md'\n}\n```\n\nExample:\n```text\nsrc/routes/\n├ marx-brothers/\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\nExample:\n```text\nsrc/routes/\n├ marx-brothers/\n| ├ [...path]/\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event) {\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not Found');\n}function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event) => {\n\tfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, 'Not Found');\n};function error(status: number, body: App.Error): never (+1 overload)handleErrortype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\n/**\n * @param {string} param\n * @return {param is ('apple' | 'orange')}\n * @satisfies {import('@sveltejs/kit').ParamMatcher}\n */\nexport function function match(param: string): param is (\"apple\" | \"orange\")@paramparam @return@satisfies{import('@sveltejs/kit').ParamMatcher}match(param: string@paramparam param) {\n\treturn param: string@paramparam param === 'apple' || param: string@paramparam param === 'orange';\n}function match(param: string): param is (\"apple\" | \"orange\")param: stringparam: stringparam: string\n```\n\nExample:\n```text\nimport type { type ParamMatcher = (param: string) => booleanThe shape of a param matcher. See matching for more info.\nreferenceParamMatcher } from '@sveltejs/kit';\nexport const const match: (param: string) => param is (\"apple\" | \"orange\")match = ((param: stringparam: string): param: stringparam is ('apple' | 'orange') => {\n\treturn param: stringparam === 'apple' || param: stringparam === 'orange';\n}) satisfies type ParamMatcher = (param: string) => booleanThe shape of a param matcher. See matching for more info.\nreferenceParamMatcher;type ParamMatcher = (param: string) => booleanconst match: (param: string) => param is (\"apple\" | \"orange\")param: stringparam: stringparam: stringparam: stringtype ParamMatcher = (param: string) => boolean\n```\n\nExample:\n```text\nsrc/routes/fruits/[page=fruit]\n```\n\nExample:\n```text\nsrc/routes/[...catchall]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/foo-abc/+page.svelte\n```\n\nExample:\n```text\nsrc/routes/foo-abc/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/[...catchall]/+page.svelte\n```\n\nExample:\n```text\n':'.String.charCodeAt(index: number): numberReturns the Unicode value of the character at the specified location.\n@paramindex The zero-based index of the desired character. If there is no character at the specified index, NaN is returned.charCodeAt(0).Number.toString(radix?: number): stringReturns a string representation of an object.\n@paramradix Specifies a radix for converting numeric values to strings. This value is only used for numbers.toString(16); // '3a', hence '[x+3a]'String.charCodeAt(index: number): numberNumber.toString(radix?: number): string\n```\n\nExample:\n```text\nsrc/routes/[u+d83e][u+dd2a]/+page.svelte\nsrc/routes/🤪/+page.svelte\n```\n\nExample:\n```text\nsrc/routes/\n│ (app)/\n│ ├ dashboard/\n│ ├ item/\n│ └ +layout.svelte\n│ (marketing)/\n│ ├ about/\n│ ├ testimonials/\n│ └ +layout.svelte\n├ admin/\n└ +layout.svelte\n```\n\nExample:\n```text\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page.svelte\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nExample:\n```text\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page@(app).svelte\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nExample:\n```text\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte\n│ │ │ ├ +layout.svelte  // inherits from (app)/item/+layout@.svelte\n│ │ │ └ +page.svelte    // uses (app)/item/+layout@.svelte\n│ │ └ +layout@.svelte   // inherits from root layout, skipping (app)/+layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nExample:\n```text\n<script>\n\timport ReusableLayout from '$lib/ReusableLayout.svelte';\n\tlet { data, children } = $props();\n</script>\n\n<ReusableLayout {data}>\n\t{@render children()}\n</ReusableLayout>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport ReusableLayout from '$lib/ReusableLayout.svelte';\n\tlet { data, children } = $props();\n</script>\n\n<ReusableLayout {data}>\n\t{@render children()}\n</ReusableLayout>\n```\n\nExample:\n```text\nimport { function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>reusableLoad } from '$lib/reusable-load-function';\n\n/** @type {import('./$types').PageLoad} */\nexport function function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event) {\n\t// Add additional logic here, if needed\n\treturn function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>reusableLoad(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event);\n}function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>function load(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>\n```\n\nExample:\n```text\nimport { function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>reusableLoad } from '$lib/reusable-load-function';\nimport type { type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';\n\nexport const const load: PageLoadload: type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event) => {\n\t// Add additional logic here, if needed\n\treturn function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>reusableLoad(event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>event);\n};function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>type PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageLoadtype PageLoad = (event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>function reusableLoad(event: import(\"@sveltejs/kit\").LoadEvent): Promise<Record<string, any>>event: LoadEvent<Record<string, any>, Record<string, any> | null, Record<string, any>, string | null>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.285Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":22,"totalLines":256,"estimatedTokens":3209}}183{"id":"doc-breakpoint_debugging_sveltekit_docs-23bdf34d","source":"documentation","title":"Breakpoint Debugging • SvelteKit Docs","url":"https://svelte.dev/docs/kit/debugging","text":"Example:\n```text\n{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [\n\t\t{\n\t\t\t\"command\": \"npm run dev\",\n\t\t\t\"name\": \"Run development server\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"type\": \"node-terminal\"\n\t\t}\n\t]\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.285Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":16,"estimatedTokens":52}}184{"id":"doc-sveltejs_kit_env_sveltekit_docs-57e23c93","source":"documentation","title":"@sveltejs/kit/env • SvelteKit Docs","url":"https://svelte.dev/docs/kit/@sveltejs-kit-env","text":"Example:\n```text\nimport { function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): TUtility for defining environment variables,\nwhich are made available via $app/env/public and $app/env/private.\nreferencedefineEnvVars } from '@sveltejs/kit/env';function defineEnvVars<T extends Record<string, EnvVarConfig<any>>>(variables: T): T$app/env/public$app/env/private\n```\n\nExample:\n```text\nfunction defineEnvVars<\n\tT extends Record<\n\t\tstring,\n\t\timport('@sveltejs/kit').EnvVarConfig<any>\n\t>\n>(variables: T): T;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.286Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":18,"estimatedTokens":137}}185{"id":"doc-observability_sveltekit_docs-a5ec6d06","source":"documentation","title":"Observability • SvelteKit Docs","url":"https://svelte.dev/docs/kit/observability","text":"Example:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\nexperimental: {\n\t\t\ttracing?: {\n    server?: boolean;\n} | undefinedOptions for enabling server-side OpenTelemetry tracing for SvelteKit operations including the handle hook, load functions, form actions, and remote functions.\n@default{ server: false, serverFile: false }@since2.31.0tracing: {\n\t\t\t\tserver?: boolean | undefinedEnables server-side OpenTelemetry span emission for SvelteKit operations including the handle hook, load functions, form actions, and remote functions.\n@defaultfalse@since2.31.0server: true\n\t\t\t},\n\t\t\tinstrumentation?: {\n    server?: boolean;\n} | undefined@since2.31.0instrumentation: {\n\t\t\t\tserver?: boolean | undefinedEnables instrumentation.server.js for tracing and observability instrumentation.\n@defaultfalse@since2.31.0server: true\n\t\t\t}\n\t\t}\n\t}\n};\n\nexport default const config: Configconfig;const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedtracing?: {\n    server?: boolean;\n} | undefinedtracing?: {\n    server?: boolean;\n} | undefinedhandleloadserver?: boolean | undefinedhandleloadinstrumentation?: {\n    server?: boolean;\n} | undefinedinstrumentation?: {\n    server?: boolean;\n} | undefinedserver?: boolean | undefinedinstrumentation.server.jsconst config: Config\n```\n\nExample:\n```text\nKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefined\n```\n\nExample:\n```text\ntracing?: {\n    server?: boolean;\n} | undefined\n```\n\nExample:\n```text\ninstrumentation?: {\n    server?: boolean;\n} | undefined\n```\n\nExample:\n```text\nimport { function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent } from '$app/server';\nimport { function getAuthenticatedUser(): Promise<{\n    id: string;\n}>getAuthenticatedUser } from '$lib/auth-core';\n\nasync function function authenticate(): Promise<void>authenticate() {\n\tconst const user: {\n    id: string;\n}user = await function getAuthenticatedUser(): Promise<{\n    id: string;\n}>getAuthenticatedUser();\n\tconst const event: RequestEvent<Record<string, string>, string | null>event = function getRequestEvent(): RequestEventReturns the current RequestEvent. Can be used inside server hooks, server load functions, actions, and endpoints (and functions called by them).\nIn environments without AsyncLocalStorage, this must be called synchronously (i.e. not after an await).\n@since2.20.0referencegetRequestEvent();\n\tconst event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.tracing: {\n    enabled: boolean;\n    root: any;\n    current: any;\n}Access to spans for tracing. If tracing is not enabled, these spans will do nothing.\n@since2.31.0tracing.root: anyThe root span for the request. This span is named sveltekit.handle.root.\nroot.setAttribute('userId', const user: {\n    id: string;\n}user.id: stringid);\n}function getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitfunction getAuthenticatedUser(): Promise<{\n    id: string;\n}>function getAuthenticatedUser(): Promise<{\n    id: string;\n}>function authenticate(): Promise<void>const user: {\n    id: string;\n}const user: {\n    id: string;\n}function getAuthenticatedUser(): Promise<{\n    id: string;\n}>function getAuthenticatedUser(): Promise<{\n    id: string;\n}>const event: RequestEvent<Record<string, string>, string | null>function getRequestEvent(): RequestEventRequestEventloadAsyncLocalStorageawaitconst event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.tracing: {\n    enabled: boolean;\n    root: any;\n    current: any;\n}RequestEvent<Record<string, string>, string | null>.tracing: {\n    enabled: boolean;\n    root: any;\n    current: any;\n}root: anysveltekit.handle.rootconst user: {\n    id: string;\n}const user: {\n    id: string;\n}id: string\n```\n\nExample:\n```text\nfunction getAuthenticatedUser(): Promise<{\n    id: string;\n}>\n```\n\nExample:\n```text\nconst user: {\n    id: string;\n}\n```\n\nExample:\n```text\nRequestEvent<Record<string, string>, string | null>.tracing: {\n    enabled: boolean;\n    root: any;\n    current: any;\n}\n```\n\nExample:\n```text\nnpm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle\n```\n\nExample:\n```text\nimport { import NodeSDKNodeSDK } from '@opentelemetry/sdk-node';\nimport { import getNodeAutoInstrumentationsgetNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';\nimport { import OTLPTraceExporterOTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';\nimport { import createAddHookMessageChannelcreateAddHookMessageChannel } from 'import-in-the-middle';\nimport { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)Register a module that exports hooks that customize Node.js module\nresolution and loading behavior. See\nCustomization hooks.\nThis feature requires --allow-worker if used with the\nPermission Model.\n@sincev20.6.0, v18.19.0@paramspecifier Customization hooks to be registered; this should be\nthe same string that would be passed to import(), except that if it is\nrelative, it is resolved relative to parentURL.@paramparentURL f you want to resolve specifier relative to a base\nURL, such as import.meta.url, you can pass that URL here.register } from 'node:module';\n\nconst { const registerOptions: anyregisterOptions } = import createAddHookMessageChannelcreateAddHookMessageChannel();\nregister<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)Register a module that exports hooks that customize Node.js module\nresolution and loading behavior. See\nCustomization hooks.\nThis feature requires --allow-worker if used with the\nPermission Model.\n@sincev20.6.0, v18.19.0@paramspecifier Customization hooks to be registered; this should be\nthe same string that would be passed to import(), except that if it is\nrelative, it is resolved relative to parentURL.@paramparentURL f you want to resolve specifier relative to a base\nURL, such as import.meta.url, you can pass that URL here.register('import-in-the-middle/hook.mjs', import.meta.ImportMeta.url: stringThe absolute file: URL of the module.\nThis is defined exactly the same as it is in browsers providing the URL of the\ncurrent module file.\nThis enables useful patterns such as relative file loading:\nimport { readFileSync } from 'node:fs';\nconst buffer = readFileSync(new URL('./data.proto', import.meta.url));url, const registerOptions: anyregisterOptions);\n\nconst const sdk: anysdk = new import NodeSDKNodeSDK({\n\tserviceName: stringserviceName: 'test-sveltekit-tracing',\n\ttraceExporter: anytraceExporter: new import OTLPTraceExporterOTLPTraceExporter(),\n\tinstrumentations: any[]instrumentations: [import getNodeAutoInstrumentationsgetNodeAutoInstrumentations()]\n});\n\nconst sdk: anysdk.start();import NodeSDKimport getNodeAutoInstrumentationsimport OTLPTraceExporterimport createAddHookMessageChannelfunction register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)--allow-workerimport()parentURLspecifierimport.meta.urlconst registerOptions: anyimport createAddHookMessageChannelregister<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)--allow-workerimport()parentURLspecifierimport.meta.urlImportMeta.url: stringfile:import { readFileSync } from 'node:fs';\nconst buffer = readFileSync(new URL('./data.proto', import.meta.url));const registerOptions: anyconst sdk: anyimport NodeSDKserviceName: stringtraceExporter: anyimport OTLPTraceExporterinstrumentations: any[]import getNodeAutoInstrumentationsconst sdk: any\n```\n\nExample:\n```text\nimport { readFileSync } from 'node:fs';\nconst buffer = readFileSync(new URL('./data.proto', import.meta.url));\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.286Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":230,"estimatedTokens":2386}}186{"id":"doc-integrations_sveltekit_docs-a52027fd","source":"documentation","title":"Integrations • SvelteKit Docs","url":"https://svelte.dev/docs/kit/integrations","text":"Example:\n```text\n// svelte.config.js\nimport { function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: {\n    preprocess: PreprocessorGroup[];\n}config = {\n\tpreprocess: PreprocessorGroup[]preprocess: [\n\t\tfunction vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess({\n\t\t\tVitePreprocessOptions.style?: boolean | InlineConfig | ResolvedConfig | undefinedpreprocess style blocks with vite pipeline\nstyle: true,      // default value\n\t\t\tVitePreprocessOptions.script?: boolean | undefinedpreprocess script block with vite pipeline.\nSince svelte5 this is not needed for typescript anymore\n@defaultfalsescript: false     // default value\n\t\t})\n\t]\n};\n\nexport default const config: {\n    preprocess: PreprocessorGroup[];\n}config;function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupconst config: {\n    preprocess: PreprocessorGroup[];\n}const config: {\n    preprocess: PreprocessorGroup[];\n}preprocess: PreprocessorGroup[]function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupVitePreprocessOptions.style?: boolean | InlineConfig | ResolvedConfig | undefinedVitePreprocessOptions.script?: boolean | undefinedconst config: {\n    preprocess: PreprocessorGroup[];\n}const config: {\n    preprocess: PreprocessorGroup[];\n}\n```\n\nExample:\n```text\nconst config: {\n    preprocess: PreprocessorGroup[];\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.286Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":41,"estimatedTokens":374}}187{"id":"doc-errors_sveltekit_docs-633d25eb","source":"documentation","title":"Errors • SvelteKit Docs","url":"https://svelte.dev/docs/kit/errors","text":"Example:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) {\n\tconst const post: {\n    title: string;\n    content: string;\n} | undefinedpost = await module \"$lib/server/database\"db.function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>getPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug);\n\n\tif (!const post: {\n    title: string;\n    content: string;\n} | undefinedpost) {\n\t\tfunction error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, {\n\t\t\tApp.Error.message: stringmessage: 'Not found'\n\t\t});\n\t}\n\n\treturn { post: {\n    title: string;\n    content: string;\n}post };\n}function error(status: number, body: App.Error): never (+1 overload)handleErrormodule \"$lib/server/database\"function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n} | undefinedconst post: {\n    title: string;\n    content: string;\n} | undefinedmodule \"$lib/server/database\"function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n} | undefinedconst post: {\n    title: string;\n    content: string;\n} | undefinedfunction error(status: number, body: App.Error): never (+1 overload)handleErrorApp.Error.message: stringpost: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\nconst post: {\n    title: string;\n    content: string;\n} | undefined\n```\n\nExample:\n```text\nfunction getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>\n```\n\nExample:\n```text\npost: {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit';\nimport * as module \"$lib/server/database\"db from '$lib/server/database';\nimport type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad } from './$types';\n\nexport const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams }) => {\n\tconst const post: {\n    title: string;\n    content: string;\n} | undefinedpost = await module \"$lib/server/database\"db.function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>getPost(params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.slug);\n\n\tif (!const post: {\n    title: string;\n    content: string;\n} | undefinedpost) {\n\t\tfunction error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, {\n\t\t\tApp.Error.message: stringmessage: 'Not found'\n\t\t});\n\t}\n\n\treturn { post: {\n    title: string;\n    content: string;\n}post };\n};function error(status: number, body: App.Error): never (+1 overload)handleErrormodule \"$lib/server/database\"type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: PageServerLoadtype PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n} | undefinedconst post: {\n    title: string;\n    content: string;\n} | undefinedmodule \"$lib/server/database\"function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>function getPost(slug: string): Promise<{\n    title: string;\n    content: string;\n} | undefined>params: Record<string, any>/blog/[slug]{ slug: string }const post: {\n    title: string;\n    content: string;\n} | undefinedconst post: {\n    title: string;\n    content: string;\n} | undefinedfunction error(status: number, body: App.Error): never (+1 overload)handleErrorApp.Error.message: stringpost: {\n    title: string;\n    content: string;\n}post: {\n    title: string;\n    content: string;\n}\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.error.message}</h1>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.error.message}</h1>\n```\n\nExample:\n```text\nfunction error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(404, {\n\tApp.Error.message: stringmessage: 'Not found',\n\tApp.Error.code: stringcode: 'NOT_FOUND'\n});function error(status: number, body: App.Error): never (+1 overload)handleErrorApp.Error.message: stringApp.Error.code: string\n```\n\nExample:\n```text\nerror(404, { message: 'Not found' });\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).error(404, 'Not found');function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\n{ \"message\": \"Internal Error\" }\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\nexperimental: {\n\t\t\thandleRenderingErrors?: boolean | undefinedWhether to enable the experimental handling of rendering errors.\nWhen enabled, <svelte:boundary> is used to wrap components at each level\nwhere there’s an +error.svelte, rendering the error page if the component fails.\nIn addition, error boundaries also work on the server and the error object goes through handleError.\n@defaultfalsehandleRenderingErrors: true\n\t\t}\n\t}\n};\n\nexport default const config: Configconfig;const config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefinedhandleRenderingErrors?: boolean | undefined<svelte:boundary>+error.sveltehandleErrorconst config: Config\n```\n\nExample:\n```text\nKitConfig.experimental?: {\n    explicitEnvironmentVariables?: boolean;\n    tracing?: {\n        server?: boolean;\n    };\n    instrumentation?: {\n        server?: boolean;\n    };\n    remoteFunctions?: boolean;\n    forkPreloads?: boolean;\n    handleRenderingErrors?: boolean;\n} | undefined\n```\n\nExample:\n```text\n<script>\n\tlet { error } = $props();\n</script>\n\n<h1>{error.message}</h1>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\tlet { error } = $props();\n</script>\n\n<h1>{error.message}</h1>\n```\n\nExample:\n```text\n<svelte:boundary>\n\t...\n\t{#snippet failed(error: App.Error)}\n\t\t<!-- error went through handleError and is of type App.Error -->\n\t\t{error.message}\n\t{/snippet}\n</svelte:boundary>\n```\n\nExample:\n```text\n<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>%sveltekit.error.message%</title>\n\t</head>\n\t<body>\n\t\t<h1>My custom error page</h1>\n\t\t<p>Status: %sveltekit.status%</p>\n\t\t<p>Message: %sveltekit.error.message%</p>\n\t</body>\n</html>\n```\n\nExample:\n```text\ndeclare global {\n\tnamespace App {\n\t\tinterface interface App.ErrorDefines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Unexpected errors are handled by the handleError hooks which should return this shape.\nError {\n\t\t\tApp.Error.code: stringcode: string;\n\t\t\tApp.Error.id: stringid: string;\n\t\t}\n\t}\n}\n\nexport {};interface App.ErrorerrorhandleErrorApp.Error.code: stringApp.Error.id: string\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.287Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":354,"estimatedTokens":3748}}188{"id":"doc-accessibility_sveltekit_docs-bd5cc2fe","source":"documentation","title":"Accessibility • SvelteKit Docs","url":"https://svelte.dev/docs/kit/accessibility","text":"Example:\n```text\n<svelte:head>\n\t<title>Todo List</title>\n</svelte:head>\n```\n\nExample:\n```text\nimport { function afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.\nafterNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceafterNavigate } from '$app/navigation';\n\nfunction afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.\nafterNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceafterNavigate(() => {\n\t/** @type {HTMLElement | null} */\n\tconst const to_focus: Element | nullto_focus = var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.\nMDN Reference\nquerySelector('.focus-me');\n\tconst to_focus: Element | nullto_focus?.focus();\n});function afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidcallbackafterNavigatefunction afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidcallbackafterNavigateconst to_focus: Element | nullvar document: Documentwindow.documentParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)const to_focus: Element | null\n```\n\nExample:\n```text\n<html lang=\"de\">\n```\n\nExample:\n```text\n<html lang=\"%lang%\">\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Handle} */\nexport function handle({ event, resolve }) {\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))\n\t});\n}\n```\n\nExample:\n```text\nimport type { Handle } from '@sveltejs/kit';\n\nexport const handle: Handle = ({ event, resolve }) => {\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))\n\t});\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.288Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":58,"estimatedTokens":578}}189{"id":"doc-migrating_from_sapper_sveltekit_docs-714343ca","source":"documentation","title":"Migrating from Sapper • SvelteKit Docs","url":"https://svelte.dev/docs/kit/migrating","text":"Example:\n```text\nimport { module \"@sapper/app\"stores } from '@sapper/app';\nconst { const preloading: anypreloading, const page: anypage, const session: anysession } = module \"@sapper/app\"stores();module \"@sapper/app\"const preloading: anyconst page: anyconst session: anymodule \"@sapper/app\"\n```\n\nExample:\n```text\nimport { module \"html-minifier\"minify } from 'html-minifier';\nimport { const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding } from '$app/environment';\n\nconst const minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}minification_options = {\n\tcollapseBooleanAttributes: booleancollapseBooleanAttributes: true,\n\tcollapseWhitespace: booleancollapseWhitespace: true,\n\tconservativeCollapse: booleanconservativeCollapse: true,\n\tdecodeEntities: booleandecodeEntities: true,\n\thtml5: booleanhtml5: true,\n\tignoreCustomComments: RegExp[]ignoreCustomComments: [/^#/],\n\tminifyCSS: booleanminifyCSS: true,\n\tminifyJS: booleanminifyJS: false,\n\tremoveAttributeQuotes: booleanremoveAttributeQuotes: true,\n\tremoveComments: booleanremoveComments: false, // some hydration code needs comments, so leave them in\n\tremoveOptionalTags: booleanremoveOptionalTags: true,\n\tremoveRedundantAttributes: booleanremoveRedundantAttributes: true,\n\tremoveScriptTypeAttributes: booleanremoveScriptTypeAttributes: true,\n\tremoveStyleLinkTypeAttributes: booleanremoveStyleLinkTypeAttributes: true,\n\tsortAttributes: booleansortAttributes: true,\n\tsortClassName: booleansortClassName: true\n};\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tlet let page: stringpage = '';\n\n\treturn resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml, done: booleandone }) => {\n\t\t\tlet page: stringpage += html: stringhtml;\n\t\t\tif (done: booleandone) {\n\t\t\t\treturn const building: booleanSvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.\nreferencebuilding ? module \"html-minifier\"minify(let page: stringpage, const minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}minification_options) : let page: stringpage;\n\t\t\t}\n\t\t}\n\t});\n}module \"html-minifier\"const building: booleanbuildbuildingtrueconst minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}const minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}collapseBooleanAttributes: booleancollapseWhitespace: booleanconservativeCollapse: booleandecodeEntities: booleanhtml5: booleanignoreCustomComments: RegExp[]minifyCSS: booleanminifyJS: booleanremoveAttributeQuotes: booleanremoveComments: booleanremoveOptionalTags: booleanremoveRedundantAttributes: booleanremoveScriptTypeAttributes: booleanremoveStyleLinkTypeAttributes: booleansortAttributes: booleansortClassName: booleanfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>let page: stringresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringdone: booleanlet page: stringhtml: stringdone: booleanconst building: booleanbuildbuildingtruemodule \"html-minifier\"let page: stringconst minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}const minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}let page: string\n```\n\nExample:\n```text\nconst minification_options: {\n    collapseBooleanAttributes: boolean;\n    collapseWhitespace: boolean;\n    conservativeCollapse: boolean;\n    decodeEntities: boolean;\n    html5: boolean;\n    ignoreCustomComments: RegExp[];\n    minifyCSS: boolean;\n    minifyJS: boolean;\n    removeAttributeQuotes: boolean;\n    removeComments: boolean;\n    removeOptionalTags: boolean;\n    removeRedundantAttributes: boolean;\n    removeScriptTypeAttributes: boolean;\n    removeStyleLinkTypeAttributes: boolean;\n    sortAttributes: boolean;\n    sortClassName: boolean;\n}\n```\n\nExample:\n```text\nfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefined\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.288Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":209,"estimatedTokens":2220}}190{"id":"doc-packaging_sveltekit_docs-a164aca8","source":"documentation","title":"Packaging • SvelteKit Docs","url":"https://svelte.dev/docs/kit/packaging","text":"Example:\n```text\n{\n\t\"name\": \"your-library\"\n}\n```\n\nExample:\n```text\n{\n\t\"license\": \"MIT\"\n}\n```\n\nExample:\n```text\n{\n\t\"files\": [\"dist\"]\n}\n```\n\nExample:\n```text\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n\t\t\t\"svelte\": \"./dist/index.js\"\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\nimport { import SomethingSomething } from 'your-library';\nimport Something\n```\n\nExample:\n```text\n{\n\t\"exports\": {\n\t\t\"./Foo.svelte\": {\n\t\t\t\"types\": \"./dist/Foo.svelte.d.ts\",\n\t\t\t\"svelte\": \"./dist/Foo.svelte\"\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\nimport module \"your-library/Foo.svelte\"Foo from 'your-library/Foo.svelte';module \"your-library/Foo.svelte\"\n```\n\nExample:\n```text\n{\n\t\"svelte\": \"./dist/index.js\"\n}\n```\n\nExample:\n```text\n{\n\t\"sideEffects\": [\"**/*.css\"]\n}\n```\n\nExample:\n```text\n{\n\t\"sideEffects\": [\n\t\t\"**/*.css\",\n\t\t\"./dist/sideEffectfulFile.js\"\n\t]\n}\n```\n\nExample:\n```text\n{\n\t\"exports\": {\n\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\"\n\t\t}\n\t},\n\t\"typesVersions\": {\n\t\t\">4.0\": {\n\t\t\t\"foo\": [\"./dist/foo.d.ts\"]\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n// changing `svelte` to `default` is a breaking change:\n\t\t\t\"svelte\": \"./dist/index.js\"\n\t\t\t\"default\": \"./dist/index.js\"\n\t\t},\n// removing this is a breaking change:\n\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\",\n\t\t\t\"default\": \"./dist/foo.js\"\n\t\t},\n// adding this is ok:\n\t\t\"./bar\": {\n\t\t\t\"types\": \"./dist/bar.d.ts\",\n\t\t\t\"svelte\": \"./dist/bar.js\",\n\t\t\t\"default\": \"./dist/bar.js\"\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\n{\n\t\"files\": [\n\t\t\"dist\",\n\t\t\"!dist/**/*.test.*\",\n\t\t\"!dist/**/*.spec.*\",\n\t\t\"src/lib\",\n\t\t\"!src/lib/**/*.test.*\",\n\t\t\"!src/lib/**/*.spec.*\"\n\t]\n}\n```\n\nExample:\n```text\nnpm publish\n```\n\nExample:\n```text\nimport { import somethingsomething } from './something/index.js';\nimport something\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.289Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":149,"estimatedTokens":454}}191{"id":"doc-images_sveltekit_docs-ea946e76","source":"documentation","title":"Images • SvelteKit Docs","url":"https://svelte.dev/docs/kit/images","text":"Example:\n```text\n<script>\n\timport logo from '$lib/assets/logo.png';\n</script>\n\n<img alt=\"The project logo\" src={logo} />\n```\n\nExample:\n```text\nnpm i -D @sveltejs/enhanced-img\n```\n\nExample:\n```text\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';\nimport { function enhancedImages(): Promise<Plugin[]>enhancedImages } from '@sveltejs/enhanced-img';\nimport { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig } from 'vite';\n\nexport default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts\naccepts a direct \n{@link \nUserConfig\n}\n object, or a function that returns it.\nThe function receives a \n{@link \nConfigEnv\n}\n object.\ndefineConfig({\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [\n\t\tfunction enhancedImages(): Promise<Plugin[]>enhancedImages(), // must come before the SvelteKit plugin\n\t\tfunction sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit()\n\t]\n});function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-sveltefunction enhancedImages(): Promise<Plugin[]>function defineConfig(config: UserConfig): UserConfig (+5 overloads)function defineConfig(config: UserConfig): UserConfig (+5 overloads)UserConfig.plugins?: PluginOption[] | undefinedfunction enhancedImages(): Promise<Plugin[]>function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelte\n```\n\nExample:\n```text\n<enhanced:img src=\"./path/to/your/image.jpg\" alt=\"An alt text\" />\n```\n\nExample:\n```text\n<script>\n\timport MyImage from './path/to/your/image.jpg?enhanced';\n</script>\n\n<enhanced:img src={MyImage} alt=\"some alt text\" />\n```\n\nExample:\n```text\n<script>\n\tconst imageModules = import.meta.glob(\n\t\t'/path/to/assets/*.{avif,AVIF,gif,GIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}',\n\t\t{\n\t\t\teager: true,\n\t\t\tquery: {\n\t\t\t\tenhanced: true\n\t\t\t}\n\t\t}\n\t)\n</script>\n\n{#each Object.entries(imageModules) as [_path, module]}\n\t<enhanced:img src={module.default} alt=\"some alt text\" />\n{/each}\n```\n\nExample:\n```text\n<style>\n\t.hero-image img {\n\t\twidth: var(--size);\n\t\theight: auto;\n\t}\n</style>\n```\n\nExample:\n```text\n<enhanced:img src=\"./image.png\" sizes=\"min(1280px, 100vw)\"/>\n```\n\nExample:\n```text\n<enhanced:img\n\tsrc=\"./image.png?w=1280;640;400\"\n\tsizes=\"(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px\"\n/>\n```\n\nExample:\n```text\n<enhanced:img src=\"./path/to/your/image.jpg?blur=15\" alt=\"An alt text\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.290Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":119,"estimatedTokens":867}}192{"id":"doc-lib_sveltekit_docs-b0cced69","source":"documentation","title":"$lib • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$lib","text":"Example:\n```text\nA reusable component\n```\n\nExample:\n```text\n<script>\n\timport Component from '$lib/Component.svelte';\n</script>\n\n<Component />\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport Component from '$lib/Component.svelte';\n</script>\n\n<Component />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.290Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":24,"estimatedTokens":69}}193{"id":"doc-migrating_to_sveltekit_v2_sveltekit_docs-b91c5119","source":"documentation","title":"Migrating to SvelteKit v2 • SvelteKit Docs","url":"https://svelte.dev/docs/kit/migrating-to-sveltekit-2","text":"Example:\n```text\nimport { function error(status: number, body: App.Error): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror } from '@sveltejs/kit'\n\n// ...\nthrow error(500, 'something went wrong');\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)Throws an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking handleError.\nMake sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.\n@paramstatus The HTTP status code. Must be in the range 400-599.@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.@throwsError If the provided status is invalid (not between 400 and 599).referenceerror(500, 'something went wrong');function error(status: number, body: App.Error): never (+1 overload)handleErrorfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)function error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)handleError\n```\n\nExample:\n```text\nfunction error(status: number, body?: {\n    message: string;\n} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport function function load({ cookies }: {\n    cookies: any;\n}): {\n    response: any;\n}load({ cookies: anycookies }) {\n\tcookies: anycookies.set(const name: void@deprecatedname, value, { path: stringpath: '/' });\n\treturn { response: anyresponse }\n}function load({ cookies }: {\n    cookies: any;\n}): {\n    response: any;\n}function load({ cookies }: {\n    cookies: any;\n}): {\n    response: any;\n}cookies: anycookies: anyconst name: voidpath: stringresponse: any\n```\n\nExample:\n```text\nfunction load({ cookies }: {\n    cookies: any;\n}): {\n    response: any;\n}\n```\n\nExample:\n```text\n// If you have a single promise\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here.\nfetch }) {\n\tconst const response: anyresponse = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const url: stringurl).Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>Attaches callbacks for the resolution and/or rejection of the Promise.\n@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(r: Responser => r: Responser.Body.json(): Promise<any>MDN Reference\njson());\n\treturn { response: anyresponse }\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst response: anyfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const url: stringPromise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>r: Responser: ResponseBody.json(): Promise<any>response: any\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\n// If you have multiple promises\n/** @type {import('./$types').PageServerLoad} */\nexport async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load({ fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch is equivalent to the native fetch web API, with a few additional features:\n\nIt can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.\nIt can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).\nInternal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\nDuring server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders\nDuring hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies here.\nfetch }) {\n\tconst a = fetch(url1).then(r => r.json());\n\tconst b = fetch(url2).then(r => r.json());\n\tconst [const a: anya, const b: anyb] = await var Promise: PromiseConstructorRepresents the completion of an asynchronous operation\nPromise.PromiseConstructor.all<[Promise<any>, Promise<any>]>(values: [Promise<any>, Promise<any>]): Promise<[any, any]> (+1 overload)Creates a Promise that is resolved with an array of results when all of the provided Promises\nresolve, or rejected when any Promise is rejected.\n@paramvalues An array of Promises.@returnsA new Promise.all([\n\t\tfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const url1: stringurl1).Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>Attaches callbacks for the resolution and/or rejection of the Promise.\n@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(r: Responser => r: Responser.Body.json(): Promise<any>MDN Reference\njson()),\n\t\tfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const url2: stringurl2).Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>Attaches callbacks for the resolution and/or rejection of the Promise.\n@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(r: Responser => r: Responser.Body.json(): Promise<any>MDN Reference\njson()),\n\t]);\n\treturn { a: anya, b: anyb };\n}function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetchfetchcookieauthorizationfetch+server.jstextjsonResponsefilterSerializedResponseHeadersconst a: anyconst b: anyvar Promise: PromiseConstructorPromiseConstructor.all<[Promise<any>, Promise<any>]>(values: [Promise<any>, Promise<any>]): Promise<[any, any]> (+1 overload)fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const url1: stringPromise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>r: Responser: ResponseBody.json(): Promise<any>fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const url2: stringPromise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>r: Responser: ResponseBody.json(): Promise<any>a: anyb: any\n```\n\nExample:\n```text\nimport { resolvePath } from '@sveltejs/kit';\nimport { base } from '$app/paths';\nimport { function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathname@deprecatedUse resolve(...) insteadreferenceresolveRoute } from '$app/paths';\n\nconst path = base + resolvePath('/blog/[slug]', { slug });\nconst const path: stringpath = resolveRoute<\"/blog/[slug]\">(route: \"/blog/[slug]\", params: Record<string, string>): ResolvedPathname@deprecatedUse resolve(...) insteadreferenceresolveRoute('/blog/[slug]', { slug: anyslug });function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathnameresolve(...)const path: stringresolveRoute<\"/blog/[slug]\">(route: \"/blog/[slug]\", params: Record<string, string>): ResolvedPathnameresolve(...)slug: any\n```\n\nExample:\n```text\n<script>\n\timport { page } from '$app/stores';\n\timport { page } from '$app/state';\n</script>\n\n{$page.data}\n{page.data}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.291Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":163,"estimatedTokens":2959}}194{"id":"doc-service_workers_sveltekit_docs-b80ddc5b","source":"documentation","title":"Service workers • SvelteKit Docs","url":"https://svelte.dev/docs/kit/service-workers","text":"Example:\n```text\n// Disables access to DOM typings like `HTMLElement` which are not available\n// inside a service worker and instantiates the correct globals\n/// <reference no-default-lib=\"true\"/>\n/// <reference lib=\"esnext\" />\n/// <reference lib=\"webworker\" />\n\n// Ensures that the `$service-worker` import has proper type definitions\n/// <reference types=\"@sveltejs/kit\" />\n\n// Only necessary if you have an import from `$env/static/public`\n/// <reference types=\"../.svelte-kit/ambient.d.ts\" />\n\nimport { const build: string[]An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build).\nDuring development, this is an empty array.\nreferencebuild, const files: string[]An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files\nreferencefiles, const version: stringSee config.kit.version. It’s useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\nreferenceversion } from '$service-worker';\n\n// This gives `self` the correct types\nconst const self: ServiceWorkerGlobalScopeself = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (module globalThisglobalThis.var self: Window & typeof globalThisThe Window.self read-only property returns the window itself, as a WindowProxy. It can be used with dot notation on a window object (that is, window.self) or standalone (self). The advantage of the standalone notation is that a similar notation exists for non-window contexts, such as in Web Workers. By using self, you can refer to the global scope in a way that will work not only in a window context (self will resolve to window.self) but also in a worker context (self will then resolve to WorkerGlobalScope.self).\nMDN Reference\nThe self read-only property of the WorkerGlobalScope interface returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like DedicatedWorkerGlobalScope, SharedWorkerGlobalScope, or ServiceWorkerGlobalScope.\nMDN Reference\nself));\n\n// Create a unique cache name for this deployment\nconst const CACHE: stringCACHE = `cache-${const version: stringSee config.kit.version. It’s useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\nreferenceversion}`;\n\nconst const ASSETS: string[]ASSETS = [\n\t...const build: string[]An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build).\nDuring development, this is an empty array.\nreferencebuild, // the app itself\n\t...const files: string[]An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files\nreferencefiles  // everything in `static`\n];\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"install\">(type: \"install\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('install', (event: ExtendableEventevent) => {\n\t// Create a new cache and add all files to it\n\tasync function function (local function) addFilesToCache(): Promise<void>addFilesToCache() {\n\t\tconst const cache: Cachecache = await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.\nMDN Reference\nopen(const CACHE: stringCACHE);\n\t\tawait const cache: Cachecache.Cache.addAll(requests: Iterable<RequestInfo>): Promise<void> (+3 overloads)The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache. The request objects created during retrieval become keys to the stored response operations.\nMDN Reference\naddAll(const ASSETS: string[]ASSETS);\n\t}\n\n\tevent: ExtendableEventevent.ExtendableEvent.waitUntil(f: Promise<any>): voidThe ExtendableEvent.waitUntil() method tells the event dispatcher that work is ongoing. It can also be used to detect whether that work was successful. In service workers, waitUntil() tells the browser that work is ongoing until the promise settles, and it shouldn’t terminate the service worker if it wants that work to complete.\nMDN Reference\nwaitUntil(function (local function) addFilesToCache(): Promise<void>addFilesToCache());\n});\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"activate\">(type: \"activate\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('activate', (event: ExtendableEventevent) => {\n\t// Remove previous cached data from disk\n\tasync function function (local function) deleteOldCaches(): Promise<void>deleteOldCaches() {\n\t\tfor (const const key: stringkey of await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.keys(): Promise<string[]> (+1 overload)The keys() method of the CacheStorage interface returns a Promise that will resolve with an array containing strings corresponding to all of the named Cache objects tracked by the CacheStorage object in the order they were created. Use this method to iterate over a list of all Cache objects.\nMDN Reference\nkeys()) {\n\t\t\tif (const key: stringkey !== const CACHE: stringCACHE) await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.delete(cacheName: string): Promise<boolean> (+1 overload)The delete() method of the CacheStorage interface finds the Cache object matching the cacheName, and if found, deletes the Cache object and returns a Promise that resolves to true. If no Cache object is found, it resolves to false.\nMDN Reference\ndelete(const key: stringkey);\n\t\t}\n\t}\n\n\tevent: ExtendableEventevent.ExtendableEvent.waitUntil(f: Promise<any>): voidThe ExtendableEvent.waitUntil() method tells the event dispatcher that work is ongoing. It can also be used to detect whether that work was successful. In service workers, waitUntil() tells the browser that work is ongoing until the promise settles, and it shouldn’t terminate the service worker if it wants that work to complete.\nMDN Reference\nwaitUntil(function (local function) deleteOldCaches(): Promise<void>deleteOldCaches());\n});\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"fetch\">(type: \"fetch\", listener: (this: ServiceWorkerGlobalScope, ev: FetchEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('fetch', (event: FetchEventevent) => {\n\t// ignore POST requests etc\n\tif (event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest.Request.method: stringThe method read-only property of the Request interface contains the request’s method (GET, POST, etc.)\nMDN Reference\nmethod !== 'GET') return;\n\n\tasync function function (local function) respond(): Promise<Response>respond() {\n\t\tconst const url: URLurl = new var URL: new (url: string | URL, base?: string | URL) => URLThe URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.\nMDN Reference\nURL class is a global reference for import { URL } from 'url'\nhttps://nodejs.org/api/url.html#the-whatwg-url-api\n@sincev10.0.0URL(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl);\n\t\tconst const cache: Cachecache = await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.\nMDN Reference\nopen(const CACHE: stringCACHE);\n\n\t\t// `build`/`files` can always be served from the cache\n\t\tif (const ASSETS: string[]ASSETS.Array<string>.includes(searchElement: string, fromIndex?: number): booleanDetermines whether an array includes a certain element, returning true or false as appropriate.\n@paramsearchElement The element to search for.@paramfromIndex The position in this array at which to begin searching for searchElement.includes(const url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname)) {\n\t\t\tconst const response: Response | undefinedresponse = await const cache: Cachecache.Cache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)The match() method of the Cache interface returns a Promise that resolves to the Response associated with the first matching request in the Cache object. If no match is found, the Promise resolves to undefined.\nMDN Reference\nmatch(const url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname);\n\n\t\t\tif (const response: Response | undefinedresponse) {\n\t\t\t\treturn const response: Responseresponse;\n\t\t\t}\n\t\t}\n\n\t\t// for everything else, try the network first, but\n\t\t// fall back to the cache if we're offline\n\t\ttry {\n\t\t\tconst const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+2 overloads)MDN Reference\nfetch(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest);\n\n\t\t\t// if we're offline, fetch can return a value that is not a Response\n\t\t\t// instead of throwing - and we can't pass this non-Response to respondWith\n\t\t\tif (!(const response: Responseresponse instanceof var Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}The Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse)) {\n\t\t\t\tthrow new var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)Error('invalid response from fetch');\n\t\t\t}\n\n\t\t\tif (const response: Responseresponse.Response.status: numberThe status read-only property of the Response interface contains the HTTP status codes of the response.\nMDN Reference\nstatus === 200 && !const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | null (+1 overload)The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('cache-control')?.String.includes(searchString: string, position?: number): booleanReturns true if searchString appears as a substring of the result of converting this\nobject to a String, at one or more positions that are\ngreater than or equal to position; otherwise, returns false.\n@paramsearchString search string@paramposition If position is undefined, 0 is assumed, so as to search all of the String.includes('no-store')) {\n\t\t\t\tconst cache: Cachecache.Cache.put(request: RequestInfo | URL, response: Response): Promise<void> (+1 overload)The put() method of the Cache interface allows key/value pairs to be added to the current Cache object.\nMDN Reference\nput(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest, const response: Responseresponse.Response.clone(): Response (+1 overload)The clone() method of the Response interface creates a clone of a response object, identical in every way, but stored in a different variable.\nMDN Reference\nclone());\n\t\t\t}\n\n\t\t\treturn const response: Responseresponse;\n\t\t} catch (function (local var) err: unknownerr) {\n\t\t\tconst const response: Response | undefinedresponse = await const cache: Cachecache.Cache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)The match() method of the Cache interface returns a Promise that resolves to the Response associated with the first matching request in the Cache object. If no match is found, the Promise resolves to undefined.\nMDN Reference\nmatch(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest);\n\n\t\t\tif (const response: Response | undefinedresponse) {\n\t\t\t\treturn const response: Responseresponse;\n\t\t\t}\n\n\t\t\t// if there's no cache, then just error out\n\t\t\t// as there is nothing we can do to respond to this request\n\t\t\tthrow function (local var) err: unknownerr;\n\t\t}\n\t}\n\n\tevent: FetchEventevent.FetchEvent.respondWith(r: Response | PromiseLike<Response>): voidThe respondWith() method of FetchEvent prevents the browser’s default fetch handling, and allows you to provide a promise for a Response yourself.\nMDN Reference\nrespondWith(function (local function) respond(): Promise<Response>respond());\n});const build: string[]cache.addAll(build)const files: string[]config.kit.files.assetsstaticconfig.kit.serviceWorker.filesconst version: stringconfig.kit.versionconst self: ServiceWorkerGlobalScopemodule globalThisvar self: Window & typeof globalThisWindow.selfselfconst CACHE: stringconst version: stringconfig.kit.versionconst ASSETS: string[]const build: string[]cache.addAll(build)const files: string[]config.kit.files.assetsstaticconfig.kit.serviceWorker.filesconst self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"install\">(type: \"install\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: ExtendableEventfunction (local function) addFilesToCache(): Promise<void>const cache: Cachevar caches: CacheStorageCacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)open()const CACHE: stringconst cache: CacheCache.addAll(requests: Iterable<RequestInfo>): Promise<void> (+3 overloads)addAll()const ASSETS: string[]event: ExtendableEventExtendableEvent.waitUntil(f: Promise<any>): voidExtendableEvent.waitUntil()function (local function) addFilesToCache(): Promise<void>const self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"activate\">(type: \"activate\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: ExtendableEventfunction (local function) deleteOldCaches(): Promise<void>const key: stringvar caches: CacheStorageCacheStorage.keys(): Promise<string[]> (+1 overload)keys()const key: stringconst CACHE: stringvar caches: CacheStorageCacheStorage.delete(cacheName: string): Promise<boolean> (+1 overload)delete()const key: stringevent: ExtendableEventExtendableEvent.waitUntil(f: Promise<any>): voidExtendableEvent.waitUntil()function (local function) deleteOldCaches(): Promise<void>const self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"fetch\">(type: \"fetch\", listener: (this: ServiceWorkerGlobalScope, ev: FetchEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: FetchEventevent: FetchEventFetchEvent.request: RequestrequestRequest.method: stringmethodfunction (local function) respond(): Promise<Response>const url: URLvar URL: new (url: string | URL, base?: string | URL) => URLURLURLimport { URL } from 'url'event: FetchEventFetchEvent.request: RequestrequestRequest.url: stringurlconst cache: Cachevar caches: CacheStorageCacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)open()const CACHE: stringconst ASSETS: string[]Array<string>.includes(searchElement: string, fromIndex?: number): booleanconst url: URLURL.pathname: stringpathnameconst response: Response | undefinedconst cache: CacheCache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)match()const url: URLURL.pathname: stringpathnameconst response: Response | undefinedconst response: Responseconst response: Responsefunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+2 overloads)event: FetchEventFetchEvent.request: Requestrequestconst response: Responsevar Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}var Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}Responsevar Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)const response: ResponseResponse.status: numberstatusconst response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | null (+1 overload)get()String.includes(searchString: string, position?: number): booleanconst cache: CacheCache.put(request: RequestInfo | URL, response: Response): Promise<void> (+1 overload)put()event: FetchEventFetchEvent.request: Requestrequestconst response: ResponseResponse.clone(): Response (+1 overload)clone()const response: Responsefunction (local var) err: unknownconst response: Response | undefinedconst cache: CacheCache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)match()event: FetchEventFetchEvent.request: Requestrequestconst response: Response | undefinedconst response: Responsefunction (local var) err: unknownevent: FetchEventFetchEvent.respondWith(r: Response | PromiseLike<Response>): voidrespondWith()function (local function) respond(): Promise<Response>\n```\n\nExample:\n```text\nvar Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}\n```\n\nExample:\n```text\nvar Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)\n```\n\nExample:\n```text\n// Disables access to DOM typings like `HTMLElement` which are not available\n// inside a service worker and instantiates the correct globals\n/// <reference no-default-lib=\"true\"/>\n/// <reference lib=\"esnext\" />\n/// <reference lib=\"webworker\" />\n\n// Ensures that the `$service-worker` import has proper type definitions\n/// <reference types=\"@sveltejs/kit\" />\n\n// Only necessary if you have an import from `$env/static/public`\n/// <reference types=\"../.svelte-kit/ambient.d.ts\" />\n\nimport { const build: string[]An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build).\nDuring development, this is an empty array.\nreferencebuild, const files: string[]An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files\nreferencefiles, const version: stringSee config.kit.version. It’s useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\nreferenceversion } from '$service-worker';\n\n// This gives `self` the correct types\nconst const self: ServiceWorkerGlobalScopeself = module globalThisglobalThis.var self: Window & typeof globalThisThe Window.self read-only property returns the window itself, as a WindowProxy. It can be used with dot notation on a window object (that is, window.self) or standalone (self). The advantage of the standalone notation is that a similar notation exists for non-window contexts, such as in Web Workers. By using self, you can refer to the global scope in a way that will work not only in a window context (self will resolve to window.self) but also in a worker context (self will then resolve to WorkerGlobalScope.self).\nMDN Reference\nThe self read-only property of the WorkerGlobalScope interface returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like DedicatedWorkerGlobalScope, SharedWorkerGlobalScope, or ServiceWorkerGlobalScope.\nMDN Reference\nself as unknown as ServiceWorkerGlobalScope;\n\n// Create a unique cache name for this deployment\nconst const CACHE: stringCACHE = `cache-${const version: stringSee config.kit.version. It’s useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\nreferenceversion}`;\n\nconst const ASSETS: string[]ASSETS = [\n\t...const build: string[]An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build).\nDuring development, this is an empty array.\nreferencebuild, // the app itself\n\t...const files: string[]An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files\nreferencefiles  // everything in `static`\n];\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"install\">(type: \"install\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('install', (event: ExtendableEventevent) => {\n\t// Create a new cache and add all files to it\n\tasync function function (local function) addFilesToCache(): Promise<void>addFilesToCache() {\n\t\tconst const cache: Cachecache = await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.\nMDN Reference\nopen(const CACHE: stringCACHE);\n\t\tawait const cache: Cachecache.Cache.addAll(requests: Iterable<RequestInfo>): Promise<void> (+3 overloads)The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache. The request objects created during retrieval become keys to the stored response operations.\nMDN Reference\naddAll(const ASSETS: string[]ASSETS);\n\t}\n\n\tevent: ExtendableEventevent.ExtendableEvent.waitUntil(f: Promise<any>): voidThe ExtendableEvent.waitUntil() method tells the event dispatcher that work is ongoing. It can also be used to detect whether that work was successful. In service workers, waitUntil() tells the browser that work is ongoing until the promise settles, and it shouldn’t terminate the service worker if it wants that work to complete.\nMDN Reference\nwaitUntil(function (local function) addFilesToCache(): Promise<void>addFilesToCache());\n});\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"activate\">(type: \"activate\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('activate', (event: ExtendableEventevent) => {\n\t// Remove previous cached data from disk\n\tasync function function (local function) deleteOldCaches(): Promise<void>deleteOldCaches() {\n\t\tfor (const const key: stringkey of await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.keys(): Promise<string[]> (+1 overload)The keys() method of the CacheStorage interface returns a Promise that will resolve with an array containing strings corresponding to all of the named Cache objects tracked by the CacheStorage object in the order they were created. Use this method to iterate over a list of all Cache objects.\nMDN Reference\nkeys()) {\n\t\t\tif (const key: stringkey !== const CACHE: stringCACHE) await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.delete(cacheName: string): Promise<boolean> (+1 overload)The delete() method of the CacheStorage interface finds the Cache object matching the cacheName, and if found, deletes the Cache object and returns a Promise that resolves to true. If no Cache object is found, it resolves to false.\nMDN Reference\ndelete(const key: stringkey);\n\t\t}\n\t}\n\n\tevent: ExtendableEventevent.ExtendableEvent.waitUntil(f: Promise<any>): voidThe ExtendableEvent.waitUntil() method tells the event dispatcher that work is ongoing. It can also be used to detect whether that work was successful. In service workers, waitUntil() tells the browser that work is ongoing until the promise settles, and it shouldn’t terminate the service worker if it wants that work to complete.\nMDN Reference\nwaitUntil(function (local function) deleteOldCaches(): Promise<void>deleteOldCaches());\n});\n\nconst self: ServiceWorkerGlobalScopeself.ServiceWorkerGlobalScope.addEventListener<\"fetch\">(type: \"fetch\", listener: (this: ServiceWorkerGlobalScope, ev: FetchEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\nMDN Reference\naddEventListener('fetch', (event: FetchEventevent) => {\n\t// ignore POST requests etc\n\tif (event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest.Request.method: stringThe method read-only property of the Request interface contains the request’s method (GET, POST, etc.)\nMDN Reference\nmethod !== 'GET') return;\n\n\tasync function function (local function) respond(): Promise<Response>respond() {\n\t\tconst const url: URLurl = new var URL: new (url: string | URL, base?: string | URL) => URLThe URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.\nMDN Reference\nURL class is a global reference for import { URL } from 'url'\nhttps://nodejs.org/api/url.html#the-whatwg-url-api\n@sincev10.0.0URL(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl);\n\t\tconst const cache: Cachecache = await var caches: CacheStorageAvailable only in secure contexts.\nMDN Reference\ncaches.CacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.\nMDN Reference\nopen(const CACHE: stringCACHE);\n\n\t\t// `build`/`files` can always be served from the cache\n\t\tif (const ASSETS: string[]ASSETS.Array<string>.includes(searchElement: string, fromIndex?: number): booleanDetermines whether an array includes a certain element, returning true or false as appropriate.\n@paramsearchElement The element to search for.@paramfromIndex The position in this array at which to begin searching for searchElement.includes(const url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname)) {\n\t\t\tconst const response: Response | undefinedresponse = await const cache: Cachecache.Cache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)The match() method of the Cache interface returns a Promise that resolves to the Response associated with the first matching request in the Cache object. If no match is found, the Promise resolves to undefined.\nMDN Reference\nmatch(const url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname);\n\n\t\t\tif (const response: Response | undefinedresponse) {\n\t\t\t\treturn const response: Responseresponse;\n\t\t\t}\n\t\t}\n\n\t\t// for everything else, try the network first, but\n\t\t// fall back to the cache if we're offline\n\t\ttry {\n\t\t\tconst const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+2 overloads)MDN Reference\nfetch(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest);\n\n\t\t\t// if we're offline, fetch can return a value that is not a Response\n\t\t\t// instead of throwing - and we can't pass this non-Response to respondWith\n\t\t\tif (!(const response: Responseresponse instanceof var Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}The Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse)) {\n\t\t\t\tthrow new var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)Error('invalid response from fetch');\n\t\t\t}\n\n\t\t\tif (const response: Responseresponse.Response.status: numberThe status read-only property of the Response interface contains the HTTP status codes of the response.\nMDN Reference\nstatus === 200 && !const response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.get(name: string): string | null (+1 overload)The get() method of the Headers interface returns a byte string of all the values of a header within a Headers object with a given name. If the requested header doesn’t exist in the Headers object, it returns null.\nMDN Reference\nget('cache-control')?.String.includes(searchString: string, position?: number): booleanReturns true if searchString appears as a substring of the result of converting this\nobject to a String, at one or more positions that are\ngreater than or equal to position; otherwise, returns false.\n@paramsearchString search string@paramposition If position is undefined, 0 is assumed, so as to search all of the String.includes('no-store')) {\n\t\t\t\tconst cache: Cachecache.Cache.put(request: RequestInfo | URL, response: Response): Promise<void> (+1 overload)The put() method of the Cache interface allows key/value pairs to be added to the current Cache object.\nMDN Reference\nput(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest, const response: Responseresponse.Response.clone(): Response (+1 overload)The clone() method of the Response interface creates a clone of a response object, identical in every way, but stored in a different variable.\nMDN Reference\nclone());\n\t\t\t}\n\n\t\t\treturn const response: Responseresponse;\n\t\t} catch (function (local var) err: unknownerr) {\n\t\t\tconst const response: Response | undefinedresponse = await const cache: Cachecache.Cache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)The match() method of the Cache interface returns a Promise that resolves to the Response associated with the first matching request in the Cache object. If no match is found, the Promise resolves to undefined.\nMDN Reference\nmatch(event: FetchEventevent.FetchEvent.request: RequestThe request read-only property of the FetchEvent interface returns the Request that triggered the event handler.\nMDN Reference\nrequest);\n\n\t\t\tif (const response: Response | undefinedresponse) {\n\t\t\t\treturn const response: Responseresponse;\n\t\t\t}\n\n\t\t\t// if there's no cache, then just error out\n\t\t\t// as there is nothing we can do to respond to this request\n\t\t\tthrow function (local var) err: unknownerr;\n\t\t}\n\t}\n\n\tevent: FetchEventevent.FetchEvent.respondWith(r: Response | PromiseLike<Response>): voidThe respondWith() method of FetchEvent prevents the browser’s default fetch handling, and allows you to provide a promise for a Response yourself.\nMDN Reference\nrespondWith(function (local function) respond(): Promise<Response>respond());\n});const build: string[]cache.addAll(build)const files: string[]config.kit.files.assetsstaticconfig.kit.serviceWorker.filesconst version: stringconfig.kit.versionconst self: ServiceWorkerGlobalScopemodule globalThisvar self: Window & typeof globalThisWindow.selfselfconst CACHE: stringconst version: stringconfig.kit.versionconst ASSETS: string[]const build: string[]cache.addAll(build)const files: string[]config.kit.files.assetsstaticconfig.kit.serviceWorker.filesconst self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"install\">(type: \"install\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: ExtendableEventfunction (local function) addFilesToCache(): Promise<void>const cache: Cachevar caches: CacheStorageCacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)open()const CACHE: stringconst cache: CacheCache.addAll(requests: Iterable<RequestInfo>): Promise<void> (+3 overloads)addAll()const ASSETS: string[]event: ExtendableEventExtendableEvent.waitUntil(f: Promise<any>): voidExtendableEvent.waitUntil()function (local function) addFilesToCache(): Promise<void>const self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"activate\">(type: \"activate\", listener: (this: ServiceWorkerGlobalScope, ev: ExtendableEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: ExtendableEventfunction (local function) deleteOldCaches(): Promise<void>const key: stringvar caches: CacheStorageCacheStorage.keys(): Promise<string[]> (+1 overload)keys()const key: stringconst CACHE: stringvar caches: CacheStorageCacheStorage.delete(cacheName: string): Promise<boolean> (+1 overload)delete()const key: stringevent: ExtendableEventExtendableEvent.waitUntil(f: Promise<any>): voidExtendableEvent.waitUntil()function (local function) deleteOldCaches(): Promise<void>const self: ServiceWorkerGlobalScopeServiceWorkerGlobalScope.addEventListener<\"fetch\">(type: \"fetch\", listener: (this: ServiceWorkerGlobalScope, ev: FetchEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener()event: FetchEventevent: FetchEventFetchEvent.request: RequestrequestRequest.method: stringmethodfunction (local function) respond(): Promise<Response>const url: URLvar URL: new (url: string | URL, base?: string | URL) => URLURLURLimport { URL } from 'url'event: FetchEventFetchEvent.request: RequestrequestRequest.url: stringurlconst cache: Cachevar caches: CacheStorageCacheStorage.open(cacheName: string): Promise<Cache> (+1 overload)open()const CACHE: stringconst ASSETS: string[]Array<string>.includes(searchElement: string, fromIndex?: number): booleanconst url: URLURL.pathname: stringpathnameconst response: Response | undefinedconst cache: CacheCache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)match()const url: URLURL.pathname: stringpathnameconst response: Response | undefinedconst response: Responseconst response: Responsefunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+2 overloads)event: FetchEventFetchEvent.request: Requestrequestconst response: Responsevar Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}var Response: {\n    new (body?: BodyInit | null, init?: ResponseInit): Response;\n    prototype: Response;\n    error(): Response;\n    json(data: any, init?: ResponseInit): Response;\n    redirect(url: string | URL, status?: number): Response;\n}Responsevar Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)var Error: ErrorConstructor\nnew (message?: string, options?: ErrorOptions) => Error (+1 overload)const response: ResponseResponse.status: numberstatusconst response: ResponseResponse.headers: HeadersheadersHeaders.get(name: string): string | null (+1 overload)get()String.includes(searchString: string, position?: number): booleanconst cache: CacheCache.put(request: RequestInfo | URL, response: Response): Promise<void> (+1 overload)put()event: FetchEventFetchEvent.request: Requestrequestconst response: ResponseResponse.clone(): Response (+1 overload)clone()const response: Responsefunction (local var) err: unknownconst response: Response | undefinedconst cache: CacheCache.match(request: RequestInfo | URL, options?: CacheQueryOptions): Promise<Response | undefined> (+1 overload)match()event: FetchEventFetchEvent.request: Requestrequestconst response: Response | undefinedconst response: Responsefunction (local var) err: unknownevent: FetchEventFetchEvent.respondWith(r: Response | PromiseLike<Response>): voidrespondWith()function (local function) respond(): Promise<Response>\n```\n\nExample:\n```text\nimport { const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev } from '$app/environment';\n\nif ('serviceWorker' in var navigator: NavigatorThe Window.navigator read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.\nMDN Reference\nnavigator) {\n\tfunction addEventListener<\"load\">(type: \"load\", listener: (this: Window, ev: Event) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)addEventListener('load', function () {\n\t\tvar navigator: NavigatorThe Window.navigator read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.\nMDN Reference\nnavigator.Navigator.serviceWorker: ServiceWorkerContainerThe serviceWorker read-only property of the Navigator interface returns the ServiceWorkerContainer object for the associated document, which provides access to registration, removal, upgrade, and communication with the ServiceWorker.\nAvailable only in secure contexts.\nMDN Reference\nserviceWorker.ServiceWorkerContainer.register(scriptURL: string | URL, options?: RegistrationOptions): Promise<ServiceWorkerRegistration>The register() method of the ServiceWorkerContainer interface creates or updates a ServiceWorkerRegistration for the given scope.\nMDN Reference\nregister('./path/to/service-worker.js', {\n\t\t\tRegistrationOptions.type?: WorkerType | undefinedtype: const dev: booleanWhether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.\nreferencedev ? 'module' : 'classic'\n\t\t});\n\t});\n}const dev: booleanNODE_ENVMODEvar navigator: NavigatorWindow.navigatorfunction addEventListener<\"load\">(type: \"load\", listener: (this: Window, ev: Event) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)var navigator: NavigatorWindow.navigatorNavigator.serviceWorker: ServiceWorkerContainerserviceWorkerServiceWorkerContainer.register(scriptURL: string | URL, options?: RegistrationOptions): Promise<ServiceWorkerRegistration>register()RegistrationOptions.type?: WorkerType | undefinedconst dev: booleanNODE_ENVMODE\n```\n\nExample:\n```text\nimport { function afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.\nafterNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceafterNavigate } from '$app/navigation';\n\nfunction afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.\nafterNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceafterNavigate(async () => {\n\tif ('serviceWorker' in var navigator: NavigatorThe Window.navigator read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.\nMDN Reference\nnavigator) {\n\t\tconst const registration: ServiceWorkerRegistration | undefinedregistration = await var navigator: NavigatorThe Window.navigator read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.\nMDN Reference\nnavigator.Navigator.serviceWorker: ServiceWorkerContainerThe serviceWorker read-only property of the Navigator interface returns the ServiceWorkerContainer object for the associated document, which provides access to registration, removal, upgrade, and communication with the ServiceWorker.\nAvailable only in secure contexts.\nMDN Reference\nserviceWorker.ServiceWorkerContainer.getRegistration(clientURL?: string | URL): Promise<ServiceWorkerRegistration | undefined>The getRegistration() method of the ServiceWorkerContainer interface gets a ServiceWorkerRegistration object whose scope URL matches the provided client URL. The method returns a Promise that resolves to a ServiceWorkerRegistration or undefined.\nMDN Reference\ngetRegistration();\n\t\tawait const registration: ServiceWorkerRegistration | undefinedregistration?.ServiceWorkerRegistration.update(): Promise<ServiceWorkerRegistration>The update() method of the ServiceWorkerRegistration interface attempts to update the service worker. It fetches the worker’s script URL, and if the new worker is not byte-by-byte identical to the current worker, it installs the new worker. The fetch of the worker bypasses any browser caches if the previous fetch occurred over 24 hours ago.\nMDN Reference\nupdate();\n\t}\n});function afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidcallbackafterNavigatefunction afterNavigate(callback: (navigation: import(\"@sveltejs/kit\").AfterNavigate) => void): voidcallbackafterNavigatevar navigator: NavigatorWindow.navigatorconst registration: ServiceWorkerRegistration | undefinedvar navigator: NavigatorWindow.navigatorNavigator.serviceWorker: ServiceWorkerContainerserviceWorkerServiceWorkerContainer.getRegistration(clientURL?: string | URL): Promise<ServiceWorkerRegistration | undefined>getRegistration()const registration: ServiceWorkerRegistration | undefinedServiceWorkerRegistration.update(): Promise<ServiceWorkerRegistration>update()\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.293Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":477,"estimatedTokens":11374}}195{"id":"doc-frequently_asked_questions_sveltekit_docs-02b49622","source":"documentation","title":"Frequently asked questions • SvelteKit Docs","url":"https://svelte.dev/docs/kit/faq","text":"Example:\n```text\nimport import pkgpkg from './package.json' with { type: 'json' };import pkg\n```\n\nExample:\n```text\nimport { function onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.\nIf you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.\nIf a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.\nonNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceonNavigate } from '$app/navigation';\n\nfunction onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.\nIf you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.\nIf a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.\nonNavigate must be called during a component initialization. It remains active as long as the component is mounted.\nreferenceonNavigate((navigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})navigation) => {\n\tif (!var document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransitionThe startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.\nMDN Reference\nstartViewTransition) return;\n\n\treturn new var Promise: PromiseConstructor\nnew <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>Creates a new Promise.\n@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:\na resolve callback used to resolve the promise with a value or the result of another promise,\nand a reject callback used to reject the promise with a provided reason or error.Promise((resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve) => {\n\t\tvar document: Documentwindow.document returns a reference to the document contained in the window.\nMDN Reference\ndocument.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransitionThe startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.\nMDN Reference\nstartViewTransition(async () => {\n\t\t\tresolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve();\n\t\t\tawait navigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})navigation.NavigationBase.complete: Promise<void>A promise that resolves once the navigation is complete, and rejects if the navigation\nfails or is aborted. In the case of a willUnload navigation, the promise will never resolve\ncomplete;\n\t\t});\n\t});\n});function onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidcallbackPromisedocument.startViewTransitionPromiseonNavigatefunction onNavigate(callback: (navigation: import(\"@sveltejs/kit\").OnNavigate) => MaybePromise<void | (() => void)>): voidcallbackPromisedocument.startViewTransitionPromiseonNavigatenavigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})navigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})var document: Documentwindow.documentDocument.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransitionstartViewTransition()var Promise: PromiseConstructor\nnew <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>var Promise: PromiseConstructor\nnew <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidvar document: Documentwindow.documentDocument.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransitionstartViewTransition()resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidnavigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})navigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})NavigationBase.complete: Promise<void>willUnload\n```\n\nExample:\n```text\nnavigation: (NavigationGoto & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationFormSubmit & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationPopState & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n}) | (NavigationLink & {\n    type: Exclude<NavigationType, \"enter\" | \"leave\">;\n    willUnload: false;\n})\n```\n\nExample:\n```text\nvar Promise: PromiseConstructor\nnew <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>\n```\n\nExample:\n```text\nimport { const browser: booleantrue if the app is running in the browser.\nreferencebrowser } from '$app/environment';\n\nif (const browser: booleantrue if the app is running in the browser.\nreferencebrowser) {\n\t// client-only code here\n}const browser: booleantrueconst browser: booleantrue\n```\n\nExample:\n```text\nimport { function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount, like $effect, schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike $effect, the provided function only runs once.\nIt must be called during the component’s initialisation (but doesn’t need to live inside the component;\nit can be called from an external module). If a function is returned synchronously from onMount,\nit will be called when the component is unmounted.\nonMount functions do not run during server-side rendering.\nreferenceonMount } from 'svelte';\n\nonMount<void>(fn: () => void | (() => any) | Promise<void>): voidonMount, like $effect, schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike $effect, the provided function only runs once.\nIt must be called during the component’s initialisation (but doesn’t need to live inside the component;\nit can be called from an external module). If a function is returned synchronously from onMount,\nit will be called when the component is unmounted.\nonMount functions do not run during server-side rendering.\nreferenceonMount(async () => {\n\tconst { const method: anymethod } = await import('some-browser-only-library');\n\tconst method: anymethod('hello world');\n});function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount$effect$effectonMountonMountonMount<void>(fn: () => void | (() => any) | Promise<void>): voidonMount$effect$effectonMountonMountconst method: anyconst method: any\n```\n\nExample:\n```text\nimport { function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount, like $effect, schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike $effect, the provided function only runs once.\nIt must be called during the component’s initialisation (but doesn’t need to live inside the component;\nit can be called from an external module). If a function is returned synchronously from onMount,\nit will be called when the component is unmounted.\nonMount functions do not run during server-side rendering.\nreferenceonMount } from 'svelte';\nimport { module \"some-browser-only-library\"method } from 'some-browser-only-library';\n\nonMount<void>(fn: () => void | (() => any) | Promise<void>): voidonMount, like $effect, schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike $effect, the provided function only runs once.\nIt must be called during the component’s initialisation (but doesn’t need to live inside the component;\nit can be called from an external module). If a function is returned synchronously from onMount,\nit will be called when the component is unmounted.\nonMount functions do not run during server-side rendering.\nreferenceonMount(() => {\n\tmodule \"some-browser-only-library\"method('hello world');\n});function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): voidonMount$effect$effectonMountonMountmodule \"some-browser-only-library\"onMount<void>(fn: () => void | (() => any) | Promise<void>): voidonMount$effect$effectonMountonMountmodule \"some-browser-only-library\"\n```\n\nExample:\n```text\n<script>\n\timport { browser } from '$app/environment';\n\n\tconst promise = browser\n\t\t? import('./BrowserComponent.svelte')\n\t\t: import('./ServerComponent.svelte');\n</script>\n\n{#await promise}\n\t<p>Loading...</p>\n{:then module}\n\t<module.default />\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { browser } from '$app/environment';\n\n\tconst promise = browser\n\t\t? import('./BrowserComponent.svelte')\n\t\t: import('./ServerComponent.svelte');\n</script>\n\n{#await promise}\n\t<p>Loading...</p>\n{:then module}\n\t<module.default />\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\nExample:\n```text\n/** @type {import('./$types').RequestHandler} */\nexport function function GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>GET({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams, url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) {\n\treturn function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference\nfetch(`https://example.com/${params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.path + url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.search: stringThe search property of the URL interface is a search string, also called a query string, that is a string containing a “?\" followed by the parameters of the URL. If the URL does not have a search query, this property contains an empty string, “\".\nMDN Reference\nsearch}`);\n}function GET(event: RequestEvent<Record<string, any>, string | null>): MaybePromise<Response>params: Record<string, any>/blog/[slug]{ slug: string }url: URLfunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)params: Record<string, any>/blog/[slug]{ slug: string }url: URLURL.search: stringsearch\n```\n\nExample:\n```text\nimport type { type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';\n\nexport const const GET: RequestHandlerGET: type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = ({ params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams, url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl }) => {\n\treturn function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference\nfetch(`https://example.com/${params: Record<string, any>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nparams.path + url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.search: stringThe search property of the URL interface is a search string, also called a query string, that is a string containing a “?\" followed by the parameters of the URL. If the URL does not have a search query, this property contains an empty string, “\".\nMDN Reference\nsearch}`);\n};type RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>const GET: RequestHandlertype RequestHandler = (event: RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>params: Record<string, any>/blog/[slug]{ slug: string }url: URLfunction fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)params: Record<string, any>/blog/[slug]{ slug: string }url: URLURL.search: stringsearch\n```\n\nExample:\n```text\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';\n\n/** @type {import('vite').Plugin} */\nconst const myPlugin: Plugin<any>myPlugin = {\n\tOutputPlugin.name: stringThe name of the plugin, for use in error messages and logs.\nname: 'log-request-middleware',\n\tPlugin<any>.configureServer?: ObjectHook<ServerHook> | undefinedConfigure the vite server. The hook receives the \n{@link \nViteDevServer\n}\ninstance. This can also be used to store a reference to the server\nfor use in other hooks.\nThe hooks will be called before internal middlewares are applied. A hook\ncan return a post hook that will be called after internal middlewares\nare applied. Hook can be async functions and will be called in series.\nconfigureServer(server: ViteDevServerserver) {\n\t\tserver: ViteDevServerserver.ViteDevServer.middlewares: Connect.ServerA connect app instance.\n\nCan be used to attach custom middlewares to the dev server.\nCan also be used as the handler function of a custom http server\nor as a middleware in any connect-style Node.js frameworks\n\nhttps://github.com/senchalabs/connect#use-middleware\nmiddlewares.Connect.Server.use(fn: Connect.NextHandleFunction): Connect.Server (+3 overloads)Utilize the given middleware handle to the given route,\ndefaulting to /. This “route” is the mount-point for the\nmiddleware, when given a value other than / the middleware\nis only effective when that segment is present in the request’s\npathname.\nFor example if we were to mount a function at /admin, it would\nbe invoked on /admin, and /admin/settings, however it would\nnot be invoked for /, or /posts.\nuse((req: Connect.IncomingMessagereq, res: ServerResponse<IncomingMessage>res, next: Connect.NextFunctionnext) => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(`Got request ${req: Connect.IncomingMessagereq.IncomingMessage.url?: string | undefinedOnly valid for request obtained from \n{@link \nServer\n}\n.\nRequest URL string. This contains only the URL that is present in the actual\nHTTP request. Take the following request:\nGET /status?name=ryan HTTP/1.1\nAccept: text/plainTo parse the URL into its parts:\nnew URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);When request.url is '/status?name=ryan' and process.env.HOST is undefined:\n$ node\n> new URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\nURL {\n  href: 'http://localhost/status?name=ryan',\n  origin: 'http://localhost',\n  protocol: 'http:',\n  username: '',\n  password: '',\n  host: 'localhost',\n  hostname: 'localhost',\n  port: '',\n  pathname: '/status',\n  search: '?name=ryan',\n  searchParams: URLSearchParams { 'name' => 'ryan' },\n  hash: ''\n}Ensure that you set process.env.HOST to the server’s host name, or consider replacing this part entirely. If using req.headers.host, ensure proper\nvalidation is used, as clients may specify a custom Host header.\n@sincev0.1.90url}`);\n\t\t\tnext: (err?: any) => voidnext();\n\t\t});\n\t}\n};\n\n/** @type {import('vite').UserConfig} */\nconst const config: UserConfigconfig = {\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [const myPlugin: Plugin<any>myPlugin, function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit()]\n};\n\nexport default const config: UserConfigconfig;function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelteconst myPlugin: Plugin<any>OutputPlugin.name: stringPlugin<any>.configureServer?: ObjectHook<ServerHook> | undefinedserver: ViteDevServerserver: ViteDevServerViteDevServer.middlewares: Connect.ServerConnect.Server.use(fn: Connect.NextHandleFunction): Connect.Server (+3 overloads)handleroutereq: Connect.IncomingMessageres: ServerResponse<IncomingMessage>next: Connect.NextFunctionvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()req: Connect.IncomingMessageIncomingMessage.url?: string | undefinedGET /status?name=ryan HTTP/1.1\nAccept: text/plainnew URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);request.url'/status?name=ryan'process.env.HOST$ node\n> new URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\nURL {\n  href: 'http://localhost/status?name=ryan',\n  origin: 'http://localhost',\n  protocol: 'http:',\n  username: '',\n  password: '',\n  host: 'localhost',\n  hostname: 'localhost',\n  port: '',\n  pathname: '/status',\n  search: '?name=ryan',\n  searchParams: URLSearchParams { 'name' => 'ryan' },\n  hash: ''\n}process.env.HOSTreq.headers.hostHostnext: (err?: any) => voidconst config: UserConfigUserConfig.plugins?: PluginOption[] | undefinedconst myPlugin: Plugin<any>function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelteconst config: UserConfig\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\nExample:\n```text\nGET /status?name=ryan HTTP/1.1\nAccept: text/plain\n```\n\nExample:\n```text\nnew URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\n```\n\nExample:\n```text\n$ node\n> new URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\nURL {\n  href: 'http://localhost/status?name=ryan',\n  origin: 'http://localhost',\n  protocol: 'http:',\n  username: '',\n  password: '',\n  host: 'localhost',\n  hostname: 'localhost',\n  port: '',\n  pathname: '/status',\n  search: '?name=ryan',\n  searchParams: URLSearchParams { 'name' => 'ryan' },\n  hash: ''\n}\n```\n\nExample:\n```text\nimport { function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit } from '@sveltejs/kit/vite';\nimport type { interface Plugin<A = any>There are two types of plugins in Vite. App plugins and environment plugins.\nEnvironment Plugins are defined by a constructor function that will be called\nonce per each environment allowing users to have completely different plugins\nfor each of them. The constructor gets the resolved environment after the server\nand builder has already been created simplifying config access and cache\nmanagement for environment specific plugins.\nEnvironment Plugins are closer to regular rollup plugins. They can’t define\napp level hooks (like config, configResolved, configureServer, etc).\nPlugin, UserConfig } from 'vite';\n\nconst const myPlugin: Plugin<any>myPlugin: interface Plugin<A = any>There are two types of plugins in Vite. App plugins and environment plugins.\nEnvironment Plugins are defined by a constructor function that will be called\nonce per each environment allowing users to have completely different plugins\nfor each of them. The constructor gets the resolved environment after the server\nand builder has already been created simplifying config access and cache\nmanagement for environment specific plugins.\nEnvironment Plugins are closer to regular rollup plugins. They can’t define\napp level hooks (like config, configResolved, configureServer, etc).\nPlugin = {\n\tOutputPlugin.name: stringThe name of the plugin, for use in error messages and logs.\nname: 'log-request-middleware',\n\tPlugin<any>.configureServer?: ObjectHook<ServerHook> | undefinedConfigure the vite server. The hook receives the \n{@link \nViteDevServer\n}\ninstance. This can also be used to store a reference to the server\nfor use in other hooks.\nThe hooks will be called before internal middlewares are applied. A hook\ncan return a post hook that will be called after internal middlewares\nare applied. Hook can be async functions and will be called in series.\nconfigureServer(server: ViteDevServerserver) {\n\t\tserver: ViteDevServerserver.ViteDevServer.middlewares: Connect.ServerA connect app instance.\n\nCan be used to attach custom middlewares to the dev server.\nCan also be used as the handler function of a custom http server\nor as a middleware in any connect-style Node.js frameworks\n\nhttps://github.com/senchalabs/connect#use-middleware\nmiddlewares.Connect.Server.use(fn: Connect.NextHandleFunction): Connect.Server (+3 overloads)Utilize the given middleware handle to the given route,\ndefaulting to /. This “route” is the mount-point for the\nmiddleware, when given a value other than / the middleware\nis only effective when that segment is present in the request’s\npathname.\nFor example if we were to mount a function at /admin, it would\nbe invoked on /admin, and /admin/settings, however it would\nnot be invoked for /, or /posts.\nuse((req: Connect.IncomingMessagereq, res: ServerResponse<IncomingMessage>res, next: Connect.NextFunctionnext) => {\n\t\t\tvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(`Got request ${req: Connect.IncomingMessagereq.IncomingMessage.url?: string | undefinedOnly valid for request obtained from \n{@link \nServer\n}\n.\nRequest URL string. This contains only the URL that is present in the actual\nHTTP request. Take the following request:\nGET /status?name=ryan HTTP/1.1\nAccept: text/plainTo parse the URL into its parts:\nnew URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);When request.url is '/status?name=ryan' and process.env.HOST is undefined:\n$ node\n> new URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\nURL {\n  href: 'http://localhost/status?name=ryan',\n  origin: 'http://localhost',\n  protocol: 'http:',\n  username: '',\n  password: '',\n  host: 'localhost',\n  hostname: 'localhost',\n  port: '',\n  pathname: '/status',\n  search: '?name=ryan',\n  searchParams: URLSearchParams { 'name' => 'ryan' },\n  hash: ''\n}Ensure that you set process.env.HOST to the server’s host name, or consider replacing this part entirely. If using req.headers.host, ensure proper\nvalidation is used, as clients may specify a custom Host header.\n@sincev0.1.90url}`);\n\t\t\tnext: (err?: any) => voidnext();\n\t\t});\n\t}\n};\n\nconst const config: UserConfigconfig: UserConfig = {\n\tUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.\nplugins: [const myPlugin: Plugin<any>myPlugin, function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.\nSince version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.\nAny options that don’t belong to SvelteKit are passed through to vite-plugin-svelte.\nreferencesveltekit()]\n};\n\nexport default const config: UserConfigconfig;function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelteinterface Plugin<A = any>const myPlugin: Plugin<any>interface Plugin<A = any>OutputPlugin.name: stringPlugin<any>.configureServer?: ObjectHook<ServerHook> | undefinedserver: ViteDevServerserver: ViteDevServerViteDevServer.middlewares: Connect.ServerConnect.Server.use(fn: Connect.NextHandleFunction): Connect.Server (+3 overloads)handleroutereq: Connect.IncomingMessageres: ServerResponse<IncomingMessage>next: Connect.NextFunctionvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()req: Connect.IncomingMessageIncomingMessage.url?: string | undefinedGET /status?name=ryan HTTP/1.1\nAccept: text/plainnew URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);request.url'/status?name=ryan'process.env.HOST$ node\n> new URL(`http://${process.env.HOST ?? 'localhost'}${request.url}`);\nURL {\n  href: 'http://localhost/status?name=ryan',\n  origin: 'http://localhost',\n  protocol: 'http:',\n  username: '',\n  password: '',\n  host: 'localhost',\n  hostname: 'localhost',\n  port: '',\n  pathname: '/status',\n  search: '?name=ryan',\n  searchParams: URLSearchParams { 'name' => 'ryan' },\n  hash: ''\n}process.env.HOSTreq.headers.hostHostnext: (err?: any) => voidconst config: UserConfigUserConfig.plugins?: PluginOption[] | undefinedconst myPlugin: Plugin<any>function sveltekit(config?: KitConfig & Omit<Options, \"onwarn\"> & Pick<SvelteConfig, \"vitePlugin\">): Promise<Plugin[]>svelte.config.jsvite-plugin-svelteconst config: UserConfig\n```\n\nExample:\n```text\nyarn create svelte myapp\ncd myapp\n```\n\nExample:\n```text\nyarn set version berry\nyarn install\n```\n\nExample:\n```text\nnodeLinker: node-modules\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.295Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":22,"totalLines":771,"estimatedTokens":10135}}196{"id":"doc-hooks_sveltekit_docs-a9bc5d8f","source":"documentation","title":"Hooks • SvelteKit Docs","url":"https://svelte.dev/docs/kit/hooks","text":"Example:\n```text\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tif (event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('/custom')) {\n\t\treturn new var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse('custom response');\n\t}\n\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n\treturn const response: Responseresponse;\n}function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.url: URLURL.pathname: stringpathnameString.startsWith(searchString: string, position?: number): booleanvar Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseResponseconst response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>const response: Response\n```\n\nExample:\n```text\nfunction handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tif (event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.url: URLThe requested URL.\nIn the context of a remote function request initiated by the client, this relates to the page the remote function\nwas called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine\nwhether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.\nurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('/custom')) {\n\t\treturn new var Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.\nMDN Reference\nResponse('custom response');\n\t}\n\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n\treturn const response: Responseresponse;\n};type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.url: URLURL.pathname: stringpathnameString.startsWith(searchString: string, position?: number): booleanvar Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseResponseconst response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>const response: Response\n```\n\nExample:\n```text\ntype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => html: stringhtml.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('old', 'new'),\n\t\tResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedDetermines which headers should be included in serialized responses when a load function loads a resource with fetch.\nBy default, none will be included.\n@paramname header name@paramvalue header valuefilterSerializedResponseHeaders: (name: stringname) => name: stringname.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('x-'),\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: ({ type: \"font\" | \"css\" | \"js\" | \"asset\"type, path: stringpath }) => type: \"font\" | \"css\" | \"js\" | \"asset\"type === 'js' || path: stringpath.String.includes(searchString: string, position?: number): booleanReturns true if searchString appears as a substring of the result of converting this\nobject to a String, at one or more positions that are\ngreater than or equal to position; otherwise, returns false.\n@paramsearchString search string@paramposition If position is undefined, 0 is assumed, so as to search all of the String.includes('/important/')\n\t});\n\n\treturn const response: Responseresponse;\n}function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>const response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringhtml: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedloadfetchname: stringname: stringString.startsWith(searchString: string, position?: number): booleanResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscsstype: \"font\" | \"css\" | \"js\" | \"asset\"path: stringtype: \"font\" | \"css\" | \"js\" | \"asset\"path: stringString.includes(searchString: string, position?: number): booleanconst response: Response\n```\n\nExample:\n```text\nResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefined\n```\n\nExample:\n```text\nResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined\n```\n\nExample:\n```text\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event, {\n\t\tResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element’s opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.\n@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => html: stringhtml.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('old', 'new'),\n\t\tResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedDetermines which headers should be included in serialized responses when a load function loads a resource with fetch.\nBy default, none will be included.\n@paramname header name@paramvalue header valuefilterSerializedResponseHeaders: (name: stringname) => name: stringname.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('x-'),\n\t\tResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedDetermines what should be added to the <head> tag to preload it.\nBy default, js and css files will be preloaded.\n@paraminput the type of the file and its pathpreload: ({ type: \"font\" | \"css\" | \"js\" | \"asset\"type, path: stringpath }) => type: \"font\" | \"css\" | \"js\" | \"asset\"type === 'js' || path: stringpath.String.includes(searchString: string, position?: number): booleanReturns true if searchString appears as a substring of the result of converting this\nobject to a String, at one or more positions that are\ngreater than or equal to position; otherwise, returns false.\n@paramsearchString search string@paramposition If position is undefined, 0 is assumed, so as to search all of the String.includes('/important/')\n\t});\n\n\treturn const response: Responseresponse;\n};type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>const response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>ResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefinedResolveOptions.transformPageChunk?: ((input: {\n    html: string;\n    done: boolean;\n}) => MaybePromise<string | undefined>) | undefineddone%sveltekit.head%html: stringhtml: stringString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyResolveOptions.filterSerializedResponseHeaders?: ((name: string, value: string) => boolean) | undefinedloadfetchname: stringname: stringString.startsWith(searchString: string, position?: number): booleanResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefinedResolveOptions.preload?: ((input: {\n    type: \"font\" | \"css\" | \"js\" | \"asset\";\n    path: string;\n}) => boolean) | undefined<head>jscsstype: \"font\" | \"css\" | \"js\" | \"asset\"path: stringtype: \"font\" | \"css\" | \"js\" | \"asset\"path: stringString.includes(searchString: string, position?: number): booleanconst response: Response\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>handle({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {\n\tevent: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: Useruser = await const getUserInformation: (cookie: string | void) => Promise<User>getUserInformation(event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n\n\t// Note that modifying response headers isn't always safe.\n\t// Response objects can have immutable headers\n\t// (e.g. Response.redirect() returned from an endpoint).\n\t// Modifying immutable headers throws a TypeError.\n\t// In that case, clone the response or avoid creating a\n\t// response object with immutable headers.\n\tconst response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset('x-custom-header', 'potato');\n\n\treturn const response: Responseresponse;\n}function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>function handle(input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: Userconst getUserInformation: (cookie: string | void) => Promise<User>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseconst response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>const response: ResponseResponse.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()const response: Response\n```\n\nExample:\n```text\nimport type { type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle } from '@sveltejs/kit';\n\nexport const const handle: Handlehandle: type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>The handle hook runs every time the SvelteKit server receives a request and\ndetermines the response.\nIt receives an event object representing the request and a function called resolve, which renders the route and generates a Response.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\nreferenceHandle = async ({ event: RequestEvent<Record<string, string>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {\n\tevent: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.\nlocals.App.Locals.user: Useruser = await const getUserInformation: (cookie: string | void) => Promise<User>getUserInformation(event: RequestEvent<Record<string, string>, string | null>event.RequestEvent<Record<string, string>, string | null>.cookies: CookiesGet or set cookies related to the current request\ncookies.Cookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.\n@paramname the name of the cookie@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));\n\n\tconst const response: Responseresponse = await resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Record<string, string>, string | null>event);\n\n\t// Note that modifying response headers isn't always safe.\n\t// Response objects can have immutable headers\n\t// (e.g. Response.redirect() returned from an endpoint).\n\t// Modifying immutable headers throws a TypeError.\n\t// In that case, clone the response or avoid creating a\n\t// response object with immutable headers.\n\tconst response: Responseresponse.Response.headers: HeadersThe headers read-only property of the Response interface contains the Headers object associated with the response.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset('x-custom-header', 'potato');\n\n\treturn const response: Responseresponse;\n};type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseconst handle: Handletype Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>type Handle = (input: {\n    event: RequestEvent;\n    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>handleeventresolveResponseevent: RequestEvent<Record<string, string>, string | null>resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.locals: App.Localsserver handle hookApp.Locals.user: Userconst getUserInformation: (cookie: string | void) => Promise<User>event: RequestEvent<Record<string, string>, string | null>RequestEvent<Record<string, string>, string | null>.cookies: CookiesCookies.get: (name: string, opts?: CookieParseOptions) => string | undefinedcookies.setcookie.parseconst response: Responseresolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>const response: ResponseResponse.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()const response: Response\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>handleFetch({ request: Requestrequest, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) {\n\tif (request: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('https://api.yourapp.com/')) {\n\t\t// clone the original request, but change the URL\n\t\trequest: Requestrequest = new var Request: new (input: RequestInfo | URL, init?: RequestInit) => RequestThe Request interface of the Fetch API represents a resource request.\nMDN Reference\nRequest(\n\t\t\trequest: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('https://api.yourapp.com/', 'http://localhost:9999/'),\n\t\t\trequest: Requestrequest\n\t\t);\n\t}\n\n\treturn fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(request: Requestrequest);\n}function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>request: Requestfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}request: RequestRequest.url: stringurlString.startsWith(searchString: string, position?: number): booleanrequest: Requestvar Request: new (input: RequestInfo | URL, init?: RequestInit) => RequestRequestrequest: RequestRequest.url: stringurlString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyrequest: Requestfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)request: Request\n```\n\nExample:\n```text\nfunction handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>\n```\n\nExample:\n```text\nfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}\n```\n\nExample:\n```text\nimport type { type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>The handleFetch hook allows you to modify (or replace) the result of an event.fetch call that runs on the server (or during prerendering) inside an endpoint, load, action, handle, handleError or reroute.\nreferenceHandleFetch } from '@sveltejs/kit';\n\nexport const const handleFetch: HandleFetchhandleFetch: type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>The handleFetch hook allows you to modify (or replace) the result of an event.fetch call that runs on the server (or during prerendering) inside an endpoint, load, action, handle, handleError or reroute.\nreferenceHandleFetch = async ({ request: Requestrequest, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) => {\n\tif (request: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('https://api.yourapp.com/')) {\n\t\t// clone the original request, but change the URL\n\t\trequest: Requestrequest = new var Request: new (input: RequestInfo | URL, init?: RequestInit) => RequestThe Request interface of the Fetch API represents a resource request.\nMDN Reference\nRequest(\n\t\t\trequest: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.\n@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('https://api.yourapp.com/', 'http://localhost:9999/'),\n\t\t\trequest: Requestrequest\n\t\t);\n\t}\n\n\treturn fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(request: Requestrequest);\n};type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>handleFetchevent.fetchloadactionhandlehandleErrorrerouteconst handleFetch: HandleFetchtype HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>handleFetchevent.fetchloadactionhandlehandleErrorrerouterequest: Requestfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}request: RequestRequest.url: stringurlString.startsWith(searchString: string, position?: number): booleanrequest: Requestvar Request: new (input: RequestInfo | URL, init?: RequestInit) => RequestRequestrequest: RequestRequest.url: stringurlString.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)RegExpgyrequest: Requestfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)request: Request\n```\n\nExample:\n```text\ntype HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>handleFetch({ event: RequestEvent<Record<string, string>, string | null>event, request: Requestrequest, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) {\n\tif (request: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('https://api.my-domain.com/')) {\n\t\trequest: Requestrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset('cookie', event.request.headers.get('cookie'));\n\t}\n\n\treturn fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(request: Requestrequest);\n}function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>function handleFetch(input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<Response>event: RequestEvent<Record<string, string>, string | null>request: Requestfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}request: RequestRequest.url: stringurlString.startsWith(searchString: string, position?: number): booleanrequest: RequestRequest.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)request: Request\n```\n\nExample:\n```text\nimport type { type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>The handleFetch hook allows you to modify (or replace) the result of an event.fetch call that runs on the server (or during prerendering) inside an endpoint, load, action, handle, handleError or reroute.\nreferenceHandleFetch } from '@sveltejs/kit';\nexport const const handleFetch: HandleFetchhandleFetch: type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>The handleFetch hook allows you to modify (or replace) the result of an event.fetch call that runs on the server (or during prerendering) inside an endpoint, load, action, handle, handleError or reroute.\nreferenceHandleFetch = async ({ event: RequestEvent<Record<string, string>, string | null>event, request: Requestrequest, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) => {\n\tif (request: Requestrequest.Request.url: stringThe url read-only property of the Request interface contains the URL of the request.\nMDN Reference\nurl.String.startsWith(searchString: string, position?: number): booleanReturns true if the sequence of elements of searchString converted to a String is the\nsame as the corresponding elements of this object (converted to a String) starting at\nposition. Otherwise returns false.\nstartsWith('https://api.my-domain.com/')) {\n\t\trequest: Requestrequest.Request.headers: HeadersThe headers read-only property of the Request interface contains the Headers object associated with the request.\nMDN Reference\nheaders.Headers.set(name: string, value: string): voidThe set() method of the Headers interface sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.\nMDN Reference\nset('cookie', event.request.headers.get('cookie'));\n\t}\n\n\treturn fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(request: Requestrequest);\n};type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>handleFetchevent.fetchloadactionhandlehandleErrorrerouteconst handleFetch: HandleFetchtype HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>type HandleFetch = (input: {\n    event: RequestEvent;\n    request: Request;\n    fetch: typeof fetch;\n}) => MaybePromise<Response>handleFetchevent.fetchloadactionhandlehandleErrorrerouteevent: RequestEvent<Record<string, string>, string | null>request: Requestfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}request: RequestRequest.url: stringurlString.startsWith(searchString: string, position?: number): booleanrequest: RequestRequest.headers: HeadersheadersHeaders.set(name: string, value: string): voidset()fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)request: Request\n```\n\nExample:\n```text\nimport * as import vv from 'valibot';\nimport { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery } from '$app/server';\n\nexport const const getTodo: RemoteQueryFunction<string, void, string>getTodo = query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.\nSee Remote functions for full documentation.\n@since2.27referencequery(import vv.function string(): v.StringSchema<undefined> (+1 overload)\nexport stringCreates a string schema.\n@returnsA string schema.string(), (id: stringid) => {\n\t// implementation...\n});import vfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)fetchconst getTodo: RemoteQueryFunction<string, void, string>query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void, string> (+2 overloads)fetchimport vfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringfunction string(): v.StringSchema<undefined> (+1 overload)\nexport stringid: string\n```\n\nExample:\n```text\nfunction string(): v.StringSchema<undefined> (+1 overload)\nexport string\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>handleValidationError({ issues: StandardSchemaV1.Issue[]issues }) {\n\treturn {\n\t\tApp.Error.message: stringmessage: 'No thank you'\n\t};\n}function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>function handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>issues: StandardSchemaV1.Issue[]App.Error.message: string\n```\n\nExample:\n```text\nfunction handleValidationError(input: {\n    issues: StandardSchemaV1<Input = unknown, Output = Input>.Issue[];\n    event: RequestEvent;\n}): MaybePromise<App.Error>\n```\n\nExample:\n```text\nimport type { type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>The handleValidationError hook runs when the argument to a remote function fails validation.\nIt will be called with the validation issues and the event, and must return an object shape that matches App.Error.\nreferenceHandleValidationError } from '@sveltejs/kit';\n\nexport const const handleValidationError: HandleValidationErrorhandleValidationError: type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>The handleValidationError hook runs when the argument to a remote function fails validation.\nIt will be called with the validation issues and the event, and must return an object shape that matches App.Error.\nreferenceHandleValidationError = ({ issues: StandardSchemaV1.Issue[]issues }) => {\n\treturn {\n\t\tApp.Error.message: stringmessage: 'No thank you'\n\t};\n};type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>handleValidationErrorApp.Errorconst handleValidationError: HandleValidationErrortype HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>type HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>handleValidationErrorApp.Errorissues: StandardSchemaV1.Issue[]App.Error.message: string\n```\n\nExample:\n```text\ntype HandleValidationError<Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue> = (input: {\n    issues: Issue[];\n    event: RequestEvent;\n}) => MaybePromise<App.Error>\n```\n\nExample:\n```text\ndeclare global {\n\tnamespace App {\n\t\tinterface interface App.ErrorDefines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Unexpected errors are handled by the handleError hooks which should return this shape.\nError {\n\t\t\tApp.Error.message: stringmessage: string;\n\t\t\tApp.Error.errorId: stringerrorId: string;\n\t\t}\n\t}\n}\n\nexport {};interface App.ErrorerrorhandleErrorApp.Error.message: stringApp.Error.errorId: string\n```\n\nExample:\n```text\nimport * as module \"@sentry/sveltekit\"Sentry from '@sentry/sveltekit';\n\nmodule \"@sentry/sveltekit\"Sentry.const init: (opts: any) => voidinit({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleServerError} */\nexport async function function handleError(input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>handleError({ error: unknownerror, event: RequestEvent<Record<string, string>, string | null>event, status: numberstatus, message: stringmessage }) {\n\tconst const errorId: `${string}-${string}-${string}-${string}-${string}`errorId = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();\n\n\t// example integration with https://sentry.io/\n\tmodule \"@sentry/sveltekit\"Sentry.const captureException: (error: any, opts: any) => voidcaptureException(error: unknownerror, {\n\t\textra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: { event: RequestEvent<Record<string, string>, string | null>event, errorId: `${string}-${string}-${string}-${string}-${string}`errorId, status: numberstatus }\n\t});\n\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Whoops!',\n\t\terrorId\n\t};\n}module \"@sentry/sveltekit\"module \"@sentry/sveltekit\"const init: (opts: any) => voidfunction handleError(input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>function handleError(input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>error: unknownevent: RequestEvent<Record<string, string>, string | null>status: numbermessage: stringconst errorId: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()module \"@sentry/sveltekit\"const captureException: (error: any, opts: any) => voiderror: unknownextra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}event: RequestEvent<Record<string, string>, string | null>errorId: `${string}-${string}-${string}-${string}-${string}`status: numberApp.Error.message: string\n```\n\nExample:\n```text\nfunction handleError(input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>\n```\n\nExample:\n```text\nextra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}\n```\n\nExample:\n```text\nimport * as module \"@sentry/sveltekit\"Sentry from '@sentry/sveltekit';\nimport type { type HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>The server-side handleError hook runs when an unexpected error is thrown while responding to a request.\nIf an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.\nMake sure that this function never throws an error.\nreferenceHandleServerError } from '@sveltejs/kit';\n\nmodule \"@sentry/sveltekit\"Sentry.const init: (opts: any) => voidinit({/*...*/})\n\nexport const const handleError: HandleServerErrorhandleError: type HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>The server-side handleError hook runs when an unexpected error is thrown while responding to a request.\nIf an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.\nMake sure that this function never throws an error.\nreferenceHandleServerError = async ({ error: unknownerror, event: RequestEvent<Record<string, string>, string | null>event, status: numberstatus, message: stringmessage }) => {\n\tconst const errorId: `${string}-${string}-${string}-${string}-${string}`errorId = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();\n\n\t// example integration with https://sentry.io/\n\tmodule \"@sentry/sveltekit\"Sentry.const captureException: (error: any, opts: any) => voidcaptureException(error: unknownerror, {\n\t\textra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: { event: RequestEvent<Record<string, string>, string | null>event, errorId: `${string}-${string}-${string}-${string}-${string}`errorId, status: numberstatus }\n\t});\n\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Whoops!',\n\t\terrorId: `${string}-${string}-${string}-${string}-${string}`errorId\n\t};\n};module \"@sentry/sveltekit\"type HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>type HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>handleErrormodule \"@sentry/sveltekit\"const init: (opts: any) => voidconst handleError: HandleServerErrortype HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>type HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>handleErrorerror: unknownevent: RequestEvent<Record<string, string>, string | null>status: numbermessage: stringconst errorId: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()module \"@sentry/sveltekit\"const captureException: (error: any, opts: any) => voiderror: unknownextra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: {\n    event: RequestEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}event: RequestEvent<Record<string, string>, string | null>errorId: `${string}-${string}-${string}-${string}-${string}`status: numberApp.Error.message: stringerrorId: `${string}-${string}-${string}-${string}-${string}`\n```\n\nExample:\n```text\ntype HandleServerError = (input: {\n    error: unknown;\n    event: RequestEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>\n```\n\nExample:\n```text\nimport * as module \"@sentry/sveltekit\"Sentry from '@sentry/sveltekit';\n\nmodule \"@sentry/sveltekit\"Sentry.const init: (opts: any) => voidinit({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleClientError} */\nexport async function function handleError(input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>handleError({ error: unknownerror, event: NavigationEvent<Record<string, string>, string | null>event, status: numberstatus, message: stringmessage }) {\n\tconst const errorId: `${string}-${string}-${string}-${string}-${string}`errorId = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();\n\n\t// example integration with https://sentry.io/\n\tmodule \"@sentry/sveltekit\"Sentry.const captureException: (error: any, opts: any) => voidcaptureException(error: unknownerror, {\n\t\textra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: { event: NavigationEvent<Record<string, string>, string | null>event, errorId: `${string}-${string}-${string}-${string}-${string}`errorId, status: numberstatus }\n\t});\n\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Whoops!',\n\t\terrorId\n\t};\n}module \"@sentry/sveltekit\"module \"@sentry/sveltekit\"const init: (opts: any) => voidfunction handleError(input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>function handleError(input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>error: unknownevent: NavigationEvent<Record<string, string>, string | null>status: numbermessage: stringconst errorId: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()module \"@sentry/sveltekit\"const captureException: (error: any, opts: any) => voiderror: unknownextra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}event: NavigationEvent<Record<string, string>, string | null>errorId: `${string}-${string}-${string}-${string}-${string}`status: numberApp.Error.message: string\n```\n\nExample:\n```text\nfunction handleError(input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}): MaybePromise<void | App.Error>\n```\n\nExample:\n```text\nextra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}\n```\n\nExample:\n```text\nimport * as module \"@sentry/sveltekit\"Sentry from '@sentry/sveltekit';\nimport type { type HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>The client-side handleError hook runs when an unexpected error is thrown while navigating.\nIf an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.\nMake sure that this function never throws an error.\nreferenceHandleClientError } from '@sveltejs/kit';\n\nmodule \"@sentry/sveltekit\"Sentry.const init: (opts: any) => voidinit({/*...*/})\n\nexport const const handleError: HandleClientErrorhandleError: type HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>The client-side handleError hook runs when an unexpected error is thrown while navigating.\nIf an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.\nMake sure that this function never throws an error.\nreferenceHandleClientError = async ({ error: unknownerror, event: NavigationEvent<Record<string, string>, string | null>event, status: numberstatus, message: stringmessage }) => {\n\tconst const errorId: `${string}-${string}-${string}-${string}-${string}`errorId = var crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();\n\n\t// example integration with https://sentry.io/\n\tmodule \"@sentry/sveltekit\"Sentry.const captureException: (error: any, opts: any) => voidcaptureException(error: unknownerror, {\n\t\textra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: { event: NavigationEvent<Record<string, string>, string | null>event, errorId: `${string}-${string}-${string}-${string}-${string}`errorId, status: numberstatus }\n\t});\n\n\treturn {\n\t\tApp.Error.message: stringmessage: 'Whoops!',\n\t\terrorId: `${string}-${string}-${string}-${string}-${string}`errorId\n\t};\n};module \"@sentry/sveltekit\"type HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>type HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>handleErrormodule \"@sentry/sveltekit\"const init: (opts: any) => voidconst handleError: HandleClientErrortype HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>type HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>handleErrorerror: unknownevent: NavigationEvent<Record<string, string>, string | null>status: numbermessage: stringconst errorId: `${string}-${string}-${string}-${string}-${string}`var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()module \"@sentry/sveltekit\"const captureException: (error: any, opts: any) => voiderror: unknownextra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}extra: {\n    event: NavigationEvent<Record<string, string>, string | null>;\n    errorId: `${string}-${string}-${string}-${string}-${string}`;\n    status: number;\n}event: NavigationEvent<Record<string, string>, string | null>errorId: `${string}-${string}-${string}-${string}-${string}`status: numberApp.Error.message: stringerrorId: `${string}-${string}-${string}-${string}-${string}`\n```\n\nExample:\n```text\ntype HandleClientError = (input: {\n    error: unknown;\n    event: NavigationEvent;\n    status: number;\n    message: string;\n}) => MaybePromise<void | App.Error>\n```\n\nExample:\n```text\nimport * as import dbdb from '$lib/server/database';\n\n/** @type {import('@sveltejs/kit').ServerInit} */\nexport async function function init(): MaybePromise<void>init() {\n\tawait import dbdb.connect();\n}import dbfunction init(): MaybePromise<void>import db\n```\n\nExample:\n```text\nimport * as import dbdb from '$lib/server/database';\nimport type { type ServerInit = () => MaybePromise<void>The init will be invoked before the server responds to its first request\n@since2.10.0referenceServerInit } from '@sveltejs/kit';\n\nexport const const init: ServerInitinit: type ServerInit = () => MaybePromise<void>The init will be invoked before the server responds to its first request\n@since2.10.0referenceServerInit = async () => {\n\tawait import dbdb.connect();\n};import dbtype ServerInit = () => MaybePromise<void>initconst init: ServerInittype ServerInit = () => MaybePromise<void>initimport db\n```\n\nExample:\n```text\n/** @type {Record<string, string>} */\nconst const translated: Record<string, string>translated = {\n\t'/en/about': '/en/about',\n\t'/de/ueber-uns': '/de/about',\n\t'/fr/a-propos': '/fr/about',\n};\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport function function reroute(event: {\n    url: URL;\n    fetch: typeof fetch;\n}): MaybePromise<string | void>reroute({ url: URLurl }) {\n\tif (url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname in const translated: Record<string, string>translated) {\n\t\treturn const translated: Record<string, string>translated[url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname];\n\t}\n}const translated: Record<string, string>function reroute(event: {\n    url: URL;\n    fetch: typeof fetch;\n}): MaybePromise<string | void>function reroute(event: {\n    url: URL;\n    fetch: typeof fetch;\n}): MaybePromise<string | void>url: URLurl: URLURL.pathname: stringpathnameconst translated: Record<string, string>const translated: Record<string, string>url: URLURL.pathname: stringpathname\n```\n\nExample:\n```text\nfunction reroute(event: {\n    url: URL;\n    fetch: typeof fetch;\n}): MaybePromise<string | void>\n```\n\nExample:\n```text\nimport type { type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>The reroute hook allows you to modify the URL before it is used to determine which route to render.\n@since2.3.0referenceReroute } from '@sveltejs/kit';\nconst const translated: Record<string, string>translated: type Record<K extends keyof any, T> = { [P in K]: T; }Construct a type with a set of properties K of type T\nRecord<string, string> = {\n\t'/en/about': '/en/about',\n\t'/de/ueber-uns': '/de/about',\n\t'/fr/a-propos': '/fr/about',\n};\n\nexport const const reroute: Reroutereroute: type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>The reroute hook allows you to modify the URL before it is used to determine which route to render.\n@since2.3.0referenceReroute = ({ url: URLurl }) => {\n\tif (url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname in const translated: Record<string, string>translated) {\n\t\treturn const translated: Record<string, string>translated[url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname];\n\t}\n};type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>rerouteconst translated: Record<string, string>type Record<K extends keyof any, T> = { [P in K]: T; }const reroute: Reroutetype Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>rerouteurl: URLurl: URLURL.pathname: stringpathnameconst translated: Record<string, string>const translated: Record<string, string>url: URLURL.pathname: stringpathname\n```\n\nExample:\n```text\ntype Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/kit').Reroute} */\nexport async function function reroute(event: {\n    url: URL;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<string | void>reroute({ url: URLurl, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) {\n\t// Ask a special endpoint within your app about the destination\n\tif (url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/api/reroute') return;\n\n\tconst const api: URLapi = new var URL: new (url: string | URL, base?: string | URL) => URLThe URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.\nMDN Reference\nURL class is a global reference for import { URL } from 'url'\nhttps://nodejs.org/api/url.html#the-whatwg-url-api\n@sincev10.0.0URL('/api/reroute', url: URLurl);\n\tconst api: URLapi.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.set(name: string, value: string): voidThe set() method of the URLSearchParams interface sets the value associated with a given search parameter to the given value. If there were several matching values, this method deletes the others. If the search parameter doesn’t exist, this method creates it.\nMDN Reference\nset('pathname', url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname);\n\n\tconst const result: anyresult = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const api: URLapi).Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>Attaches callbacks for the resolution and/or rejection of the Promise.\n@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(r: Responser => r: Responser.Body.json(): Promise<any>MDN Reference\njson());\n\treturn const result: anyresult.pathname;\n}function reroute(event: {\n    url: URL;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<string | void>function reroute(event: {\n    url: URL;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<string | void>url: URLfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}url: URLURL.pathname: stringpathnameconst api: URLvar URL: new (url: string | URL, base?: string | URL) => URLURLURLimport { URL } from 'url'url: URLconst api: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.set(name: string, value: string): voidset()url: URLURL.pathname: stringpathnameconst result: anyfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const api: URLPromise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>r: Responser: ResponseBody.json(): Promise<any>const result: any\n```\n\nExample:\n```text\nfunction reroute(event: {\n    url: URL;\n    fetch: typeof globalThis.fetch;\n}): MaybePromise<string | void>\n```\n\nExample:\n```text\nimport type { type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>The reroute hook allows you to modify the URL before it is used to determine which route to render.\n@since2.3.0referenceReroute } from '@sveltejs/kit';\nexport const const reroute: Reroutereroute: type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>The reroute hook allows you to modify the URL before it is used to determine which route to render.\n@since2.3.0referenceReroute = async ({ url: URLurl, fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch }) => {\n\t// Ask a special endpoint within your app about the destination\n\tif (url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname === '/api/reroute') return;\n\n\tconst const api: URLapi = new var URL: new (url: string | URL, base?: string | URL) => URLThe URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.\nMDN Reference\nURL class is a global reference for import { URL } from 'url'\nhttps://nodejs.org/api/url.html#the-whatwg-url-api\n@sincev10.0.0URL('/api/reroute', url: URLurl);\n\tconst api: URLapi.URL.searchParams: URLSearchParamsThe searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.\nMDN Reference\nsearchParams.URLSearchParams.set(name: string, value: string): voidThe set() method of the URLSearchParams interface sets the value associated with a given search parameter to the given value. If there were several matching values, this method deletes the others. If the search parameter doesn’t exist, this method creates it.\nMDN Reference\nset('pathname', url: URLurl.URL.pathname: stringThe pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.\nMDN Reference\npathname);\n\n\tconst const result: anyresult = await fetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)MDN Reference\nfetch(const api: URLapi).Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>Attaches callbacks for the resolution and/or rejection of the Promise.\n@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then(r: Responser => r: Responser.Body.json(): Promise<any>MDN Reference\njson());\n\treturn const result: anyresult.pathname;\n};type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>rerouteconst reroute: Reroutetype Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>type Reroute = (event: {\n    url: URL;\n    fetch: typeof fetch;\n}) => MaybePromise<string | void>rerouteurl: URLfetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}fetch: {\n    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;\n    (input: string | URL | Request, init?: RequestInit): Promise<Response>;\n}url: URLURL.pathname: stringpathnameconst api: URLvar URL: new (url: string | URL, base?: string | URL) => URLURLURLimport { URL } from 'url'url: URLconst api: URLURL.searchParams: URLSearchParamssearchParamsURLSearchParams.set(name: string, value: string): voidset()url: URLURL.pathname: stringpathnameconst result: anyfetch: (input: string | URL | Request, init?: RequestInit) => Promise<Response> (+1 overload)const api: URLPromise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>r: Responser: ResponseBody.json(): Promise<any>const result: any\n```\n\nExample:\n```text\nimport { import VectorVector } from '$lib/math';\n\n/** @type {import('@sveltejs/kit').Transport} */\nexport const const transport: Transporttransport = {\n\ttype Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}Vector: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof import VectorVector && [value: anyvalue.x, value: anyvalue.y],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([x: anyx, y: anyy]) => new import VectorVector(x: anyx, y: anyy)\n\t}\n};import Vectorconst transport: Transporttype Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}type Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyimport Vectorvalue: anyvalue: anyTransporter<any, any>.decode: (data: any) => anyx: anyy: anyimport Vectorx: anyy: any\n```\n\nExample:\n```text\ntype Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}\n```\n\nExample:\n```text\nimport { import VectorVector } from '$lib/math';\nimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};@since2.11.0Transport } from '@sveltejs/kit';\n\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};@since2.11.0Transport = {\n\ttype Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}Vector: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof import VectorVector && [value: anyvalue.x, value: anyvalue.y],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([x: anyx, y: anyy]) => new import VectorVector(x: anyx, y: anyy)\n\t}\n};import Vectortype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};type Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};class MyCustomTypeMyCustomType.data: anyconst transport: Transporttype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyclass MyCustomTypevalue: MyCustomTypeMyCustomType.data: anyTransporter<any, any>.decode: (data: any) => anydata: anyconstructor MyCustomType(): MyCustomTypedata: anyconst transport: Transporttype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};type Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};class MyCustomTypeMyCustomType.data: anyconst transport: Transporttype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyclass MyCustomTypevalue: MyCustomTypeMyCustomType.data: anyTransporter<any, any>.decode: (data: any) => anydata: anyconstructor MyCustomType(): MyCustomTypedata: anytype Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}type Vector: {\n    encode: (value: any) => false | any[];\n    decode: ([x, y]: any) => any;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyimport Vectorvalue: anyvalue: anyTransporter<any, any>.decode: (data: any) => anyx: anyy: anyimport Vectorx: anyy: any\n```\n\nExample:\n```text\ntype Transport = {\n    [x: string]: Transporter<any, any>;\n}\n```\n\nExample:\n```text\nimport type { type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport } from '@sveltejs/kit';\n\ndeclare class class MyCustomTypeMyCustomType {\n\tMyCustomType.data: anydata: any\n}\n\n// hooks.js\nexport const const transport: Transporttransport: type Transport = {\n    [x: string]: Transporter<any, any>;\n}The transport hook allows you to transport custom types across the server/client boundary.\nEach 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).\nIn the browser, decode turns the encoding back into an instance of the custom type.\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};@since2.11.0referenceTransport = {\n\ttype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}MyCustomType: {\n\t\tTransporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],\n\t\tTransporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)\n\t}\n};type Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};class MyCustomTypeMyCustomType.data: anyconst transport: Transporttype Transport = {\n    [x: string]: Transporter<any, any>;\n}type Transport = {\n    [x: string]: Transporter<any, any>;\n}transportencodedecodeencodefalsedecodeimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}type MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}Transporter<any, any>.encode: (value: any) => anyvalue: anyvalue: anyclass MyCustomTypevalue: MyCustomTypeMyCustomType.data: anyTransporter<any, any>.decode: (data: any) => anydata: anyconstructor MyCustomType(): MyCustomTypedata: any\n```\n\nExample:\n```text\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};\n```\n\nExample:\n```text\ntype MyCustomType: {\n    encode: (value: any) => false | any[];\n    decode: ([data]: any) => MyCustomType;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.299Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":50,"totalLines":1681,"estimatedTokens":23514}}197{"id":"doc-shallow_routing_sveltekit_docs-91b8d771","source":"documentation","title":"Shallow routing • SvelteKit Docs","url":"https://svelte.dev/docs/kit/shallow-routing","text":"Example:\n```text\n<script>\n\timport { pushState } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\n\tfunction showModal() {\n\t\tpushState('', {\n\t\t\tshowModal: true\n\t\t});\n\t}\n</script>\n\n{#if page.state.showModal}\n\t<Modal close={() => history.back()} />\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { pushState } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\n\tfunction showModal() {\n\t\tpushState('', {\n\t\t\tshowModal: true\n\t\t});\n\t}\n</script>\n\n{#if page.state.showModal}\n\t<Modal close={() => history.back()} />\n{/if}\n```\n\nExample:\n```text\n<script>\n\timport { preloadData, pushState, goto } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\timport PhotoPage from './[id]/+page.svelte';\n\n\tlet { data } = $props();\n</script>\n\n{#each data.thumbnails as thumbnail}\n\t<a\n\t\thref=\"/photos/{thumbnail.id}\"\n\t\tonclick={async (e) => {\n\t\t\tif (innerWidth < 640        // bail if the screen is too small\n\t\t\t\t|| e.shiftKey             // or the link is opened in a new window\n\t\t\t\t|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)\n\t\t\t\t// should also consider clicking with a mouse scroll wheel\n\t\t\t) return;\n\n\t\t\t// prevent navigation\n\t\t\te.preventDefault();\n\n\t\t\tconst { href } = e.currentTarget;\n\n\t\t\t// run `load` functions (or rather, get the result of the `load` functions\n\t\t\t// that are already running because of `data-sveltekit-preload-data`)\n\t\t\tconst result = await preloadData(href);\n\n\t\t\tif (result.type === 'loaded' && result.status === 200) {\n\t\t\t\tpushState(href, { selected: result.data });\n\t\t\t} else {\n\t\t\t\t// something bad happened! try navigating\n\t\t\t\tgoto(href);\n\t\t\t}\n\t\t}}\n\t>\n\t\t<img alt={thumbnail.alt} src={thumbnail.src} />\n\t</a>\n{/each}\n\n{#if page.state.selected}\n\t<Modal onclose={() => history.back()}>\n\t\t<!-- pass page data to the +page.svelte component,\n\t\t     just like SvelteKit would on navigation -->\n\t\t<PhotoPage data={page.state.selected} />\n\t</Modal>\n{/if}\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport { preloadData, pushState, goto } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\timport PhotoPage from './[id]/+page.svelte';\n\n\tlet { data } = $props();\n</script>\n\n{#each data.thumbnails as thumbnail}\n\t<a\n\t\thref=\"/photos/{thumbnail.id}\"\n\t\tonclick={async (e) => {\n\t\t\tif (innerWidth < 640        // bail if the screen is too small\n\t\t\t\t|| e.shiftKey             // or the link is opened in a new window\n\t\t\t\t|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)\n\t\t\t\t// should also consider clicking with a mouse scroll wheel\n\t\t\t) return;\n\n\t\t\t// prevent navigation\n\t\t\te.preventDefault();\n\n\t\t\tconst { href } = e.currentTarget;\n\n\t\t\t// run `load` functions (or rather, get the result of the `load` functions\n\t\t\t// that are already running because of `data-sveltekit-preload-data`)\n\t\t\tconst result = await preloadData(href);\n\n\t\t\tif (result.type === 'loaded' && result.status === 200) {\n\t\t\t\tpushState(href, { selected: result.data });\n\t\t\t} else {\n\t\t\t\t// something bad happened! try navigating\n\t\t\t\tgoto(href);\n\t\t\t}\n\t\t}}\n\t>\n\t\t<img alt={thumbnail.alt} src={thumbnail.src} />\n\t</a>\n{/each}\n\n{#if page.state.selected}\n\t<Modal onclose={() => history.back()}>\n\t\t<!-- pass page data to the +page.svelte component,\n\t\t     just like SvelteKit would on navigation -->\n\t\t<PhotoPage data={page.state.selected} />\n\t</Modal>\n{/if}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.300Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":141,"estimatedTokens":870}}198{"id":"doc-cloudflare_workers_sveltekit_docs-22c3dd62","source":"documentation","title":"Cloudflare Workers • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-cloudflare-workers","text":"Example:\n```text\nimport import adapteradapter from '@sveltejs/adapter-cloudflare-workers';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterconst config: Config\n```\n\nExample:\n```text\n{\n\t\"name\": \"<your-service-name>\",\n\t\"account_id\": \"<your-account-id>\",\n\t\"main\": \"./.cloudflare/worker.js\",\n\t\"site\": {\n\t\t\"bucket\": \"./.cloudflare/public\"\n\t},\n\t\"build\": {\n\t\t\"command\": \"npm run build\"\n\t},\n\t\"compatibility_date\": \"2021-11-12\"\n}\n```\n\nExample:\n```text\nhttps://dash.cloudflare.com/<your-account-id>/home\n```\n\nExample:\n```text\nnpm i -D wrangler\nwrangler login\n```\n\nExample:\n```text\nwrangler deploy\n```\n\nExample:\n```text\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\nExample:\n```text\nimport type { RequestHandler } from './$types';\nexport const POST: RequestHandler = async ({ request, platform }) => {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n};\n```\n\nExample:\n```text\nimport { interface KVNamespace<Key extends string = string>KVNamespace, class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.\nPlatform {\n\t\t\tApp.Platform.env?: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n} | undefinedenv?: {\n\t\t\t\ttype YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;\n\t\t\t\ttype YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport {};interface KVNamespace<Key extends string = string>class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>interface App.Platformevent.platformApp.Platform.env?: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n} | undefinedApp.Platform.env?: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n} | undefinedtype YOUR_KV_NAMESPACE: KVNamespace<string>interface KVNamespace<Key extends string = string>type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>\n```\n\nExample:\n```text\nApp.Platform.env?: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n} | undefined\n```\n\nExample:\n```text\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.300Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":110,"estimatedTokens":858}}199{"id":"doc-remote_setup_svelte_ai_docs-4ce5bfc4","source":"documentation","title":"Remote setup • Svelte AI Docs","url":"https://svelte.dev/docs/ai/remote-setup","text":"Example:\n```text\nclaude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\nExample:\n```text\nexperimental_use_rmcp_client = true\n[mcp_servers.svelte]\nurl = \"https://mcp.svelte.dev/mcp\"\n```\n\nExample:\n```text\n/mcp add\n```\n\nExample:\n```text\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"url\": \"https://mcp.svelte.dev/mcp\"\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\nopencode mcp add\n```\n\nExample:\n```text\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Remote\n│\n◇  Enter MCP server URL\n│  https://mcp.svelte.dev/mcp\n```\n\nExample:\n```text\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"type\": \"http\",\n\t\t\t\"url\": \"https://mcp.svelte.dev/mcp\",\n\t\t\t\"tools\": [\"*\"]\n\t\t}\n\t}\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.300Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":63,"estimatedTokens":180}}200{"id":"doc-static_site_generation_sveltekit_docs-501ffd5f","source":"documentation","title":"Static site generation • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-static","text":"Example:\n```text\nimport import adapteradapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// default options are shown. On some platforms\n\t\t\t// these options are set automatically — see below\n\t\t\tpages: stringpages: 'build',\n\t\t\tassets: stringassets: 'build',\n\t\t\tfallback: undefinedfallback: var undefinedundefined,\n\t\t\tprecompress: booleanprecompress: false,\n\t\t\tstrict: booleanstrict: true\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterpages: stringassets: stringfallback: undefinedvar undefinedprecompress: booleanstrict: booleanconst config: Config\n```\n\nExample:\n```text\n// If you're using a fallback (i.e. SPA mode) you don't need to prerender all\n// pages by setting this here, but should prerender as many as possible to\n// avoid large performance and SEO impacts\nexport const const prerender: trueprerender = true;const prerender: true\n```\n\nExample:\n```text\nimport import adapteradapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({...})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterconst config: Config\n```\n\nExample:\n```text\nimport import adapteradapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\tfallback: stringfallback: '404.html'\n\t\t}),\n\t\tKitConfig.paths?: {\n    assets?: \"\" | `http://${string}` | `https://${string}`;\n    base?: \"\" | `/${string}`;\n    relative?: boolean;\n} | undefinedpaths: {\n\t\t\tbase: var process: NodeJS.Processprocess.NodeJS.Process.argv: string[]The process.argv property returns an array containing the command-line\narguments passed when the Node.js process was launched. The first element will\nbe \n{@link \nexecPath\n}\n. See process.argv0 if access to the original value\nof argv[0] is needed. The second element will be the path to the JavaScript\nfile being executed. The remaining elements will be any additional command-line\narguments.\nFor example, assuming the following script for process-args.js:\nimport { argv } from 'node:process';\n\n// print process.argv\nargv.forEach((val, index) => {\n  console.log(`${index}: ${val}`);\n});Launching the Node.js process as:\nnode process-args.js one two=three fourWould generate the output:\n0: /usr/local/bin/node\n1: /Users/mjr/work/node/process-args.js\n2: one\n3: two=three\n4: four@sincev0.1.27argv.Array<string>.includes(searchElement: string, fromIndex?: number): booleanDetermines whether an array includes a certain element, returning true or false as appropriate.\n@paramsearchElement The element to search for.@paramfromIndex The position in this array at which to begin searching for searchElement.includes('dev') ? '' : var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnvThe process.env property returns an object containing the user environment.\nSee environ(7).\nAn example of this object looks like:\n{\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}It is possible to modify this object, but such modifications will not be\nreflected outside the Node.js process, or (unless explicitly requested)\nto other Worker threads.\nIn other words, the following example would not work:\nnode -e 'process.env.foo = \"bar\"' && echo $fooWhile the following will:\nimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);Assigning a property on process.env will implicitly convert the value\nto a string. This behavior is deprecated. Future versions of Node.js may\nthrow an error when the value is not a string, number, or boolean.\nimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'Use delete to delete a property from process.env.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedOn Windows operating systems, environment variables are case-insensitive.\nimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1Unless explicitly specified when creating a Worker instance,\neach Worker thread has its own copy of process.env, based on its\nparent thread’s process.env, or whatever was specified as the env option\nto the Worker constructor. Changes to process.env will not be visible\nacross Worker threads, and only the main thread can make changes that\nare visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner\nunlike the main thread.\n@sincev0.1.27env.string | undefinedBASE_PATH\n\t\t}\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterfallback: stringKitConfig.paths?: {\n    assets?: \"\" | `http://${string}` | `https://${string}`;\n    base?: \"\" | `/${string}`;\n    relative?: boolean;\n} | undefinedKitConfig.paths?: {\n    assets?: \"\" | `http://${string}` | `https://${string}`;\n    base?: \"\" | `/${string}`;\n    relative?: boolean;\n} | undefinedvar process: NodeJS.ProcessNodeJS.Process.argv: string[]process.argvprocess.argv0argv[0]process-args.jsimport { argv } from 'node:process';\n\n// print process.argv\nargv.forEach((val, index) => {\n  console.log(`${index}: ${val}`);\n});node process-args.js one two=three four0: /usr/local/bin/node\n1: /Users/mjr/work/node/process-args.js\n2: one\n3: two=three\n4: fourArray<string>.includes(searchElement: string, fromIndex?: number): booleanvar process: NodeJS.ProcessNodeJS.Process.env: NodeJS.ProcessEnvprocess.envenviron(7){\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}Workernode -e 'process.env.foo = \"bar\"' && echo $fooimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);process.envimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'deleteprocess.envimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefinedimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1WorkerWorkerprocess.envprocess.envenvWorkerprocess.envWorkerprocess.envWorkerstring | undefinedconst config: Config\n```\n\nExample:\n```text\nKitConfig.paths?: {\n    assets?: \"\" | `http://${string}` | `https://${string}`;\n    base?: \"\" | `/${string}`;\n    relative?: boolean;\n} | undefined\n```\n\nExample:\n```text\nimport { argv } from 'node:process';\n\n// print process.argv\nargv.forEach((val, index) => {\n  console.log(`${index}: ${val}`);\n});\n```\n\nExample:\n```text\nnode process-args.js one two=three four\n```\n\nExample:\n```text\n0: /usr/local/bin/node\n1: /Users/mjr/work/node/process-args.js\n2: one\n3: two=three\n4: four\n```\n\nExample:\n```text\n{\n  TERM: 'xterm-256color',\n  SHELL: '/usr/local/bin/bash',\n  USER: 'maciej',\n  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',\n  PWD: '/Users/maciej',\n  EDITOR: 'vim',\n  SHLVL: '1',\n  HOME: '/Users/maciej',\n  LOGNAME: 'maciej',\n  _: '/usr/local/bin/node'\n}\n```\n\nExample:\n```text\nnode -e 'process.env.foo = \"bar\"' && echo $foo\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.foo = 'bar';\nconsole.log(env.foo);\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.test = null;\nconsole.log(env.test);\n// => 'null'\nenv.test = undefined;\nconsole.log(env.test);\n// => 'undefined'\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.TEST = 1;\ndelete env.TEST;\nconsole.log(env.TEST);\n// => undefined\n```\n\nExample:\n```text\nimport { env } from 'node:process';\n\nenv.TEST = 1;\nconsole.log(env.test);\n// => 1\n```\n\nExample:\n```text\nname: Deploy to GitHub Pages\n\non:\n  push:\n    branches: 'main'\n\njobs:\n  build_site:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v7\n\n      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`\n      # - name: Install pnpm\n      #   uses: pnpm/action-setup@v6\n      #   with:\n      #     version: 8\n\n      - name: Install Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version: 20\n          cache: npm\n\n      - name: Install dependencies\n        run: npm i\n\n      - name: build\n        env:\n          BASE_PATH: '/${{ github.event.repository.name }}'\n        run: |\n          npm run build\n\n      - name: Upload Artifacts\n        uses: actions/upload-pages-artifact@v5\n        with:\n          # this should match the `pages` option in your adapter-static options\n          path: 'build/'\n\n  deploy:\n    needs: build_site\n    runs-on: ubuntu-latest\n\n    permissions:\n      pages: write\n      id-token: write\n\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n\n    steps:\n      - name: Deploy\n        id: deployment\n        uses: actions/deploy-pages@v5\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.301Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":347,"estimatedTokens":2629}}201{"id":"doc-netlify_sveltekit_docs-d8f3bb2f","source":"documentation","title":"Netlify • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-netlify","text":"Example:\n```text\nimport import adapteradapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\t// default options are shown\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// if true, will create a Netlify Edge Function rather\n\t\t\t// than using standard Node-based functions\n\t\t\tedge: booleanedge: false,\n\n\t\t\t// if true, will split your app into multiple functions\n\t\t\t// instead of creating a single one for the entire app.\n\t\t\t// if `edge` is true, this option cannot be used\n\t\t\tsplit: booleansplit: false\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapteredge: booleansplit: booleanconst config: Config\n```\n\nExample:\n```text\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n```\n\nExample:\n```text\nimport import adapteradapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// will create a Netlify Edge Function using Deno-based\n\t\t\t// rather than using standard Node-based functions\n\t\t\tedge: booleanedge: true\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapteredge: booleanconst config: Config\n```\n\nExample:\n```text\n/** @type {import('./$types').PageServerLoad} */\nexport const load = async (event) => {\n\tconst context = event.platform?.context;\n\tconsole.log(context); // shows up in your functions log in the Netlify app\n};\n```\n\nExample:\n```text\nimport type { PageServerLoad } from './$types';\n\nexport const load: PageServerLoad = async (event) => {\n\tconst context = event.platform?.context;\n\tconsole.log(context); // shows up in your functions log in the Netlify app\n};\n```\n\nExample:\n```text\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n\n[functions]\n\tdirectory = \"functions\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.301Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":83,"estimatedTokens":650}}202{"id":"doc-vercel_sveltekit_docs-873bccd8","source":"documentation","title":"Vercel • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-vercel","text":"Example:\n```text\nimport function adapter(config?: Config): Adapteradapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: function adapter(config?: Config): Adapteradapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;function adapter(config?: Config): Adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildfunction adapter(config?: Config): Adapterconst config: Config\n```\n\nExample:\n```text\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const const config: Configconfig = {\n\tServerlessConfig.split?: boolean | undefinedIf true, this route will always be deployed as its own separate function\nsplit: true\n};const config: ConfigServerlessConfig.split?: boolean | undefinedtrue\n```\n\nExample:\n```text\nimport type { type Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}Config } from '@sveltejs/adapter-vercel';\n\nexport const const config: Configconfig: type Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}Config = {\n\tServerlessConfig.split?: boolean | undefinedIf true, this route will always be deployed as its own separate function\nsplit: true\n};type Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}type Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}const config: Configtype Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}type Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}ServerlessConfig.split?: boolean | undefinedtrue\n```\n\nExample:\n```text\ntype Config = ServerlessConfig & {\n    images?: ImagesConfig;\n}\n```\n\nExample:\n```text\nimport function adapter(config?: Config): Adapteradapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: function adapter(config?: Config): Adapteradapter({\n\t\t\timages?: ImagesConfig | undefinedhttps://vercel.com/docs/build-output-api/v3/configuration#images\nimages: {\n\t\t\t\tsizes: number[]sizes: [640, 828, 1200, 1920, 3840],\n\t\t\t\tformats?: ImageFormat[] | undefinedformats: ['image/avif', 'image/webp'],\n\t\t\t\tminimumCacheTTL?: number | undefinedminimumCacheTTL: 300,\n\t\t\t\tdomains: string[]domains: ['example-app.vercel.app'],\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;function adapter(config?: Config): Adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildfunction adapter(config?: Config): Adapterimages?: ImagesConfig | undefinedsizes: number[]formats?: ImageFormat[] | undefinedminimumCacheTTL?: number | undefineddomains: string[]const config: Config\n```\n\nExample:\n```text\nimport { import BYPASS_TOKENBYPASS_TOKEN } from '$env/static/private';\n\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const const config: {\n    isr: {\n        expiration: number;\n        bypassToken: any;\n        allowQuery: string[];\n    };\n}config = {\n\tisr: {\n    expiration: number;\n    bypassToken: any;\n    allowQuery: string[];\n}isr: {\n\t\texpiration: numberexpiration: 60,\n\t\tbypassToken: anybypassToken: import BYPASS_TOKENBYPASS_TOKEN,\n\t\tallowQuery: string[]allowQuery: ['search']\n\t}\n};import BYPASS_TOKENconst config: {\n    isr: {\n        expiration: number;\n        bypassToken: any;\n        allowQuery: string[];\n    };\n}const config: {\n    isr: {\n        expiration: number;\n        bypassToken: any;\n        allowQuery: string[];\n    };\n}isr: {\n    expiration: number;\n    bypassToken: any;\n    allowQuery: string[];\n}isr: {\n    expiration: number;\n    bypassToken: any;\n    allowQuery: string[];\n}expiration: numberbypassToken: anyimport BYPASS_TOKENallowQuery: string[]\n```\n\nExample:\n```text\nconst config: {\n    isr: {\n        expiration: number;\n        bypassToken: any;\n        allowQuery: string[];\n    };\n}\n```\n\nExample:\n```text\nisr: {\n    expiration: number;\n    bypassToken: any;\n    allowQuery: string[];\n}\n```\n\nExample:\n```text\nvar crypto: CryptoMDN Reference\ncrypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.\nAvailable only in secure contexts.\nMDN Reference\nrandomUUID();var crypto: CryptoCrypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`randomUUID()\n```\n\nExample:\n```text\nvercel env pull .env.development.local\n```\n\nExample:\n```text\nimport { const VERCEL_COMMIT_REF: stringVERCEL_COMMIT_REF } from '$env/static/private';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>load() {\n\treturn {\n\t\tdeploymentGitBranch: stringdeploymentGitBranch: const VERCEL_COMMIT_REF: stringVERCEL_COMMIT_REF\n\t};\n}const VERCEL_COMMIT_REF: stringfunction load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>deploymentGitBranch: stringconst VERCEL_COMMIT_REF: string\n```\n\nExample:\n```text\nimport { const VERCEL_COMMIT_REF: stringVERCEL_COMMIT_REF } from '$env/static/private';\nimport type { type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';\n\nexport const const load: LayoutServerLoadload: type LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = () => {\n\treturn {\n\t\tdeploymentGitBranch: stringdeploymentGitBranch: const VERCEL_COMMIT_REF: stringVERCEL_COMMIT_REF\n\t};\n};const VERCEL_COMMIT_REF: stringtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>const load: LayoutServerLoadtype LayoutServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>deploymentGitBranch: stringconst VERCEL_COMMIT_REF: string\n```\n\nExample:\n```text\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n</script>\n\n<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>\n```\n\nExample:\n```text\n<script lang=\"ts\">\n\timport type { LayoutProps } from './$types';\n\n\tlet { data }: LayoutProps = $props();\n</script>\n\n<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.301Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":204,"estimatedTokens":1795}}203{"id":"doc-cloudflare_sveltekit_docs-090511e9","source":"documentation","title":"Cloudflare • SvelteKit Docs","url":"https://svelte.dev/docs/kit/adapter-cloudflare","text":"Example:\n```text\nimport import adapteradapter from '@sveltejs/adapter-cloudflare';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter({\n\t\t\t// See below for an explanation of these options\n\t\t\tconfig: undefinedconfig: var undefinedundefined,\n\t\t\tplatformProxy: {\n    configPath: undefined;\n    environment: undefined;\n    persist: undefined;\n}platformProxy: {\n\t\t\t\tconfigPath: undefinedconfigPath: var undefinedundefined,\n\t\t\t\tenvironment: undefinedenvironment: var undefinedundefined,\n\t\t\t\tpersist: undefinedpersist: var undefinedundefined\n\t\t\t},\n\t\t\tfallback: stringfallback: 'plaintext',\n\t\t\troutes: {\n    include: string[];\n    exclude: string[];\n}routes: {\n\t\t\t\tinclude: string[]include: ['/*'],\n\t\t\t\texclude: string[]exclude: ['<all>']\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterconfig: undefinedvar undefinedplatformProxy: {\n    configPath: undefined;\n    environment: undefined;\n    persist: undefined;\n}platformProxy: {\n    configPath: undefined;\n    environment: undefined;\n    persist: undefined;\n}configPath: undefinedvar undefinedenvironment: undefinedvar undefinedpersist: undefinedvar undefinedfallback: stringroutes: {\n    include: string[];\n    exclude: string[];\n}routes: {\n    include: string[];\n    exclude: string[];\n}include: string[]exclude: string[]const config: Config\n```\n\nExample:\n```text\nplatformProxy: {\n    configPath: undefined;\n    environment: undefined;\n    persist: undefined;\n}\n```\n\nExample:\n```text\nroutes: {\n    include: string[];\n    exclude: string[];\n}\n```\n\nExample:\n```text\n{\n\t\"name\": \"<any-name-you-want>\",\n\t\"main\": \".svelte-kit/cloudflare/_worker.js\",\n\t\"compatibility_flags\": [\"nodejs_als\"],\n\t\"compatibility_date\": \"<YYYY-MM-DD>\",\n\t\"assets\": {\n\t\t\"binding\": \"ASSETS\",\n\t\t\"directory\": \".svelte-kit/cloudflare\",\n\t}\n}\n```\n\nExample:\n```text\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\nExample:\n```text\nimport type { RequestHandler } from './$types';\nexport const POST: RequestHandler = async ({ request, platform }) => {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n};\n```\n\nExample:\n```text\nimport { interface KVNamespace<Key extends string = string>KVNamespace, class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.\nPlatform {\n\t\t\tApp.Platform.env: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n}env: {\n\t\t\t\ttype YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;\n\t\t\t\ttype YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport {};interface KVNamespace<Key extends string = string>class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>interface App.Platformevent.platformApp.Platform.env: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n}App.Platform.env: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n}type YOUR_KV_NAMESPACE: KVNamespace<string>interface KVNamespace<Key extends string = string>type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>class DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>\n```\n\nExample:\n```text\nApp.Platform.env: {\n    YOUR_KV_NAMESPACE: KVNamespace;\n    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n}\n```\n\nExample:\n```text\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\nExample:\n```text\nimport adapter from '@sveltejs/adapter-cloudflare-workers';\nimport import adapteradapter from '@sveltejs/adapter-cloudflare';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst const config: Configconfig = {\n\tConfig.kit?: KitConfig | undefinedSvelteKit options.\n@seehttps://svelte.dev/docs/kit/configurationkit: {\n\t\tKitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.\n@defaultundefinedadapter: import adapteradapter()\n\t}\n};\n\nexport default const config: Configconfig;import adapterconst config: ConfigConfig.kit?: KitConfig | undefinedKitConfig.adapter?: Adapter | undefinedvite buildimport adapterconst config: Config\n```\n\nExample:\n```text\nsite.bucket = \".cloudflare/public\"\nassets.directory = \".cloudflare/public\"\nassets.binding = \"ASSETS\" # Exclude this if you don't have a `main` key configured.\n```\n\nExample:\n```text\n{\n\t\"site\": {\n\t\t\"bucket\": \".cloudflare/public\"\n\t},\n\t\"assets\": {\n\t\t\"directory\": \".cloudflare/public\",\n\t\t\"binding\": \"ASSETS\" // Exclude this if you don't have a `main` key configured.\n\t}\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.302Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":178,"estimatedTokens":1394}}204{"id":"doc-service_worker_sveltekit_docs-17c9d22d","source":"documentation","title":"$service-worker • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$service-worker","text":"Example:\n```text\nimport { const base: stringThe base path of the deployment. Typically this is equivalent to config.kit.paths.base, but it is calculated from location.pathname meaning that it will continue to work correctly if the site is deployed to a subdirectory.\nNote that there is a base but no assets, since service workers cannot be used if config.kit.paths.assets is specified.\nreferencebase, const build: string[]An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build).\nDuring development, this is an empty array.\nreferencebuild, const files: string[]An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files\nreferencefiles, const prerendered: string[]An array of pathnames corresponding to prerendered pages and endpoints.\nDuring development, this is an empty array.\nreferenceprerendered, const version: stringSee config.kit.version. It’s useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\nreferenceversion } from '$service-worker';const base: stringbaseconfig.kit.paths.baselocation.pathnamebaseassetsconfig.kit.paths.assetsconst build: string[]cache.addAll(build)const files: string[]config.kit.files.assetsstaticconfig.kit.serviceWorker.filesconst prerendered: string[]const version: stringconfig.kit.version\n```\n\nExample:\n```text\nconst base: string;\n```\n\nExample:\n```text\nconst build: string[];\n```\n\nExample:\n```text\nconst files: string[];\n```\n\nExample:\n```text\nconst prerendered: string[];\n```\n\nExample:\n```text\nconst version: string;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.302Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":39,"estimatedTokens":447}}205{"id":"doc-local_setup_svelte_ai_docs-dbac82db","source":"documentation","title":"Local setup • Svelte AI Docs","url":"https://svelte.dev/docs/ai/local-setup","text":"Example:\n```text\nnpx -y @sveltejs/mcp\n```\n\nExample:\n```text\nclaude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp\n```\n\nExample:\n```text\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\nExample:\n```text\n[mcp_servers.svelte]\ncommand = \"npx\"\nargs = [\"-y\", \"@sveltejs/mcp\"]\n```\n\nExample:\n```text\n/mcp add\n```\n\nExample:\n```text\nopencode mcp add\n```\n\nExample:\n```text\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Local\n│\n◆  Enter command to run\n│  npx -y @sveltejs/mcp\n```\n\nExample:\n```text\n{\n\t\"svelte\": {\n\t\t\"command\": \"npx\",\n\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t}\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.302Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":66,"estimatedTokens":176}}206{"id":"doc-env_static_private_sveltekit_docs-56a53591","source":"documentation","title":"$env/static/private • SvelteKit Docs","url":"https://svelte.dev/docs/kit/$env-static-private","text":"Example:\n```text\nENVIRONMENT=production\nPUBLIC_BASE_URL=http://site.com\n```\n\nExample:\n```text\nimport { import ENVIRONMENTENVIRONMENT, import PUBLIC_BASE_URLPUBLIC_BASE_URL } from '$env/static/private';\n\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import ENVIRONMENTENVIRONMENT); // => \"production\"\nvar console: ConsoleThe console module provides a simple debugging console that is similar to the\nJavaScript console mechanism provided by web browsers.\nThe module exports two specific components:\n\nA Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.\nA global console instance configured to write to process.stdout and\nprocess.stderr. The global console can be used without importing the node:console module.\n\nWarning: The global console object’s methods are neither consistently\nsynchronous like the browser APIs they resemble, nor are they consistently\nasynchronous like all other Node.js streams. See the note on process I/O for\nmore information.\nExample using the global console:\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrExample using the Console class:\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the\nfirst used as the primary message and all additional used as substitution\nvalues similar to printf(3)\n(the arguments are all passed to util.format()).\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoutSee util.format() for more information.\n@sincev0.1.100log(import PUBLIC_BASE_URLPUBLIC_BASE_URL); // => throws error during buildimport ENVIRONMENTimport PUBLIC_BASE_URLvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import ENVIRONMENTvar console: ConsoleconsoleConsoleconsole.log()console.error()console.warn()consoleprocess.stdoutprocess.stderrconsolenode:consolenote on process I/Oconsoleconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderrConsoleconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to errConsole.log(message?: any, ...optionalParams: any[]): void (+1 overload)stdoutprintf(3)util.format()const count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdoututil.format()import PUBLIC_BASE_URL\n```\n\nExample:\n```text\nconsole.log('hello world');\n// Prints: hello world, to stdout\nconsole.log('hello %s', 'world');\n// Prints: hello world, to stdout\nconsole.error(new Error('Whoops, something bad happened'));\n// Prints error message and stack trace to stderr:\n//   Error: Whoops, something bad happened\n//     at [eval]:5:15\n//     at Script.runInThisContext (node:vm:132:18)\n//     at Object.runInThisContext (node:vm:309:38)\n//     at node:internal/process/execution:77:19\n//     at [eval]-wrapper:6:22\n//     at evalScript (node:internal/process/execution:76:60)\n//     at node:internal/main/eval_string:23:3\n\nconst name = 'Will Robinson';\nconsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to stderr\n```\n\nExample:\n```text\nconst out = getStreamSomehow();\nconst err = getStreamSomehow();\nconst myConsole = new console.Console(out, err);\n\nmyConsole.log('hello world');\n// Prints: hello world, to out\nmyConsole.log('hello %s', 'world');\n// Prints: hello world, to out\nmyConsole.error(new Error('Whoops, something bad happened'));\n// Prints: [Error: Whoops, something bad happened], to err\n\nconst name = 'Will Robinson';\nmyConsole.warn(`Danger ${name}! Danger!`);\n// Prints: Danger Will Robinson! Danger!, to err\n```\n\nExample:\n```text\nconst count = 5;\nconsole.log('count: %d', count);\n// Prints: count: 5, to stdout\nconsole.log('count:', count);\n// Prints: count: 5, to stdout\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.303Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":238,"estimatedTokens":2525}}207{"id":"doc-https_svelte_dev_docs_kit_sveltejs_kit_hooks_llm-3ac5fbb8","source":"documentation","title":"https://svelte.dev/docs/kit/@sveltejs-kit-hooks/llms.txt","url":"https://svelte.dev/docs/kit/@sveltejs-kit-hooks/llms.txt","text":"[CALLOUT]\nImport `defineEnvVars` from `@sveltejs/kit/env` instead\n\n```dts function defineEnvVars< T extends Record> >(variables: T): T; ```\n\n```dts function sequence(...handlers: Handle[]): Handle; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.303Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":8,"estimatedTokens":54}}208{"id":"doc-https_svelte_dev_docs_kit_app_stores_llms_txt-4ed1154b","source":"documentation","title":"https://svelte.dev/docs/kit/$app-stores/llms.txt","url":"https://svelte.dev/docs/kit/$app-stores/llms.txt","text":"```dts function getStores(): { page; navigating; updated; }; ```\n\n[CALLOUT]\nUse `navigating` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n```dts const ('svelte/store').Readable< import('@sveltejs/kit').Navigation | null >; ```\n\n[CALLOUT]\nUse `page` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n```dts const ('svelte/store').Readable< import('@sveltejs/kit').Page >; ```\n\n[CALLOUT]\nUse `updated` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n```dts const ('svelte/store').Readable & { check(): Promise; }; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.303Z","totalSectionsIncluded":7,"totalCodeBlocksIncluded":0,"totalLines":18,"estimatedTokens":208}}209{"id":"doc-https_svelte_dev_docs_kit_migrating_llms_txt-681f8499","source":"documentation","title":"https://svelte.dev/docs/kit/migrating/llms.txt","url":"https://svelte.dev/docs/kit/migrating/llms.txt","text":"declare module 'html-minifier'; // @filename: index.js // ---cut--- import { minify } from 'html-minifier'; import { building } from '$app/environment'; const minification_options = { , , , , , ignoreCustomComments: [/^#/], , , , , // some hydration code needs comments, so leave them in , , , , , }; /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { let page = ''; return resolve(event, { transformPageChunk: ({ html, done }) => { page += html; if (done) { return building ? minify(page, minification_options) : page; } } }); } ``` Note that `prerendering` is `false` when using `vite preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.303Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":198}}210{"id":"doc-and_meta_name_description_elements_inside_a_svel-6c3e5932","source":"documentation","title":"` and `<meta name=\"description\">` elements inside a [`<svelte:head>`](../svelte/svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation. > [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`page.data`]($app-state)) in a `<svelte:head>` in your root [layout](routing#layout). ### Sitemaps [Sitemaps](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap) help search engines prioritize pages within your site, particularly when you have a large amount of content. You can create a sitemap dynamically using an endpoint: ```js /// file: src/routes/sitemap.xml/+server.js export async function GET() { return new Response( ` <?xml version=\"1.0\" encoding=\"UTF-8\" ?> <urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\" xmlns:xhtml=\"http://www.w3.org/1999/xhtml\" xmlns:mobile=\"http://www.google.com/schemas/sitemap-mobile/1.0\" xmlns:news=\"http://www.google.com/schemas/sitemap-news/0.9\" xmlns:image=\"http://www.google.com/schemas/sitemap-image/1.1\" xmlns:video=\"http://www.google.com/schemas/sitemap-video/1.1\" > <!-- <url> elements go here --> </urlset>`.trim(), { headers: { 'Content-Type': 'application/xml' } } ); } ``` ### AMP An unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`inlineStyleThreshold`](configuration#inlineStyleThreshold) option... ```js /// file: svelte.config.js /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { // since <link rel=\"stylesheet\"> isn't // allowed, inline all styles inlineStyleThreshold: Infinity } }; export default config; ``` ...disabling `csr` in your root `+layout.js`/`+layout.server.js`... ```js /// file: src/routes/+layout.server.js export const csr = false; ``` ...adding `amp` to your `app.html` ```html <html amp> ... ``` ...and transforming the HTML using `transformPageChunk` along with `transform` imported from `@sveltejs/amp`: ```js /// file: src/hooks.server.js import * as amp from '@sveltejs/amp'; /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { let buffer = ''; return await resolve(event, { transformPageChunk: ({ html, done }) => { buffer += html; if (done) return amp.transform(buffer); } }); } ``` To prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss): ```js // @filename: ambient.d.ts declare module 'dropcss'; // @filename: index.js // ---cut--- /// file: src/hooks.server.js // @errors: 2307 import * as amp from '@sveltejs/amp'; import dropcss from 'dropcss'; /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { let buffer = ''; return await resolve(event, { transformPageChunk: ({ html, done }) => { buffer += html; if (done) { let css = ''; const markup = amp .transform(buffer) .replace('⚡', 'amp') // dropcss can't handle this character .replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match, attributes, contents) => { css = contents; return `<style amp-custom${attributes}></style>`; }); css = dropcss({ css, html: markup }).css; return markup.replace('</style>', `${css}</style>`); } } }); } ``` > [!NOTE] It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.","url":"https://svelte.dev/docs/kit/seo/llms.txt","text":"` and `<meta name=\"description\">` elements inside a [`<svelte:head>`](../svelte/svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation. > [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`page.data`]($app-state)) in a `<svelte:head>` in your root [layout](routing#layout). ### Sitemaps [Sitemaps](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap) help search engines prioritize pages within your site, particularly when you have a large amount of content. You can create a sitemap dynamically using an endpoint: ```js /// /routes/sitemap.xml/+server.js export async function GET() { return new Response( ` <?xml version=\"1.0\" encoding=\"UTF-8\" ?> <urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\" =\"http://www.w3.org/1999/xhtml\" =\"http://www.google.com/schemas/sitemap-mobile/1.0\" =\"http://www.google.com/schemas/sitemap-news/0.9\" =\"http://www.google.com/schemas/sitemap-image/1.1\" =\"http://www.google.com/schemas/sitemap-video/1.1\" > <!-- <url> elements go here --> </urlset>`.trim(), { headers: { 'Content-Type': 'application/xml' } } ); } ``` ### AMP An unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`inlineStyleThreshold`](configuration#inlineStyleThreshold) option... ```js /// /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { // since <link rel=\"stylesheet\"> isn't // allowed, inline all styles } }; export default config; ``` ...disabling `csr` in your root `+layout.js`/`+layout.server.js`... ```js /// /routes/+layout.server.js export const csr = false; ``` ...adding `amp` to your `app.html` ```html <html amp> ... ``` ...and transforming the HTML using `transformPageChunk` along with `transform` imported from `@sveltejs/amp`: ```js /// /hooks.server.js import * as amp from '@sveltejs/amp'; /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { let buffer = ''; return await resolve(event, { transformPageChunk: ({ html, done }) => { buffer += html; if (done) return amp.transform(buffer); } }); } ``` To prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss): ```js // @filename: ambient.d.ts declare module 'dropcss'; // @filename: index.js // ---cut--- /// /hooks.server.js // @errors: 2307 import * as amp from '@sveltejs/amp'; import dropcss from 'dropcss'; /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { let buffer = ''; return await resolve(event, { transformPageChunk: ({ html, done }) => { buffer += html; if (done) { let css = ''; const markup = amp ); css = dropcss({ css, }).css; return markup.replace('</style>', `${css}</style>`); } } }); } ``` > [!NOTE] It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.303Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":829}}211{"id":"doc-https_svelte_dev_docs_kit_faq_llms_txt-dacd8105","source":"documentation","title":"https://svelte.dev/docs/kit/faq/llms.txt","url":"https://svelte.dev/docs/kit/faq/llms.txt","text":"// ---cut--- import { browser } from '$app/environment'; if (browser) { // client-only code here } ``` You can also run code in `onMount` if you'd like to run it after the component has been first rendered to the DOM: ```js // @filename: ambient.d.ts // @lib: ES2015 declare module 'some-browser-only-library'; // @filename: index.js // ---cut--- import { onMount } from 'svelte'; onMount(async () => { const { method } = await import('some-browser-only-library'); method('hello world'); }); ``` If the library you'd like to use is side-effect free you can also statically import it and it will be tree-shaken out in the server-side build where `onMount` will be automatically replaced with a no-op: ```js // @filename: ambient.d.ts // @lib: ES2015 declare module 'some-browser-only-library'; // @filename: index.js // ---cut--- import { onMount } from 'svelte'; import { method } from 'some-browser-only-library'; onMount(() => { method('hello world'); }); ``` Finally, you may also consider using an `{#await}` block: ```svelte {#await promise} Loading... {:then module} {:catch error} Something went wrong: {error.message} {/await} ``` ## How do I use a different backend API server? You can use [`event.fetch`](./load#Making-fetch-requests) to request data from an external API server, but be aware that you would need to deal with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which will result in complications such as generally requiring requests to be preflighted resulting in higher latency. Requests to a separate subdomain may also increase latency due to an additional DNS lookup, TLS setup, etc. If you wish to use this method, you may find [`handleFetch`](./hooks#handleFetch) helpful. Another approach is to set up a proxy to bypass CORS headaches. In production, you would rewrite a path like `/api` to the API server; for local development, use Vite's [`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy) option. How to set up rewrites in production will depend on your deployment platform. If rewrites aren't an option, you could alternatively add an [API route](./routing#server): ```js /// /routes/api/[...path]/+server.js /** @type {import('./$types').RequestHandler} */ export function GET({ params, url }) { return fetch(`https://example.com/${params.path + url.search}`); } ``` (Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.) ## How do I use middleware? `adapter-node` builds a middleware that you can use with your own server for production mode. In dev, you can add middleware to Vite by using a Vite plugin. For example: ```js /// import { sveltekit } from '@sveltejs/kit/vite'; /** @type {import('vite').Plugin} */ const myPlugin = { name: 'log-request-middleware', configureServer(server) { server.middlewares.use((req, res, next) => { console.log(`Got request ${req.url}`); next(); }); } }; /** @type {import('vite').UserConfig} */ const config = { plugins: [myPlugin, sveltekit()] }; export default config; ``` See [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver) for more details including how to control ordering. ## How do I use Yarn? ### Does it work with Yarn 2? Sort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Node module resolution algorithm, and [doesn't yet work with native JavaScript modules](https://github.com/yarnpkg/berry/issues/638) which SvelteKit — along with an [increasing number of packages](https://github.com/wooorm/npm-esm-vs-cjs) — uses). You can use `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file to disable pnp, but it's probably easier to just use npm or [pnpm](https://pnpm.io/), which is similarly fast and efficient but without the compatibility headaches. ### How do I use with Yarn 3? Currently ESM Support within the latest Yarn (version 3) is considered [experimental](https://github.com/yarnpkg/berry/pull/2161). The below seems to work although your results may vary. First create a new application: ```sh yarn create svelte myapp cd myapp ``` And enable Yarn Berry: ```sh yarn set version berry yarn install ``` One of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file: ```yaml ``` This will cause packages to be downloaded into a local node_modules directory but avoids the above problem and is your best bet for using version 3 of Yarn at this point in time.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.304Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1188}}212{"id":"doc-https_svelte_dev_docs_kit_sveltejs_kit_llms_txt-a54fb845","source":"documentation","title":"https://svelte.dev/docs/kit/@sveltejs-kit/llms.txt","url":"https://svelte.dev/docs/kit/@sveltejs-kit/llms.txt","text":"```dts class Server {/*…*/} ``` ```dts constructor(manifest: SSRManifest); ``` ```dts init(options: ServerInitOptions): Promise; ``` ```dts respond(request: Request, ): Promise; ```\n\n```dts const ```\n\n```dts function error(status: number, ): never; ```\n\n```dts function error( , body?: { } extends App.Error ? App.Error | string | ): never; ```\n\n```dts function fail(status: number): ActionFailure; ```\n\n```dts function fail( , ): ActionFailure; ```\n\n[CALLOUT]\nAvailable since 2.47.3\n\n```dts function invalid( ...issues: (StandardSchemaV1.Issue | string)[] ): never; ```\n\n```dts function isActionFailure(e: unknown): e is ActionFailure; ```\n\n```dts function isHttpError( , status?: T ): e is HttpError_1 & { extends undefined ? }; ```\n\n```dts function isRedirect(e: unknown): e is Redirect_1; ```\n\n[CALLOUT]\nAvailable since 2.47.3\n\n```dts function isValidationError(e: unknown): e is ActionFailure; ```\n\n```dts function json(data: any, init?: ResponseInit): Response; ```\n\n[CALLOUT]\nAvailable since 2.18.0\n\n```dts function normalizeUrl(url: URL | string): { denormalize: (url?: string | URL) => URL; }; ```\n\n```dts function redirect( status: | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), | URL ): never; ```\n\n```dts function text(body: string, init?: ResponseInit): Response; ```\n\n```dts type Action< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, OutputData extends Record | void = Record< string, any > | void, RouteId extends AppRouteId | null = AppRouteId | null > = ( ) => MaybePromise; ```\n\n```dts interface ActionFailure {/*…*/} ``` ```dts ``` ```dts ``` ```dts [uniqueSymbol]: true; ```\n\n{ return ({ result }) => { // result is of type ActionResult }; }} ``` ```dts type ActionResult< Success extends Record | undefined = Record, Failure extends Record | undefined = Record > = | { type: 'success'; data?: Success } | { type: 'failure'; data?: Failure } | { type: 'redirect'; } | { type: 'error'; status?: number; }; ``` ## Actions Shape of the `export const actions = {...}` object in `+page.server.js`. See [form actions](/docs/kit/form-actions) for more information. ```dts type Actions< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, OutputData extends Record | void = Record< string, any > | void, RouteId extends AppRouteId | null = AppRouteId | null > = Record>; ``` ## Adapter [Adapters](/docs/kit/adapters) are responsible for taking the production build and turning it into something that can be deployed to a platform of your choosing. ```dts interface Adapter {/*…*/} ``` ```dts ``` The name of the adapter, using for logging. Will typically correspond to the package name. ```dts adapt: (builder: Builder) => MaybePromise; ``` - `builder` An object provided by SvelteKit that contains methods for adapting the app This function is called after SvelteKit has built your app. ```dts supports?: {/*…*/} ``` Checks called during dev and build to determine whether specific features will work in production with this adapter. ```dts read?: (details: { route: { } }) => boolean; ``` - `details.config` The merged adapter-specific route config exported from the route with `export const config` Test support for `read` from `$app/server`. ```dts instrumentation?: () => boolean; ``` - available since v2.31.0 Test support for `instrumentation.server.js`. To pass, the adapter must support running `instrumentation.server.js` prior to the application code. ```dts emulate?: () => MaybePromise; ``` Creates an `Emulator`, which allows the adapter to influence the environment during dev, build and prerendering. ## AfterNavigate The argument passed to [`afterNavigate`](/docs/kit/$app-navigation#afterNavigate) callbacks. ```dts type AfterNavigate = (Navigation | NavigationEnter) & { /** * Since `afterNavigate` callbacks are called after a navigation completes, they will never be called with a navigation that unloads the page. */ }; ``` ## AwaitedActions ```dts type AwaitedActions< T extends Record any> > = OptionalUnion< { [Key in keyof T]: UnpackValidationError< Awaited> >; }[keyof T] >; ``` ## BeforeNavigate The argument passed to [`beforeNavigate`](/docs/kit/$app-navigation#beforeNavigate) callbacks. ```dts type BeforeNavigate = Navigation & { /** * Call this to prevent the navigation from starting. */ cancel: () => void; }; ``` ## Builder This object is passed to the `adapt` function of adapters. It contains various methods and properties that are useful for adapting the app. ```dts interface Builder {/*…*/} ``` ```dts ``` Print messages to the console. `log.info` and `log.minor` are silent unless Vite's `logLevel` is `info`. ```dts rimraf: (dir: string) => void; ``` Remove `dir` and all its contents. ```dts mkdirp: (dir: string) => void; ``` Create `dir` and any required parent directories. ```dts ``` The fully resolved Svelte config. ```dts ``` Information about prerendered pages and assets, if any. ```dts []; ``` An array of all routes (including prerendered) ```dts createEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise; ``` - `fn` A function that groups a set of routes into an entry point - deprecated Use `builder.routes` instead Create separate functions that map to one or more routes of your app. ```dts findServerAssets: (routes: RouteDefinition[]) => string[]; ``` Find all the assets imported by server files belonging to `routes` ```dts generateFallback: (dest: string) => Promise; ``` Generate a fallback page for a static webserver to use when no route is matched. Useful for single-page apps. ```dts generateEnvModule: () => void; ``` Generate a module exposing build-time environment variables as `$env/dynamic/public` or `$app/env/public` if the app uses it. ```dts generateManifest: (opts: { routes?: RouteDefinition[] }) => string; ``` - `opts` a relative path to the base directory of the app and optionally in which format (esm or cjs) the manifest should be generated Generate a server-side manifest to initialise the SvelteKit [server](/docs/kit/@sveltejs-kit#Server) with. ```dts getBuildDirectory: (name: string) => string; ``` - `name` path to the file, relative to the build directory Resolve a path to the `name` directory inside `outDir`, e.g. `/path/to/.svelte-kit/my-adapter`. ```dts getClientDirectory: () => string; ``` Get the fully resolved path to the directory containing client-side assets, including the contents of your `static` directory. ```dts getServerDirectory: () => string; ``` Get the fully resolved path to the directory containing server-side code. ```dts getAppPath: () => string; ``` Get the application path including any configured `base` path, e.g. `my-base-path/_app`. ```dts writeClient: (dest: string) => string[]; ``` - `dest` the destination folder - returns an array of files written to `dest` Write client assets to `dest`. ```dts writePrerendered: (dest: string) => string[]; ``` - `dest` the destination folder - returns an array of files written to `dest` Write prerendered files to `dest`. ```dts writeServer: (dest: string) => string[]; ``` - `dest` the destination folder - returns an array of files written to `dest` Write server-side code to `dest`. ```dts copy: ( , , opts?: { filter?(basename: string): boolean; replace?: Record; } ) => string[]; ``` - `from` the source file or directory - `to` the destination file or directory - `opts.filter` a function to determine whether a file or directory should be copied - `opts.replace` a map of strings to replace - returns an array of files that were copied Copy a file or directory. ```dts hasServerInstrumentationFile: () => boolean; ``` - returns true if the server instrumentation file exists, false otherwise - available since v2.31.0 Check if the server instrumentation file exists. ```dts instrument: (args: { start?: string; module?: | { []; } | { generateText: (args: { }) => string; }; }) => void; ``` - `options` an object containing the following `options.entrypoint` the path to the entrypoint to trace. - `options.instrumentation` the path to the instrumentation file. - `options.start` the name of the start file. This is what `entrypoint` will be renamed to. - `options.module` configuration for the resulting entrypoint module. - `options.module.generateText` a function that receives the relative paths to the instrumentation and start files, and generates the text of the module to be traced. If not provided, the default implementation will be used, which uses top-level await. - available since v2.31.0 Instrument `entrypoint` with `instrumentation`. Renames `entrypoint` to `start` and creates a new module at `entrypoint` which imports `instrumentation` and then dynamically imports `start`. This allows the module hooks necessary for instrumentation libraries to be loaded prior to any application code. \"Live exports\" will not work. If your adapter uses live exports, your users will need to manually import the server instrumentation on startup. - If `tla` is `false`, OTEL auto-instrumentation may not work properly. Use it if your environment supports it. - Use `hasServerInstrumentationFile` to check if the user has a server instrumentation file; if they don't, you shouldn't do this. ```dts compress: (directory: string) => Promise; ``` - `directory` The directory containing the files to be compressed Compress files in `directory` with gzip and brotli, where appropriate. Generates `.gz` and `.br` files alongside the originals. ## ClientInit Available since 2.10.0 The [`init`](/docs/kit/hooks#init) will be invoked once the app starts in the browser ```dts type ClientInit = () => MaybePromise; ``` ## Config See the [configuration reference](/docs/kit/configuration) for details. ## Cookies ```dts interface Cookies {/*…*/} ``` ```dts get: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined; ``` - `name` the name of the cookie - `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options) Gets a cookie that was previously set with `cookies.set`, or from the request headers. ```dts getAll: (opts?: import('cookie').CookieParseOptions) => Array<{ }>; ``` - `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options) Gets all cookies that were previously set with `cookies.set`, or from the request headers. ```dts set: ( , , ('cookie').CookieSerializeOptions & { } ) => void; ``` - `name` the name of the cookie - `value` the cookie value - `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options) Sets a cookie. This will add a `set-cookie` header to the response, but also make the cookie available via `cookies.get` or `cookies.getAll` during the current request. The `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`. You must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children ```dts delete: (name: string, ('cookie').CookieSerializeOptions & { }) => void; ``` - `name` the name of the cookie - `opts` the options, passed directly to `cookie.serialize`. The `path` must match the path of the cookie you want to delete. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options) Deletes a cookie by setting its value to an empty string and setting the expiry date in the past. You must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children ```dts serialize: ( , , ('cookie').CookieSerializeOptions & { } ) => string; ``` - `name` the name of the cookie - `value` the cookie value - `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options) Serialize a cookie name-value pair into a `Set-Cookie` header string, but don't apply it to the response. The `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`. You must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children ## Emulator A collection of functions that influence the environment during dev, build and prerendering ```dts interface Emulator {/*…*/} ``` ```dts platform?(details: { }): MaybePromise; ``` A function that is called with the current route `config` and `prerender` option and returns an `App.Platform` object ## EnvVarConfig [Environment variables](/docs/kit/environment-variables) can be configured by exporting a `variables` object from `src/env.ts`, using [`defineEnvVars`](/docs/kit/@sveltejs-kit-env#defineEnvVars). ```dts interface EnvVarConfig {/*…*/} ``` ```dts public?: boolean; ``` - default `false` Whether the environment variable can be accessed by client-side code. - if `true`, it can be imported from `$app/env/public` - if `false`, it can be imported from `$app/env/private`, which is a [server-only module](/docs/kit/server-only-modules) ```dts static?: boolean; ``` - default `false` Whether the value is determined at build time or when the app runs. - if `true`, the build time value is inlined into the bundle. This enables optimisations like dead-code elimination - if `false`, the value is read from the environment when the app starts ```dts schema?: StandardSchemaV1; ``` A [Standard Schema](https://standardschema.dev/) validator that is applied to the value when the app starts. The validator can output any value — not necessarily a string — but public, non-static values must be serializable by [devalue](https://github.com/sveltejs/devalue) so that they can be sent to the browser. If omitted, the value must be a non-empty string. ```dts description?: string; ``` A description of the variable that will be used for inline documentation on hover. ## Handle The [`handle`](/docs/kit/hooks#handle) hook runs every time the SvelteKit server receives a [request](/docs/kit/web-standards#Fetch-APIs-Request) and determines the [response](/docs/kit/web-standards#Fetch-APIs-Response). It receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example). ```dts type Handle = (input: { resolve: ( , opts?: ResolveOptions ) => MaybePromise; }) => MaybePromise; ``` ## HandleClientError The client-side [`handleError`](/docs/kit/hooks#handleError) hook runs when an unexpected error is thrown while navigating. If an unexpected error is thrown during loading or the following render, this function will be called with the error and the event. Make sure that this function _never_ throws an error. ```dts type HandleClientError = (input: { }) => MaybePromise; ``` ## HandleFetch The [`handleFetch`](/docs/kit/hooks#handleFetch) hook allows you to modify (or replace) the result of an [`event.fetch`](/docs/kit/load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`. ```dts type HandleFetch = (input: { fetch; }) => MaybePromise; ``` ## HandleServerError The server-side [`handleError`](/docs/kit/hooks#handleError) hook runs when an unexpected error is thrown while responding to a request. If an unexpected error is thrown during loading or rendering, this function will be called with the error and the event. Make sure that this function _never_ throws an error. ```dts type HandleServerError = (input: { }) => MaybePromise; ``` ## HandleValidationError The [`handleValidationError`](/docs/kit/hooks#handleValidationError) hook runs when the argument to a remote function fails validation. It will be called with the validation issues and the event, and must return an object shape that matches `App.Error`. ```dts type HandleValidationError< Issue extends StandardSchemaV1.Issue = StandardSchemaV1.Issue > = (input: { []; }) => MaybePromise; ``` ## HttpError The object returned by the [`error`](/docs/kit/@sveltejs-kit#error) function. ```dts interface HttpError {/*…*/} ``` ```dts ``` The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses), in the range 400-599. ```dts ``` The content of the error. ## InvalidField A function and proxy object used to imperatively create validation errors in form handlers. Access properties to create field-specific issues: `issue.fieldName('message')`. The type structure mirrors the input data structure for type-safe field access. Call `invalid(issue.foo(...), issue.nested.bar(...))` to throw a validation error. ```dts type InvalidField = WillRecurseIndefinitely extends true ? extends | string | number | boolean | File ? (message: string) => StandardSchemaV1.Issue : NonNullable extends Array ? { [K in number]: InvalidField; } & ((message: string) => StandardSchemaV1.Issue) : NonNullable extends RemoteFormInput ? { [K in keyof T]-?: InvalidField; } & (( ) => StandardSchemaV1.Issue) : Record; ``` ## KitConfig See the [configuration reference](/docs/kit/configuration) for details. ## LessThan ```dts type LessThan< TNumber extends number, TArray extends any[] = [] > = TNumber extends TArray['length'] ? TArray[number] : LessThan; ``` ## LiveQueryRequestedResult ```dts type LiveQueryRequestedResult = Iterable< LiveRequestedEntry > & AsyncIterable> & { /** * Call `reconnect` on all live queries selected by this `requested` invocation. * This is identical to: * ```ts * import { requested } from '$app/server'; * * for await (const { query } of requested(liveQuery, ...)) { * void query.reconnect(); * } * ``` */ reconnectAll: () => Promise; }; ``` ## LiveRequestedEntry A single entry yielded by [`requested`](/docs/kit/$app-server#requested) when called with a `query.live`. `arg` is the validated argument; `query` is a `RemoteLiveQuery` bound to the client's original cache key, so `reconnect()` targets the correct client subscription. ```dts type LiveRequestedEntry = { }; ``` ## Load The generic form of `PageLoad` and `LayoutLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types)) rather than using `Load` directly. ```dts type Load< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, InputData extends Record | null = Record< string, any > | null, ParentData extends Record = Record< string, any >, OutputData extends Record | void = Record | void, RouteId extends AppRouteId | null = AppRouteId | null > = ( ) => MaybePromise; ``` ## LoadEvent The generic form of `PageLoadEvent` and `LayoutLoadEvent`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types)) rather than using `LoadEvent` directly. ```dts interface LoadEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, Data extends Record | null = Record< string, any > | null, ParentData extends Record = Record< string, any >, RouteId extends AppRouteId | null = AppRouteId | null > extends NavigationEvent {/*…*/} ``` ```dts fetch; ``` `fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request. - It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context). - Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call. - During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#handle) - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request. You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies) ```dts ``` Contains the data returned by the route's server `load` function (in `+layout.server.js` or `+page.server.js`), if any. ```dts setHeaders: (headers: Record) => void; ``` If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example: ```js // @errors: 7031 /// /routes/blog/+page.js export async function load({ fetch, setHeaders }) { const url = `https://cms.example.com/articles.json`; const response = await fetch(url); setHeaders({ ('age'), 'cache-control': response.headers.get('cache-control') }); return response.json(); } ``` Setting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once. You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API in a server-only `load` function instead. `setHeaders` has no effect when a `load` function runs in the browser. ```dts parent: () => Promise; ``` `await parent()` returns data from parent `+layout.js` `load` functions. Implicitly, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will return and forward data from parent `+layout.server.js` files. 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. ```dts depends: (...deps: Array<`${string}:${string}`>) => void; ``` 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()`](/docs/kit/$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`. 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 /// /routes/+page.js let count = 0; export async function load({ depends }) { depends('increase:count'); return { ++ }; } ``` ```html /// /routes/+page.svelte {data.count} Increase Count ``` ```dts untrack: (fn: () => T) => T; ``` Use this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example: ```js // @errors: 7031 /// /routes/+page.server.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!' }; } } ``` ```dts tracing: {/*…*/} ``` - available since v2.31.0 Access to spans for tracing. If tracing is not enabled or the function is being run in the browser, these spans will do nothing. ```dts ``` Whether tracing is enabled. ```dts ``` The root span for the request. This span is named `sveltekit.handle.root`. ```dts ``` The span associated with the current `load` function. ## LoadProperties ```dts type LoadProperties< input extends Record | void > = input extends void ? undefined // needs to be undefined, because void will break extends Record ? ``` ## Navigation ```dts type Navigation = | NavigationExternal | NavigationFormSubmit | NavigationPopState | NavigationLink; ``` ## NavigationBase ```dts interface NavigationBase {/*…*/} ``` ```dts ``` The type of `enter`: The app has hydrated/started - `form`: The user submitted a `` - `goto`: Navigation was triggered by a `goto(...)` call or a redirect - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring - `link`: Navigation was triggered by a link click - `popstate`: Navigation was triggered by back/forward navigation ```dts | null; ``` Where navigation was triggered from ```dts | null; ``` Where navigation is going to/has gone to ```dts ``` Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation). ```dts ``` A promise that resolves once the navigation is complete, and rejects if the navigation fails or is aborted. In the case of a `willUnload` navigation, the promise will never resolve ## NavigationEnter The navigation that occurs when the app starts/hydrates ```dts interface NavigationEnter extends NavigationBase {/*…*/} ``` ```dts type: 'enter'; ``` ```dts delta?: undefined; ``` In case of a history back/forward navigation, the number of steps to go back/forward ```dts event?: undefined; ``` Dispatched `Event` object when navigation occurred by `popstate` or `link`. ## NavigationEvent ```dts interface NavigationEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId | null = AppRouteId | null > {/*…*/} ``` ```dts ``` The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ }` object ```dts route: {/*…*/} ``` Info about the current route ```dts ``` The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched. ```dts ``` The URL of the current page ## NavigationExternal ```dts type NavigationExternal = NavigationGoto | NavigationLeave; ``` ## NavigationFormSubmit A navigation triggered by a `` ```dts interface NavigationFormSubmit extends NavigationBase {/*…*/} ``` ```dts type: 'form'; ``` ```dts ``` The `SubmitEvent` that caused the navigation ```dts delta?: undefined; ``` In case of a history back/forward navigation, the number of steps to go back/forward ## NavigationGoto A navigation triggered by a `goto(...)` call or a redirect ```dts interface NavigationGoto extends NavigationBase {/*…*/} ``` ```dts type: 'goto'; ``` ```dts delta?: undefined; ``` In case of a history back/forward navigation, the number of steps to go back/forward ## NavigationLeave A navigation triggered by the tab being closed, or the user navigating to a different document ```dts interface NavigationLeave extends NavigationBase {/*…*/} ``` ```dts type: 'leave'; ``` ```dts delta?: undefined; ``` In case of a history back/forward navigation, the number of steps to go back/forward ## NavigationLink A navigation triggered by a link click ```dts interface NavigationLink extends NavigationBase {/*…*/} ``` ```dts type: 'link'; ``` ```dts ``` The `PointerEvent` that caused the navigation ```dts delta?: undefined; ``` In case of a history back/forward navigation, the number of steps to go back/forward ## NavigationPopState A navigation triggered by back/forward navigation ```dts interface NavigationPopState extends NavigationBase {/*…*/} ``` ```dts type: 'popstate'; ``` ```dts ``` In case of a history back/forward navigation, the number of steps to go back/forward ```dts ``` The `PopStateEvent` that caused the navigation ## NavigationTarget Information about the target of a specific navigation. ```dts interface NavigationTarget< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId | null = AppRouteId | null > {/*…*/} ``` ```dts | null; ``` Parameters of the target page - e.g. for a route like `/blog/[slug]`, a `{ }` object. Is `null` if the target is not part of the SvelteKit app (could not be resolved to a route). ```dts route: {/*…*/} ``` Info about the target route ```dts | null; ``` The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched. ```dts ``` The URL that is navigated to ```dts scroll: { } | null; ``` The scroll position associated with this navigation. For the `from` target, this is the scroll position at the moment of navigation. For the `to` target, this represents the scroll position that will be or was In `beforeNavigate` and `onNavigate`, this is only available for `popstate` navigations (back/forward button) and will be `null` for other navigation types, since the final scroll position isn't known ahead of time. - In `afterNavigate`, this is always the scroll position that was applied after the navigation completed. ## NavigationType - `enter`: The app has hydrated/started - `form`: The user submitted a `` - `goto`: Navigation was triggered by a `goto(...)` call or a redirect - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring - `link`: Navigation was triggered by a link click - `popstate`: Navigation was triggered by back/forward navigation ```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`](/docs/kit/$app-navigation#onNavigate) callbacks. ```dts type OnNavigate = Navigation & { /** * Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page. */ }; ``` ## Page The shape of the [`page`](/docs/kit/$app-state#page) reactive object and the [`$page`](/docs/kit/$app-stores) store. ```dts interface Page< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId | null = AppRouteId | null > {/*…*/} ``` ```dts & { }; ``` The URL of the current page. ```dts ``` The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ }` object. ```dts route: {/*…*/} ``` Info about the current route. ```dts ``` The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched. ```dts ``` HTTP status code of the current page. ```dts | null; ``` The error object of the current page, if any. Filled from the `handleError` hooks. ```dts & Record; ``` The merged result of all data from all `load` functions on the current page. You can type a common denominator through `App.PageData`. ```dts ``` The page state, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`. ```dts ``` Filled only after a form submission. See [form actions](/docs/kit/form-actions) for more info. ## ParamMatcher The shape of a param matcher. See [matching](/docs/kit/advanced-routing#Matching) for more info. ```dts type ParamMatcher = (param: string) => boolean; ``` ## PrerenderOption ```dts type PrerenderOption = boolean | 'auto'; ``` ## QueryRequestedResult ```dts type QueryRequestedResult = Iterable< RequestedEntry > & AsyncIterable> & { /** * Call `refresh` on all queries selected by this `requested` invocation. * This is identical to: * ```ts * import { requested } from '$app/server'; * * for await (const { query } of requested(getPost, ...)) { * void query.refresh(); * } * ``` */ refreshAll: () => Promise; }; ``` ## Redirect The object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function. ```dts interface Redirect {/*…*/} ``` ```dts | 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 ``` The location to redirect to. ## RemoteCommand The type of a remote `command` function. See [Remote functions](/docs/kit/remote-functions#command) for full documentation. ```dts type RemoteCommand = { ( extends Input ? Input | ): Promise & { updates( ...updates: RemoteQueryUpdate[] ): Promise; }; /** The number of pending command executions */ get pending(): number; }; ``` ## RemoteForm The type of a remote `form` function. See [Remote functions](/docs/kit/remote-functions#form) for full documentation. ```dts type RemoteForm< Input extends RemoteFormInput | void, Output > = { /** Attachment that sets up an event handler that intercepts the form submission on the client to prevent a full page reload */ [attachment: symbol]: (node: HTMLFormElement) => void; method: 'POST'; /** The URL to send the form to. */ /** The `` element this instance is currently attached to, if any. */ get element(): HTMLFormElement | null; /** Submit the currently attached form programmatically. */ submit(): Promise & { updates: ( ...updates: RemoteQueryUpdate[] ) => Promise; }; /** Use the `enhance` method to influence what happens when the form is submitted. */ enhance( ): { method: 'POST'; [attachment: symbol]: (node: HTMLFormElement) => void; }; /** * Create an instance of the form for the given `id`. * The `id` is stringified and used for deduplication to potentially reuse existing instances. * Useful when you have multiple forms that use the same remote form action, for example in a loop. * ```svelte * {#each todos as todo} * {@const todoForm = updateTodo.for(todo.id)} * * {#if todoForm.result?.invalid}Invalid data{/if} * ... * * {/each} * ``` */ for( ): Omit, 'for'>; /** Preflight checks */ preflight( ): RemoteForm; /** Validate the form contents programmatically */ validate(options?: { /** Set this to `true` to also show validation issues of fields that haven't been touched yet. */ includeUntouched?: boolean; /** Set this to `true` to only run the `preflight` validation. */ preflightOnly?: boolean; }): Promise; /** The result of the form submission */ get result(): Output | undefined; /** The number of pending submissions */ get pending(): number; /** True if the form has been submitted at least once */ get submitted(): boolean; /** Access form fields using object notation */ }; ``` ## RemoteFormEnhanceCallback The callback passed to a remote form's `enhance` method. See [Remote functions](/docs/kit/remote-functions#form) for full documentation. ```dts type RemoteFormEnhanceCallback< Input extends RemoteFormInput | void = RemoteFormInput | void, Output = any > = ( ) => MaybePromise; ``` ## RemoteFormEnhanceInstance The form instance as received inside an `enhance` callback. See [Remote functions](/docs/kit/remote-functions#form) for full documentation. ```dts type RemoteFormEnhanceInstance< Input extends RemoteFormInput | void = RemoteFormInput | void, Output = any > = Omit< RemoteForm, 'enhance' | 'element' > & { readonly }; ``` ## RemoteFormField Form field accessor type that provides name(), value(), and issues() methods ```dts type RemoteFormField = RemoteFormFieldMethods & { /** * Returns an object that can be spread onto an input element with the correct type attribute, * aria-invalid attribute if the field is invalid, and appropriate value/checked property getters/setters. * @example * ```svelte * * * * ``` */ as>( ...args: AsArgs ): InputElementProps; }; ``` ## RemoteFormFieldType ```dts type RemoteFormFieldType = { [K in keyof InputTypeMap]: T extends InputTypeMap[K] ? }[keyof InputTypeMap]; ``` ## RemoteFormFieldValue ```dts type RemoteFormFieldValue = | string | string[] | number | boolean | File | File[]; ``` ## RemoteFormFields Recursive type to build form fields structure with proxy access ```dts type RemoteFormFields = WillRecurseIndefinitely extends true ? extends | string | number | boolean | File ? RemoteFormField> : // [NonNullable] is used to prevent distributing over union while still allowing // nullable wrappers (e.g. `string[] | undefined` from a schema with `.default([])`) // to be treated as arrays; only the last condition should distribute over unions [NonNullable] extends [string[] | File[]] ? RemoteFormField> & { [K in number]: RemoteFormField< NonNullable[number] >; } : [NonNullable] extends [Array] ? RemoteFormFieldContainer> & { [K in number]: RemoteFormFields; } : RemoteFormFieldContainer & { [K in KeysOfUnion]-?: RemoteFormFields< ValueOfUnionKey >; }; ``` ## RemoteFormInput ```dts interface RemoteFormInput {/*…*/} ``` ```dts [key: string]: MaybeArray | undefined; ``` ## RemoteFormIssue ```dts interface RemoteFormIssue {/*…*/} ``` ```dts ``` ```dts ``` ## RemoteLiveQuery ```dts type RemoteLiveQuery = RemoteResource & AsyncIterable & { /** `true` if the live stream is currently connected. */ readonly /** `true` once the current live stream iterator is done. */ readonly /** Reconnects the live stream immediately. */ reconnect(): Promise; }; ``` ## RemoteLiveQueryFunction The type of a remote `query.live` function. See [Remote functions](/docs/kit/remote-functions#query.live) for full documentation. The optional `Validated` generic parameter represents the argument type *after* the query's schema has validated and (optionally) transformed it, and matches the type yielded by [`requested`](/docs/kit/$app-server#requested). ```dts type RemoteLiveQueryFunction< Input, Output, _Validated = Input > = ( extends Input ? Input | ) => RemoteLiveQuery; ``` ## RemotePrerenderFunction The type of a remote `prerender` function. See [Remote functions](/docs/kit/remote-functions#prerender) for full documentation. ```dts type RemotePrerenderFunction = ( extends Input ? Input | ) => RemoteResource; ``` ## RemoteQuery ```dts type RemoteQuery = RemoteResource & { /** * On the client, this function will update the value of the query without re-fetching it. * * On the server, this can be called in the context of a `command` or `form` and the specified data will accompany the action response back to the client. * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip. */ set(value: T): void; /** * On the client, this function will re-fetch the query from the server. * * On the server, this can be called in the context of a `command` or `form` and the refreshed data will accompany the action response back to the client. * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip. */ refresh(): Promise; /** * Temporarily override a query's value during a [single-flight mutation](https://svelte.dev/docs/kit/remote-functions#Single-flight-mutations) to provide optimistic updates. * * ```svelte * * * { * await form.submit().updates( * todos.withOverride((todos) => [...todos, { () }]) * ); * })}> * * Add Todo * * ``` */ withOverride( update: (current: T) => T ): RemoteQueryOverride; }; ``` ## RemoteQueryFunction The return value of a remote `query` function. See [Remote functions](/docs/kit/remote-functions#query) for full documentation. The optional `Validated` generic parameter represents the argument type *after* the query's schema has validated and (optionally) transformed it — this is the type the query's implementation function receives on the server, and the type yielded by [`requested`](/docs/kit/$app-server#requested). For queries declared with [Standard Schema](https://standardschema.dev/) it differs from `Input` when the schema contains a transform (e.g. `v.pipe(v.number(), v.transform(String))` has `Input = number` but `Validated = string`). For `'unchecked'` validators and queries without arguments it defaults to `Input`. ```dts type RemoteQueryFunction< Input, Output, _Validated = Input > = ( extends Input ? Input | ) => RemoteQuery; ``` ## RemoteQueryOverride ```dts type RemoteQueryOverride = () => void; ``` ## RemoteQueryUpdate ```dts type RemoteQueryUpdate = | RemoteQuery | RemoteLiveQuery | RemoteQueryFunction | RemoteLiveQueryFunction | RemoteQueryOverride; ``` ## RemoteResource ```dts type RemoteResource = Promise & { /** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */ get error(): any; /** `true` before the first result is available and during refreshes */ get loading(): boolean; } & ( | { /** The current value of the query. Undefined until `ready` is `true` */ get current(): undefined; } | { /** The current value of the query. Undefined until `ready` is `true` */ get current(): T; } ); ``` ## RequestEvent ```dts interface RequestEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId | null = AppRouteId | null > {/*…*/} ``` ```dts ``` Get or set cookies related to the current request ```dts fetch; ``` `fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request. - It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context). - Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call. - During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#handle) - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request. You can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies). ```dts getClientAddress: () => string; ``` The client's IP address, set by the adapter. ```dts ``` Contains custom data that was added to the request within the [`server handle hook`](/docs/kit/hooks#handle). ```dts ``` The parameters of the current route - e.g. for a route like `/blog/[slug]`, a `{ }` object. In the context of a remote function request initiated by the client, this relates to the page the remote function was called from, _not_ the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated. ```dts | undefined; ``` Additional data made available through the adapter. ```dts ``` The original request object. ```dts route: {/*…*/} ``` Info about the current route. ```dts ``` The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched. In the context of a remote function request initiated by the client, this relates to the page the remote function was called from, _not_ the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated. ```dts setHeaders: (headers: Record) => void; ``` If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example: ```js // @errors: 7031 /// /routes/blog/+page.js export async function load({ fetch, setHeaders }) { const url = `https://cms.example.com/articles.json`; const response = await fetch(url); setHeaders({ ('age'), 'cache-control': response.headers.get('cache-control') }); return response.json(); } ``` Setting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once. You cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API instead. ```dts ``` The requested URL. In the context of a remote function request initiated by the client, this relates to the page the remote function was called from, _not_ the URL of the endpoint SvelteKit creates for the remote function. Never use this to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated. ```dts ``` `true` if the request comes from the client asking for `+page/layout.server.js` data. The `url` property will be stripped of the internal information related to the data request in this case. Use this property instead if the distinction is important to you. ```dts ``` `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. ```dts tracing: {/*…*/} ``` - available since v2.31.0 Access to spans for tracing. If tracing is not enabled, these spans will do nothing. ```dts ``` Whether tracing is enabled. ```dts ``` The root span for the request. This span is named `sveltekit.handle.root`. ```dts ``` The span associated with the current `handle` hook, `load` function, or form action. ```dts ``` `true` if the request comes from the client via a remote function. The `url` property will be stripped of the internal information related to the data request in this case. Use this property instead if the distinction is important to you. ## 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](/docs/kit/types#Generated-types) instead. ```dts type RequestHandler< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId | null = AppRouteId | null > = ( ) => MaybePromise; ``` ## RequestedEntry A single entry yielded by [`requested`](/docs/kit/$app-server#requested) when called with a regular `query`. `arg` is the validated argument (the input *after* the query's schema validated and transformed it, if applicable); `query` is a `RemoteQuery` bound to the client's original cache key, so `refresh()` / `set()` will update the correct client entry. ```dts type RequestedEntry = { }; ``` ## RequestedResult ```dts type RequestedResult = | QueryRequestedResult | LiveQueryRequestedResult; ``` ## Reroute Available since 2.3.0 The [`reroute`](/docs/kit/hooks#reroute) hook allows you to modify the URL before it is used to determine which route to render. ```dts type Reroute = (event: { fetch; }) => MaybePromise; ``` ## ResolveOptions ```dts interface ResolveOptions {/*…*/} ``` ```dts transformPageChunk?: (input: { }) => MaybePromise; ``` - `input` the html chunk and the info if this is the last chunk 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 filterSerializedResponseHeaders?: (name: string, ) => boolean; ``` - `name` header name - `value` header value 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 preload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; }) => boolean; ``` - `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. ## RouteDefinition ```dts interface RouteDefinition {/*…*/} ``` ```dts ``` ```dts api: { }; ``` ```dts page: { >; }; ``` ```dts ``` ```dts ``` ```dts []; ``` ```dts ``` ```dts ``` ## SSRManifest ```dts interface SSRManifest {/*…*/} ``` ```dts ``` ```dts ``` ```dts ``` Static files from `kit.config.files.assets` and the service worker (if any). ```dts ``` ```dts _: {/*…*/} ``` private fields ```dts ['client']; ``` ```dts []; ``` ```dts Promise>; ``` hashed filename -> import to that file ```dts []; ``` ```dts ``` ```dts matchers: () => Promise>; ``` ```dts ``` A `[file]: size` map of all assets imported by server code. ## ServerInit Available since 2.10.0 The [`init`](/docs/kit/hooks#init) will be invoked before the server responds to its first request ```dts type ServerInit = () => MaybePromise; ``` ## ServerInitOptions ```dts interface ServerInitOptions {/*…*/} ``` ```dts ``` A map of environment variables. ```dts read?: (file: string) => MaybePromise; ``` A function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work. ## ServerLoad The generic form of `PageServerLoad` and `LayoutServerLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types)) rather than using `ServerLoad` directly. ```dts type ServerLoad< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, ParentData extends Record = Record< string, any >, OutputData extends Record | void = Record< string, any > | void, RouteId extends AppRouteId | null = AppRouteId | null > = ( ) => MaybePromise; ``` ## ServerLoadEvent ```dts interface ServerLoadEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, ParentData extends Record = Record< string, any >, RouteId extends AppRouteId | null = AppRouteId | null > extends RequestEvent {/*…*/} ``` ```dts parent: () => Promise; ``` `await parent()` returns data from parent `+layout.server.js` `load` functions. 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. ```dts depends: (...deps: string[]) => void; ``` 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()`](/docs/kit/$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`. 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 /// /routes/+page.js let count = 0; export async function load({ depends }) { depends('increase:count'); return { ++ }; } ``` ```html /// /routes/+page.svelte {data.count} Increase Count ``` ```dts untrack: (fn: () => T) => T; ``` Use this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example: ```js // @errors: 7031 /// /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!' }; } } ``` ```dts tracing: {/*…*/} ``` - available since v2.31.0 Access to spans for tracing. If tracing is not enabled, these spans will do nothing. ```dts ``` Whether tracing is enabled. ```dts ``` The root span for the request. This span is named `sveltekit.handle.root`. ```dts ``` The span associated with the current server `load` function. ## Snapshot The type of `export const snapshot` exported from a page or layout component. ```dts interface Snapshot {/*…*/} ``` ```dts capture: () => T; ``` ```dts restore: (snapshot: T) => void; ``` ## SubmitFunction ```dts type SubmitFunction< Success extends Record | undefined = Record, Failure extends Record | undefined = Record > = (input: { | null; cancel: () => void; }) => MaybePromise< | void | ((opts: { /** * Call this to get the default behavior of a form submission response. * @param options Set `reset: false` if you don't want the `` values to be reset after a successful submission. * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission. */ update: (options?: { reset?: boolean; invalidateAll?: boolean; }) => Promise; }) => MaybePromise) >; ``` ## Transport Available since 2.11.0 The [`transport`](/docs/kit/hooks#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. ```ts import type { Transport } from '@sveltejs/kit'; declare class MyCustomType { } // hooks.js export const = { MyCustomType: { encode: (value) => value instanceof MyCustomType && [value.data], decode: ([data]) => new MyCustomType(data) } }; ``` ```dts type Transport = Record; ``` ## Transporter A member of the [`transport`](/docs/kit/hooks#transport) hook. ```dts interface Transporter< T = any, U = Exclude< any, false | 0 | '' | null | undefined | typeof NaN > > {/*…*/} ``` ```dts encode: (value: T) => false | U; ``` ```dts decode: (data: U) => T; ``` ## ValidationError A validation error thrown by `invalid`. ```dts interface ValidationError {/*…*/} ``` ```dts []; ``` The validation issues ## Private types The following are referenced by the public types documented above, but cannot be imported directly: ## AdapterEntry ```dts interface AdapterEntry {/*…*/} ``` ```dts ``` A string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication. For example, `/foo/a-[b]` and `/foo/[c]` are different routes, but would both be represented in a Netlify _redirects file as `/foo/:param`, so they share an ID ```dts filter(route: RouteDefinition): boolean; ``` A function that compares the candidate route with the current route to determine if it should be grouped with the current route. Use Fallback pages: `/foo/[c]` is a fallback for `/foo/a-[b]`, and `/[...catchall]` is a fallback for all routes - Grouping routes that share a common `config`: `/foo` should be deployed to the edge, `/bar` and `/baz` should be deployed to a serverless function ```dts complete(entry: { generateManifest(opts: { }): string }): MaybePromise; ``` A function that is invoked once the entry has been created. This is where you should write the function to the filesystem and generate redirect manifests. ## Csp ```dts namespace Csp { type ActionSource = 'strict-dynamic' | 'report-sample'; type BaseSource = | 'self' | 'unsafe-eval' | 'unsafe-hashes' | 'unsafe-inline' | 'unsafe-allow-redirects' | 'unsafe-webtransport-hashes' | 'wasm-unsafe-eval' | 'trusted-types-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:' | 'ws:' | 'wss:' | 'data:' | 'mediastream:' | 'blob:' | 'filesystem:' | (`${string}:` & {}); type Source = | HostSource | SchemeSource | CryptoSource | BaseSource; type Sources = Source[]; } ``` ## CspDirectives ```dts interface CspDirectives {/*…*/} ``` ```dts 'child-src'?: Csp.Sources; ``` ```dts 'default-src'?: Array; ``` ```dts 'frame-src'?: Csp.Sources; ``` ```dts 'worker-src'?: Csp.Sources; ``` ```dts 'connect-src'?: Csp.Sources; ``` ```dts 'font-src'?: Csp.Sources; ``` ```dts 'img-src'?: Csp.Sources; ``` ```dts 'manifest-src'?: Csp.Sources; ``` ```dts 'media-src'?: Csp.Sources; ``` ```dts 'object-src'?: Csp.Sources; ``` ```dts 'prefetch-src'?: Csp.Sources; ``` ```dts 'script-src'?: Array; ``` ```dts 'script-src-elem'?: Csp.Sources; ``` ```dts 'script-src-attr'?: Csp.Sources; ``` ```dts 'style-src'?: Array; ``` ```dts 'style-src-elem'?: Csp.Sources; ``` ```dts 'style-src-attr'?: Csp.Sources; ``` ```dts 'base-uri'?: Array; ``` ```dts 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' >; ``` ```dts 'form-action'?: Array; ``` ```dts 'frame-ancestors'?: Array; ``` ```dts 'navigate-to'?: Array; ``` ```dts 'report-uri'?: string[]; ``` ```dts 'report-to'?: string[]; ``` ```dts 'require-trusted-types-for'?: Array<'script'>; ``` ```dts 'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>; ``` ```dts 'upgrade-insecure-requests'?: boolean; ``` ```dts 'require-sri-for'?: Array<'script' | 'style' | 'script style'>; ``` - deprecated ```dts 'block-all-mixed-content'?: boolean; ``` - deprecated ```dts 'plugin-types'?: Array<`${string}/${string}` | 'none'>; ``` - deprecated ```dts 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' >; ``` - deprecated ## DeepPartial ```dts type DeepPartial = T extends | Record | unknown[] ? { [K in keyof T]?: T[K] extends | Record | unknown[] ? [K]; } : T | undefined; ``` ## HasNonOptionalBoolean ```dts type HasNonOptionalBoolean = IsAny extends true ? never : [T] extends [boolean] ? extends Array ? extends Record ? { [K in keyof T]: HasNonOptionalBoolean; }[keyof T] : never; ``` ## HttpMethod ```dts type HttpMethod = | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS'; ``` ## IsAny ```dts type IsAny = 0 extends 1 & T ? ``` ## Logger ```dts interface Logger {/*…*/} ``` ```dts (msg: string): void; ``` ```dts success(msg: string): void; ``` ```dts error(msg: string): void; ``` ```dts warn(msg: string): void; ``` ```dts minor(msg: string): void; ``` ```dts info(msg: string): void; ``` ## MaybePromise ```dts type MaybePromise = T | Promise; ``` ## PrerenderEntryGeneratorMismatchHandler ```dts interface PrerenderEntryGeneratorMismatchHandler {/*…*/} ``` ```dts (details: { }): void; ``` ## PrerenderEntryGeneratorMismatchHandlerValue ```dts type PrerenderEntryGeneratorMismatchHandlerValue = | 'fail' | 'warn' | 'ignore' | PrerenderEntryGeneratorMismatchHandler; ``` ## PrerenderHttpErrorHandler ```dts interface PrerenderHttpErrorHandler {/*…*/} ``` ```dts (details: { | null; referenceType: 'linked' | 'fetched'; }): void; ``` ## PrerenderHttpErrorHandlerValue ```dts type PrerenderHttpErrorHandlerValue = | 'fail' | 'warn' | 'ignore' | PrerenderHttpErrorHandler; ``` ## PrerenderInvalidUrlHandler ```dts interface PrerenderInvalidUrlHandler {/*…*/} ``` ```dts (details: { | null; }): void; ``` ## PrerenderInvalidUrlHandlerValue ```dts type PrerenderInvalidUrlHandlerValue = | 'fail' | 'warn' | 'ignore' | PrerenderInvalidUrlHandler; ``` ## PrerenderMap ```dts type PrerenderMap = Map; ``` ## PrerenderMissingIdHandler ```dts interface PrerenderMissingIdHandler {/*…*/} ``` ```dts (details: { []; }): void; ``` ## PrerenderMissingIdHandlerValue ```dts type PrerenderMissingIdHandlerValue = | 'fail' | 'warn' | 'ignore' | PrerenderMissingIdHandler; ``` ## PrerenderOption ```dts type PrerenderOption = boolean | 'auto'; ``` ## PrerenderUnseenRoutesHandler ```dts interface PrerenderUnseenRoutesHandler {/*…*/} ``` ```dts (details: { []; }): void; ``` ## PrerenderUnseenRoutesHandlerValue ```dts type PrerenderUnseenRoutesHandlerValue = | 'fail' | 'warn' | 'ignore' | PrerenderUnseenRoutesHandler; ``` ## Prerendered ```dts interface Prerendered {/*…*/} ``` ```dts < string, { /** The location of the ` objects, where a path like `/foo` corresponds to `foo.html` and a path like `/bar/` corresponds to `bar/index.html`. ```dts < string, { /** The MIME type of the asset */ } >; ``` A map of `path` to `{ type }` objects. ```dts < string, { } >; ``` A map of redirects encountered during prerendering. ```dts []; ``` An array of prerendered paths (without trailing slashes, regardless of the trailingSlash config) ## RequestOptions ```dts interface RequestOptions {/*…*/} ``` ```dts getClientAddress(): string; ``` ```dts platform?: App.Platform; ``` ## RouteSegment ```dts interface RouteSegment {/*…*/} ``` ```dts ``` ```dts ``` ```dts ``` ## TrailingSlash ```dts type TrailingSlash = 'never' | 'always' | 'ignore'; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.311Z","totalSectionsIncluded":21,"totalCodeBlocksIncluded":0,"totalLines":46,"estimatedTokens":15417}}213{"id":"doc-https_svelte_dev_docs_kit_app_server_llms_txt-09cc89a1","source":"documentation","title":"https://svelte.dev/docs/kit/$app-server/llms.txt","url":"https://svelte.dev/docs/kit/$app-server/llms.txt","text":"[CALLOUT]\nAvailable since 2.27\n\n```dts function command( fn: () => MaybePromise ): RemoteCommand; ```\n\n```dts function command( validate: 'unchecked', fn: (arg: Input) => MaybePromise ): RemoteCommand; ```\n\n```dts function command( , fn: ( ) => MaybePromise ): RemoteCommand< StandardSchemaV1.InferInput, Output >; ```\n\n[CALLOUT]\nAvailable since 2.27\n\n` element. See [Remote functions](/docs/kit/remote-functions#form) for full documentation. ```dts function form( fn: () => MaybePromise ): RemoteForm; ``` ```dts function form( validate: 'unchecked', fn: ( , ) => MaybePromise ): RemoteForm; ``` ```dts function form< Schema extends StandardSchemaV1< RemoteFormInput, Record >, Output >( extends HasNonOptionalBoolean< StandardSchemaV1.InferInput > ? 'Error: All booleans in form schemas must be optional (e.g. `v.optional(v.boolean(), false)`) because checkbox inputs do not send a false value when unchecked.' : Schema, fn: ( , > ) => MaybePromise ): RemoteForm, Output>; ``` ## getRequestEvent Available since 2.20.0 Returns the current `RequestEvent`. Can be used inside server hooks, server `load` functions, actions, and endpoints (and functions called by them). In environments without [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage), this must be called synchronously (i.e. not after an `await`). ```dts function getRequestEvent(): RequestEvent; ``` ## prerender Available since 2.27 Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call. See [Remote functions](/docs/kit/remote-functions#prerender) for full documentation. ```dts function prerender( fn: () => MaybePromise, options?: | { inputs?: RemotePrerenderInputsGenerator; dynamic?: boolean; } | undefined ): RemotePrerenderFunction; ``` ```dts function prerender( validate: 'unchecked', fn: (arg: Input) => MaybePromise, options?: | { inputs?: RemotePrerenderInputsGenerator; dynamic?: boolean; } | undefined ): RemotePrerenderFunction; ``` ```dts function prerender( , fn: ( ) => MaybePromise, options?: | { inputs?: RemotePrerenderInputsGenerator< StandardSchemaV1.InferInput >; dynamic?: boolean; } | undefined ): RemotePrerenderFunction< StandardSchemaV1.InferInput, Output >; ``` ## query Available since 2.27 Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call. See [Remote functions](/docs/kit/remote-functions#query) for full documentation. ```dts function query( fn: () => MaybePromise ): RemoteQueryFunction; ``` ```dts function query( validate: 'unchecked', fn: (arg: Input) => MaybePromise ): RemoteQueryFunction; ``` ```dts function query( , fn: ( ) => MaybePromise ): RemoteQueryFunction< StandardSchemaV1.InferInput, Output, StandardSchemaV1.InferOutput >; ``` ## read Available since 2.4.0 Read the contents of an imported asset from the filesystem ```js // @errors: 7031 import { read } from '$app/server'; import somefile from './somefile.txt'; const asset = read(somefile); const text = await asset.text(); ``` ```dts function read(asset: string): Response; ``` ## requested Inside a remote `command` or `form` callback, returns an iterable of `{ arg, query }` entries for the query instances the client asked to refresh, up to the supplied `limit`. Each `query` is a `RemoteQuery` bound to the original client-side cache key, so `refresh()` / `set()` propagate correctly even when the query's schema transforms the input. `arg` is the *validated* argument, i.e. the value after the schema has run (so `InferOutput` for queries declared with a Standard Schema). Arguments that fail validation or exceed `limit` are recorded as failures in the response to the client. See [Client-requested refreshes](/docs/kit/remote-functions#Single-flight-mutations-Client-requested-refreshes) for usage in a remote `command` or `form`. ```ts import { requested } from '$app/server'; for (const { arg, query } of requested(getPost, 5)) { // `arg` is the validated argument; `query` is bound to the client's // cache key. It's safe to throw away this promise -- SvelteKit will // await it and forward any errors to the client. void query.refresh(); } ``` As a shorthand for the above, you can also call `refreshAll` on the result: ```ts import { requested } from '$app/server'; await requested(getPost, 5).refreshAll(); ``` Works with `query.batch` as well — refreshes for individual entries are collected into a single batched call. For live queries, the same applies, but with `reconnect` and `reconnectAll`. ```dts function requested( , ): QueryRequestedResult; ``` ```dts function requested( , ): LiveQueryRequestedResult; ``` ## query ```dts namespace query { /** * Creates a batch query function that collects multiple calls and executes them in a single request * * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation. * * @since 2.35 */ function batch( validate: 'unchecked', fn: ( [] ) => MaybePromise<(arg: Input, ) => Output> ): RemoteQueryFunction; /** * Creates a batch query function that collects multiple calls and executes them in a single request * * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation. * * @since 2.35 */ function batch( , fn: ( [] ) => MaybePromise< ( , ) => Output > ): RemoteQueryFunction< StandardSchemaV1.InferInput, Output, StandardSchemaV1.InferOutput >; /** * Creates a live remote query. When called from the browser, the function will be invoked on the server via a streaming `fetch` call. * * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.live) for full documentation. * * */ function live( fn: ( ) => RemoteLiveQueryUserFunctionReturnType ): RemoteLiveQueryFunction; function live( validate: 'unchecked', fn: ( ) => RemoteLiveQueryUserFunctionReturnType ): RemoteLiveQueryFunction; function live( , fn: ( ) => RemoteLiveQueryUserFunctionReturnType ): RemoteLiveQueryFunction< StandardSchemaV1.InferInput, Output, StandardSchemaV1.InferOutput >; } ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.312Z","totalSectionsIncluded":6,"totalCodeBlocksIncluded":0,"totalLines":15,"estimatedTokens":1524}}214{"id":"doc-https_svelte_dev_docs_kit_app_state_llms_txt-0d019681","source":"documentation","title":"https://svelte.dev/docs/kit/$app-state/llms.txt","url":"https://svelte.dev/docs/kit/$app-state/llms.txt","text":"```dts const navigating: | import('@sveltejs/kit').Navigation | { }; ```\n\nCurrently at {page.url.pathname}\n\nAll systems operational\n\n```dts const ('@sveltejs/kit').Page; ```\n\n```dts const updated: { get current(): boolean; check(): Promise; }; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.312Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":11,"estimatedTokens":66}}215{"id":"doc-https_svelte_dev_docs_ai_local_setup_llms_txt-5e3fb591","source":"documentation","title":"https://svelte.dev/docs/ai/local-setup/llms.txt","url":"https://svelte.dev/docs/ai/local-setup/llms.txt","text":"Configure Manually - Open the command palette - Search and select \"agent:open settings\" - In settings panel look for `Model Context Protocol (MCP) Servers` - Click on \"Add Server\" - Select: \"Add Custom Server\" It will open a popup with MCP server config where you can add the following configuration: ```json { \"svelte\": { \"command\": \"npx\", \"args\": [\"-y\", \"@sveltejs/mcp\"] } } ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.312Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":99}}216{"id":"doc-https_svelte_dev_docs_kit_app_paths_llms_txt-a5eaa9ad","source":"documentation","title":"https://svelte.dev/docs/kit/$app-paths/llms.txt","url":"https://svelte.dev/docs/kit/$app-paths/llms.txt","text":"[CALLOUT]\nAvailable since 2.26\n\n```dts function asset(file: Asset): string; ```\n\n[CALLOUT]\nUse [`asset(...)`](/docs/kit/$app-paths#asset) instead\n\n```dts let assets: | '' | `https://${string}` | `http://${string}` | '/_svelte_kit_assets'; ```\n\n[CALLOUT]\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n```dts let base: '' | `/${string}`; ```\n\n[CALLOUT]\nAvailable since 2.52.0\n\n```dts function match( | URL | (string & {}) ): Promise<{ } | null>; ```\n\n[CALLOUT]\nAvailable since 2.26\n\n```dts function resolve< T extends | RouteIdWithSearchOrHash | PathnameWithSearchOrHash >(...args: ResolveArgs): ResolvedPathname; ```\n\n[CALLOUT]\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n```dts function resolveRoute< T extends | RouteIdWithSearchOrHash | PathnameWithSearchOrHash >(...args: ResolveArgs): ResolvedPathname; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.312Z","totalSectionsIncluded":12,"totalCodeBlocksIncluded":0,"totalLines":31,"estimatedTokens":214}}217{"id":"doc-https_svelte_dev_docs_kit_app_navigation_llms_tx-418457a0","source":"documentation","title":"https://svelte.dev/docs/kit/$app-navigation/llms.txt","url":"https://svelte.dev/docs/kit/$app-navigation/llms.txt","text":"```dts function afterNavigate( callback: ( ('@sveltejs/kit').AfterNavigate ) => void ): void; ```\n\n```dts function beforeNavigate( callback: ( ('@sveltejs/kit').BeforeNavigate ) => void ): void; ```\n\n```dts function disableScrollHandling(): void; ```\n\n```dts function goto( | URL, opts?: { replaceState?: boolean | undefined; noScroll?: boolean | undefined; keepFocus?: boolean | undefined; invalidateAll?: boolean | undefined; invalidate?: | (string | URL | ((url: URL) => boolean))[] | undefined; state?: App.PageState | undefined; } ): Promise; ```\n\n```dts function invalidate( | URL | ((url: URL) => boolean) ): Promise; ```\n\n```dts function invalidateAll(): Promise; ```\n\n```dts function onNavigate( callback: ( ('@sveltejs/kit').OnNavigate ) => MaybePromise<(() => void) | void> ): void; ```\n\n```dts function preloadCode(pathname: string): Promise; ```\n\n` element with `data-sveltekit-preload-data`. If the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous. Returns a Promise that resolves with the result of running the new route's `load` functions once the preload is complete. ```dts function preloadData(href: string): Promise< | { type: 'loaded'; } | { type: 'redirect'; } >; ``` ## pushState Programmatically create a new history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing). ```dts function pushState( | URL, ): void; ``` ## refreshAll Causes all currently active remote functions to refresh, and all `load` functions belonging to the currently active page to re-run (unless disabled via the option argument). Returns a `Promise` that resolves when the page is subsequently updated. ```dts function refreshAll({ includeLoadFunctions }?: { includeLoadFunctions?: boolean; }): Promise; ``` ## replaceState Programmatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing). ```dts function replaceState( | URL, ): void; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":9,"totalCodeBlocksIncluded":0,"totalLines":19,"estimatedTokens":537}}218{"id":"doc-https_svelte_dev_docs_kit_service_worker_llms_tx-78adb962","source":"documentation","title":"https://svelte.dev/docs/kit/$service-worker/llms.txt","url":"https://svelte.dev/docs/kit/$service-worker/llms.txt","text":"```dts const ```\n\n```dts const []; ```\n\n```dts const []; ```\n\n```dts const []; ```\n\n```dts const ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":11,"estimatedTokens":29}}219{"id":"doc-https_svelte_dev_docs_kit_app_forms_llms_txt-601b5fcc","source":"documentation","title":"https://svelte.dev/docs/kit/$app-forms/llms.txt","url":"https://svelte.dev/docs/kit/$app-forms/llms.txt","text":"```dts function applyAction< Success extends Record | undefined, Failure extends Record | undefined >( ('@sveltejs/kit').ActionResult< Success, Failure > ): Promise; ```\n\n```dts function deserialize< Success extends Record | undefined, Failure extends Record | undefined >( ): import('@sveltejs/kit').ActionResult; ```\n\n` element that otherwise would work without JavaScript. The `submit` function is called upon submission with the given FormData and the `action` that should be triggered. If `cancel` is called, the form will not be submitted. You can use the abort `controller` to cancel the submission in case another one starts. If a function is returned, that function is called with the response from the server. If nothing is returned, the fallback will be used. If this function or its return value isn't set, it - falls back to updating the `form` prop with the returned data if the action is on the same page as the form - updates `page.status` - resets the `` element and invalidates all data in case of successful submission with no redirect response - redirects in case of a redirect response - redirects to the nearest error page in case of an unexpected error If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback. It accepts an options object - `reset: false` if you don't want the `` values to be reset after a successful submission - `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission ```dts function enhance< Success extends Record | undefined, Failure extends Record | undefined >( , submit?: import('@sveltejs/kit').SubmitFunction< Success, Failure > ): { destroy(): void; }; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":431}}220{"id":"doc-https_svelte_dev_docs_cli_sv_add_llms_txt-a57df691","source":"documentation","title":"https://svelte.dev/docs/cli/sv-add/llms.txt","url":"https://svelte.dev/docs/cli/sv-add/llms.txt","text":"` Installs dependencies with a specified package `npm` - `pnpm` - `yarn` - `bun` - `deno` ### `--no-install` Do not prompt to install dependencies. ## Official add-ons - [`ai-tools`](ai-tools) - [`better-auth`](better-auth) - [`drizzle`](drizzle) - [`eslint`](eslint) - [`mdsvex`](mdsvex) - [`paraglide`](paraglide) - [`playwright`](playwright) - [`prettier`](prettier) - [`storybook`](storybook) - [`sveltekit-adapter`](sveltekit-adapter) - [`tailwindcss`](tailwind) - [`vitest`](vitest) ## Community add-ons > [!NOTE] > Community add-ons are currently **experimental**. The API may change. Don't use them in production yet! > [!NOTE] > Svelte maintainers have not reviewed community add-ons for malicious code! Community add-ons are npm packages published by the community. Look out for add-ons from your favourite libraries and tools. _(soon)_ Many developers are building `sv` add-ons to make their integrations a one-liner. You can find them on [npmx](https://www.npmx.dev/search?q=keyword:sv-add) by searching for the keyword: `sv-add`. ```sh # Install a community add-on by org name (it will look at @org/sv) npx sv add @supacool # Use a local add-on (for development or internal use) npx sv add /path/to/my-addon # Mix and match official and community add-ons npx sv add eslint @supacool # Also works when creating a new project directly npx sv create --add eslint @supacool ``` > [!NOTE] > On Windows PowerShell, `@` is a special character that should be escaped with single quotes. For example: `npx sv add '@supacool'`. Want to create your own? Check the [Add-on Docs](community).\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":402}}221{"id":"doc-https_svelte_dev_docs_ai_subagent_llms_txt-9d6b3b36","source":"documentation","title":"https://svelte.dev/docs/ai/subagent/llms.txt","url":"https://svelte.dev/docs/ai/subagent/llms.txt","text":"View subagent definition ````markdown --- Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any ` blocks - And more ## Workflow When invoked to work on a Svelte file: ### 1. Gather context (if needed) If you're uncertain about Svelte 5 syntax or patterns, use the MCP Call `list-sections` to see available documentation 2. Call `get-documentation` with relevant section names ### 2. Read the target file Read the file to understand the current implementation. ### 3. Make changes Apply edits following Svelte 5 best practices: ### 4. Validate changes After editing, ALWAYS call `svelte-autofixer` with the updated code to check for issues. ### 5. Fix any issues If the autofixer reports problems, fix them and re-validate until no issues remain. ## Output format After completing your work, Summary of changes made 2. Any issues found and fixed by the autofixer 3. Recommendations for further improvements (if any) ````\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":242}}222{"id":"doc-https_svelte_dev_docs_ai_opencode_plugin_llms_tx-e06efc68","source":"documentation","title":"https://svelte.dev/docs/ai/opencode-plugin/llms.txt","url":"https://svelte.dev/docs/ai/opencode-plugin/llms.txt","text":"\", // defaults to the same as main agent \"temperature\": 1, // defaults to unset \"top_p\": 0.7, // defaults to unset \"maxSteps\": 20 // defaults to unlimited } } }, \"skills\": { // this can be `true`, or an array of skills to enable // e.g. [\"svelte-core-bestpractices\"] \"enabled\": true }, \"instructions\": { \"enabled\": true }, \"autoupdate\": true } ``` ### Automatic updates The plugin checks npm for newer versions and warns you when one is available. OpenCode caches plugins, so it continues using the cached version until that cache is removed. Automatic updates are enabled by default. After detecting a newer version, the plugin removes itself from the cache when OpenCode shuts down. OpenCode installs the latest version the next time it starts. Automatic updates only apply when the plugin is unpinned or explicitly uses the `latest` tag. Exact versions, ranges, and other dist-tags are left untouched because reinstalling them may resolve to the same version again. Set `\"autoupdate\": false` to only receive the warning.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.313Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":260}}223{"id":"doc-https_svelte_dev_docs_ai_cli_llms_txt-3956af88","source":"documentation","title":"https://svelte.dev/docs/ai/cli/llms.txt","url":"https://svelte.dev/docs/ai/cli/llms.txt","text":"[options] ``` Available `list-sections` - `get-documentation ` - `svelte-autofixer ` You can learn more about the commands with ```bash npx -y @sveltejs/mcp --help npx -y @sveltejs/mcp --help npx -y @sveltejs/mcp --version ``` ## `list-sections` Lists all available Svelte and SvelteKit documentation sections. ```bash npx -y @sveltejs/mcp list-sections ``` The output is a structured text list of sections, including each section's title, `use_cases`, and documentation path. This is the same catalog the MCP tool uses before calling `get-documentation`. ## `get-documentation` Fetches the full documentation for one or more sections. ```bash npx -y @sveltejs/mcp get-documentation 'svelte/$state' # or npx -y @sveltejs/mcp get-documentation 'svelte/$state,svelte/await-expressions' ``` Each section can be matched by title or by documentation path. If a section cannot be found, the CLI returns an error plus similar matches when available. ## `svelte-autofixer` Runs the Svelte autofixer against either inline code or a file path: ```bash npx -y @sveltejs/mcp svelte-autofixer 'src/routes/+page.svelte' ``` If the argument is an existing path, the CLI reads the file automatically. Otherwise it treats the argument as raw Svelte code. Because most shells expand `$`, inline code should be quoted or escaped correctly. In practice, passing a file path is usually easier than passing source directly. Available `--svelte-version <4|5>` - choose which Svelte version to validate against (defaults to `5`) - `--async` - enable async Svelte analysis for Svelte 5 projects The command prints an object `issues` - `suggestions` - `require_another_tool_call_after_fixing` This makes it easy to use in an agentic the autofixer, apply fixes, then run it again until it reports no remaining issues or suggestions.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.314Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":455}}224{"id":"doc-https_svelte_dev_docs_ai_prompts_llms_txt-8b794a00","source":"documentation","title":"https://svelte.dev/docs/ai/prompts/llms.txt","url":"https://svelte.dev/docs/ai/prompts/llms.txt","text":"Copy the prompt ````markdown You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get-documentation` with one of the following paths. invoking the `get-documentation` tool, try to answer the users query using your own knowledge and the `svelte-autofixer` tool. Be mindful of how many section you request, since it is token-intensive! - , title and path to estimate use case, /overview - , title and path to estimate use case, /instructions - , title and path to estimate use case, /mcp - setup, title and path to estimate use case, /local-setup - setup, title and path to estimate use case, /remote-setup - , title and path to estimate use case, /tools - , title and path to estimate use case, /resources - , title and path to estimate use case, /prompts - , title and path to estimate use case, /cli - , title and path to estimate use case, /skills - , title and path to estimate use case, /subagent - Code, title and path to estimate use case, /claude-plugin - , title and path to estimate use case, /opencode-plugin - , title and path to estimate use case, /cursor-plugin - Copilot CLI, title and path to estimate use case, /copilot-plugin - CLI, title and path to estimate use case, /codex-plugin - , setup, creating new svelte apps, scaffolding, cli tools, initializing projects, /overview - asked questions, setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, /faq - create, setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, /sv-create - add, setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, /sv-add - check, quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, /sv-check - migrate, , upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, /sv-migrate - , title and path to estimate use case, /ai-tools - , title and path to estimate use case, /better-auth - , setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, /drizzle - , quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, /eslint - , title and path to estimate use case, /experimental - , , content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, /mdsvex - , , multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, /paraglide - , testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, /playwright - , formatting, project setup, code style consistency, team collaboration, linting configuration, /prettier - , development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, /storybook - , , production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, /sveltekit-adapter - , setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, /tailwind - , , unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, /vitest - title: [create your own], title and path to estimate use case, /community - , title and path to estimate use case, /sv - , title and path to estimate use case, /sv-utils - , sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, /introduction - a project, setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, /creating-a-project - types, , project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, /project-types - structure, setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, /project-structure - standards, , any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, /web-standards - , , navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, /routing - data, fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, /load - actions, , user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, /form-actions - options, static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, /page-options - management, , server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, /state-management - functions, fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, /remote-functions - variables, title and path to estimate use case, /environment-variables - your app, builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, /building-your-app - , , production builds, hosting setup, choosing deployment platform, configuring adapters, /adapters - deployments, , production builds, hosting setup, choosing deployment platform, ci/cd configuration, /adapter-auto - servers, , production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, /adapter-node - site generation, site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, /adapter-static - apps, mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, /single-page-apps - , , cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, /adapter-cloudflare - Workers, to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, /adapter-cloudflare-workers - , , netlify hosting, production builds, serverless functions, edge functions, static site hosting, /adapter-netlify - , , vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, /adapter-vercel - adapters, deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, /writing-adapters - routing, routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, /advanced-routing - , , logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, /hooks - , handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, /errors - options, , navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, /link-options - workers, support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, /service-workers - modules, keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, /server-only-modules - , , user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, /snapshots - routing, , dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, /shallow-routing - , monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, /observability - , component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, /packaging - , , login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, /auth - , optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, /performance - , , ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, /icons - , optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, /images - , , any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, /accessibility - , optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, /seo - asked questions, package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, /faq - , setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, /integrations - Debugging, , breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, /debugging - to SvelteKit v2, , upgrading from sveltekit 1 to 2, breaking changes, version updates, /migrating-to-sveltekit-2 - from Sapper, from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, /migrating - resources, , getting help, finding examples, learning sveltekit, project templates, common issues, community support, /additional-resources - , strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, /glossary - title: @sveltejs/kit, , form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, /@sveltejs-kit - title: @sveltejs/kit/env, title and path to estimate use case, /@sveltejs-kit-env - title: @sveltejs/kit/hooks, , request processing, authentication chains, logging, multiple hooks, request/response transformation, /@sveltejs-kit-hooks - title: @sveltejs/kit/node/polyfills, environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, /@sveltejs-kit-node-polyfills - title: @sveltejs/kit/node, adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, /@sveltejs-kit-node - title: @sveltejs/kit/vite, setup, vite configuration, initial sveltekit setup, build tooling, /@sveltejs-kit-vite - title: $app/env, title and path to estimate use case, /$app-env - title: $app/env/private, title and path to estimate use case, /$app-env-private - title: $app/env/public, title and path to estimate use case, /$app-env-public - title: $app/environment, , conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, /$app-environment - title: $app/forms, , user input, data submission, progressive enhancement, custom form handling, form validation, /$app-forms - title: $app/navigation, , navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, /$app-navigation - title: $app/paths, assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, /$app-paths - title: $app/server, functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, /$app-server - title: $app/state, , navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, /$app-state - title: $app/stores, projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, /$app-stores - title: $app/types, , navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, /$app-types - title: $env/dynamic/private, keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, /$env-dynamic-private - title: $env/dynamic/public, variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, /$env-dynamic-public - title: $env/static/private, api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, /$env-static-private - title: $env/static/public, variables, public config, client-side data, api endpoints, build-time configuration, public constants, /$env-static-public - title: $lib, setup, component organization, importing shared components, reusable ui elements, code structure, /$lib - title: $service-worker, support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, /$service-worker - , setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, /configuration - Line Interface, setup, typescript configuration, generated types, ./$types imports, initial project configuration, /cli - , , type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, /types - , , any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, /overview - started, setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, /getting-started - title: , , conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, /if - title: {#each ...}, , lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, /each - title: {#key ...}, , transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, /key - title: {#await ...}, data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, /await - title: {#snippet ...}, markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, /snippet - title: {@render ...}, ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, /@render - title: {@html ...}, html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, /@html - title: {@attach ...}, , popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, /@attach - title: {@const ...}, values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, /@const - title: {@debug ...}, , development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, /@debug - title: {let/const ...}, title and path to estimate use case, /declaration-tags - :, , user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, /bind - :, directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, /use - :, , interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, /transition - : and out:, , transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, /in-and-out - :, lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, /animate - :, styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, /style - , , conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, /class - , data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, /await-expressions - styles, , styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, /scoped-styles - styles, styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, /global-styles - properties, , custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, /custom-properties -\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.315Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":4547}}225{"id":"doc-https_svelte_dev_docs_svelte_key_llms_txt-ef43f6da","source":"documentation","title":"https://svelte.dev/docs/svelte/key/llms.txt","url":"https://svelte.dev/docs/svelte/key/llms.txt","text":"{/key} ``` It's also useful if you want a transition to play whenever a value changes: ```svelte {#key value} {value} {/key} ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.316Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":36}}226{"id":"doc-https_svelte_dev_docs_cli_sv_create_llms_txt-122082e5","source":"documentation","title":"https://svelte.dev/docs/cli/sv-create/llms.txt","url":"https://svelte.dev/docs/cli/sv-create/llms.txt","text":"` Create a SvelteKit project from a [playground](/playground) URL. This downloads all playground files, detects external dependencies, and sets up a complete SvelteKit project structure with everything ready to go. Example: ```sh npx sv create --from-playground=\"https://svelte.dev/playground/hello-world\" ``` ### `--template ` Which project template to `minimal` — barebones scaffolding for your new app - `demo` — showcase app with a word guessing game that works without JavaScript - `library` — template for a Svelte library, set up with `svelte-package` ### `--types ` Whether and how to add typechecking to the `ts` — default to `.ts` files and use `lang=\"ts\"` for `.svelte` components - `jsdoc` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types ### `--no-types` Prevent typechecking from being added. Not recommended! ### `--add [add-ons...]` Add add-ons to the project in the `create` command. Following the same format as [sv add](sv-add#Usage). Example: ```sh npx sv create --add eslint prettier [path] ``` ### `--no-add-ons` Run the command without the interactive add-ons prompt ### `--install ` Installs dependencies with a specified package `npm` - `pnpm` - `yarn` - `bun` - `deno` ### `--no-install` Prevents installing dependencies. ### `--no-dir-check` Skip checking whether the target directory is empty.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.316Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":348}}227{"id":"doc-https_svelte_dev_docs_kit_types_llms_txt-af11f22d","source":"documentation","title":"https://svelte.dev/docs/kit/types/llms.txt","url":"https://svelte.dev/docs/kit/types/llms.txt","text":"; export type PageLoad = Kit.Load; ``` These files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration: ```js /// /routes/[foo]/[bar]/[baz]/+server.js // @filename: $types.d.ts import type * as Kit from '@sveltejs/kit'; type RouteParams = { } export type RequestHandler = Kit.RequestHandler; // @filename: index.js // @errors: 2355 2322 // ---cut--- /** @type {import('./$types').RequestHandler} */ export async function GET({ params }) { // ... } ``` ```js /// /routes/[foo]/[bar]/[baz]/+page.js // @filename: $types.d.ts import type * as Kit from '@sveltejs/kit'; type RouteParams = { } export type PageLoad = Kit.Load; // @filename: index.js // @errors: 2355 // ---cut--- /** @type {import('./$types').PageLoad} */ export async function load({ params, fetch }) { // ... } ``` The return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`. Starting with version 2.16.0, two additional helper types are provided: `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined, while `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`. ```svelte ``` > [!LEGACY] > Before 2.16.0: > ```svelte > > > ``` > > Using Svelte 4: > ```svelte > > > ``` > [!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)): > > `{ \"extends\": \"./.svelte-kit/tsconfig.json\" }` ### Default tsconfig.json The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason: ```json /// /tsconfig.json { \"compilerOptions\": { \"paths\": { \"$lib\": [\"../src/lib\"], \"$lib/*\": [\"../src/lib/*\"] }, \"rootDirs\": [\"..\", \"./types\"] }, \"include\": [ \"ambient.d.ts\", \"non-ambient.d.ts\", \"./types/**/$types.d.ts\", \"../vite.config.js\", \"../vite.config.ts\", \"../src/**/*.js\", \"../src/**/*.ts\", \"../src/**/*.svelte\", \"../tests/**/*.js\", \"../tests/**/*.ts\", \"../tests/**/*.svelte\" ], \"exclude\": [ \"../node_modules/**\", \"../src/service-worker.js\", \"../src/service-worker/**/*.js\", \"../src/service-worker.ts\", \"../src/service-worker/**/*.ts\", \"../src/service-worker.d.ts\", \"../src/service-worker/**/*.d.ts\" ] } ``` Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing: ```json /// file: ``` Use the [`typescript.config` setting](configuration#typescript) in `svelte.config.js` to extend or modify the generated `tsconfig.json`. ## $lib This is a simple alias to `src/lib`. It allows you to access common components and utility modules without `../../../../` nonsense. ### $lib/server A subdirectory of `$lib`. SvelteKit will prevent you from importing any modules in `$lib/server` into client-side code. See [server-only modules](server-only-modules). ## app.d.ts The `app.d.ts` file is home to the ambient types of your apps, i.e. types that are available without explicitly importing them. Always part of this file is the `App` namespace. This namespace contains several types that influence the shape of certain SvelteKit features you interact with. 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: ```ts declare global { namespace App { // interface Error {} // interface Locals {} // interface PageData {} // interface PageState {} // interface Platform {} } } export {}; ``` The `export {}` line exists because without it, the file would be treated as an _ambient module_ which prevents you from adding `import` declarations. If you need to add ambient `declare module` declarations, do so in a separate file like `src/ambient.d.ts`. By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, and `data` from `load` functions. ## Error Defines the common shape of expected and unexpected errors. Expected errors are thrown using the `error` function. Unexpected errors are handled by the `handleError` hooks which should return this shape. ```dts interface Error {/*…*/} ``` ```dts ``` ## Locals The interface that defines `event.locals`, which can be accessed in server [hooks](/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files. ```dts interface Locals {} ``` ## PageData Defines the common shape of the [page.data state](/docs/kit/$app-state#page) and [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages. The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly. Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`). ```dts interface PageData {} ``` ## PageState The shape of the `page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`. ```dts interface PageState {} ``` ## Platform If your adapter provides [platform-specific context](/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here. ```dts interface Platform {} ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.316Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1412}}228{"id":"doc-https_svelte_dev_docs_kit_configuration_llms_txt-5340c486","source":"documentation","title":"https://svelte.dev/docs/kit/configuration/llms.txt","url":"https://svelte.dev/docs/kit/configuration/llms.txt","text":"```dts interface Config extends SvelteConfig {/*…*/} ``` ```dts kit?: KitConfig; ``` SvelteKit options. ```dts [key: string]: any; ``` Any additional options required by tooling that integrates with Svelte.\n\n- default `undefined`\n\n- default `{}`\n\n- default `\"_app\"`\n\n```ts // @noErrors assets?: '' | `http://${string}` | `https://${string}`; ``` - default `\"\"` An absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind. ```ts // @noErrors base?: '' | `/${string}`; ``` - default `\"\"` A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](/docs/kit/$app-paths#base) for that: `Link`. If you find yourself writing this often, it may make sense to extract this into a reusable component. ```ts // @noErrors relative?: boolean; ``` - default `true` - available since v1.9.0 Whether to use relative asset paths. If `true`, `base` and `assets` imported from `$app/paths` will be replaced with relative asset paths during server-side rendering, resulting in more portable HTML. If `false`, `%sveltekit.assets%` and references to build artifacts will always be root-relative paths, unless `paths.assets` is an external URL [Single-page app](/docs/kit/single-page-apps) fallback pages will always use absolute paths, regardless of this setting. If your app uses a `` element, you should set this to `false`, otherwise asset URLs will incorrectly be resolved against the `` URL rather than the current page. In 1.0, `undefined` was a valid value, which was set by default. In that case, if `paths.assets` was not external, SvelteKit would replace `%sveltekit.assets%` with a relative path and use relative paths to reference build artifacts, but `base` and `assets` imported from `$app/paths` would be as specified in your config.\n\n```ts // @noErrors concurrency?: number; ``` - default `1` 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. ```ts // @noErrors crawl?: boolean; ``` - default `true` Whether SvelteKit should find pages to prerender by following links from `entries`. ```ts // @noErrors entries?: Array<'*' | `/${string}`>; ``` - default `[\"*\"]` 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). ```ts // @noErrors handleHttpError?: PrerenderHttpErrorHandlerValue; ``` - default `\"fail\"` - available since v1.15.7 How to respond to HTTP errors encountered while prerendering the app. - `'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 /// /** @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); } } } }; ``` ```ts // @noErrors handleMissingId?: PrerenderMissingIdHandlerValue; ``` - default `\"fail\"` - available since v1.15.7 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 ```ts // @noErrors handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue; ``` - default `\"fail\"` - available since v1.16.0 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 ```ts // @noErrors handleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue; ``` - default `\"fail\"` - available since v2.16.0 How to respond when a route is marked as prerenderable but has not been prerendered. - `'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 a `routes` property which contains all routes that haven't been prerendered. If you `throw` from this function, the build will fail The default behavior is to fail the build. This may be undesirable when you know that some of your routes may never be reached under certain circumstances such as a CMS not returning data for a specific area, resulting in certain routes never being reached. ```ts // @noErrors handleInvalidUrl?: PrerenderInvalidUrlHandlerValue; ``` - default `\"fail\"` - available since v2.67.0 How to respond when SvelteKit encounters a URL it cannot parse while crawling prerendered HTML (for example, an AT Protocol URL such as `at://did:plc:...`). - `'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 `href`, `referrer` and `message` properties. If you `throw` from this function, the build will fail ```ts // @noErrors origin?: string; ``` - default `\"http://sveltekit-prerender\"` The value of `url.origin` during prerendering; useful if it is included in rendered content.\n\n```ts // @noErrors type?: 'pathname' | 'hash'; ``` - default `\"pathname\"` - available since v2.14.0 What type of client-side router to use. - `'pathname'` is the default and means the current URL pathname determines the route - `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed. It comes with some can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with #/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app. ```ts // @noErrors resolution?: 'client' | 'server'; ``` - default `\"client\"` - available since v2.17.0 How to determine which route to load when navigating to a new page. By default, SvelteKit will serve a route manifest to the browser. When navigating, this manifest is used (along with the `reroute` hook, if it exists) to determine which components to load and which `load` functions to run. Because everything happens on the client, this decision can be made immediately. The drawback is that the manifest needs to be loaded and parsed before the first navigation can happen, which may have an impact if your app contains many routes. Alternatively, SvelteKit can determine the route on the server. This means that for every navigation to a path that has not yet been visited, the server will be asked to determine the route. This has several The client does not need to load the routing manifest upfront, which can lead to faster initial page loads - The list of routes is hidden from public view - The server has an opportunity to intercept each navigation (for example through a middleware), enabling (for example) A/B testing opaque to SvelteKit The drawback is that for unvisited paths, resolution will take slightly longer (though this is mitigated by [preloading](/docs/kit/link-options#data-sveltekit-preload-data)). > [!NOTE] When using server-side route resolution and prerendering, the resolution is prerendered along with the route itself.\n\n```ts // @noErrors config?: (config: Record) => Record | void; ``` - default `(config) => config` - available since v1.3.0 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. Note that any paths configured here should be relative to the generated config file, which is written to `.svelte-kit/tsconfig.json`.\n\n```ts // @noErrors name?: string; ``` 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. For example, to use the current commit hash, you could do use `git rev-parse HEAD`: ```js // @errors: 7031 /// import * as child_process from 'node:child_process'; export default { kit: { version: { ('git rev-parse HEAD').toString().trim() } } }; ``` ```ts // @noErrors pollInterval?: number; ``` - default `0` The interval in milliseconds to poll for version changes. If this is `0`, no polling occurs.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.317Z","totalSectionsIncluded":9,"totalCodeBlocksIncluded":0,"totalLines":19,"estimatedTokens":2466}}229{"id":"doc-https_svelte_dev_docs_cli_sv_utils_llms_txt-23067c25","source":"documentation","title":"https://svelte.dev/docs/cli/sv-utils/llms.txt","url":"https://svelte.dev/docs/cli/sv-utils/llms.txt","text":"'); }) ); ``` ### `transforms.svelteScript` Transform a Svelte component with a `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.318Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":24}}230{"id":"doc-https_svelte_dev_docs_ai_skills_llms_txt-7f2bef65","source":"documentation","title":"https://svelte.dev/docs/ai/skills/llms.txt","url":"https://svelte.dev/docs/ai/skills/llms.txt","text":"Open Releases page\n\nView skill content ````markdown ## CLI tools You have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`: ### List documentation sections ```bash npx @sveltejs/mcp list-sections ``` Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths. ### Get documentation ```bash npx @sveltejs/mcp get-documentation \",,...\" ``` Retrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs. **Example:** ```bash npx @sveltejs/mcp get-documentation \"$state,$derived,$effect\" ``` ### Svelte autofixer ```bash npx @sveltejs/mcp svelte-autofixer \"\" [options] ``` Analyzes Svelte code and suggests fixes for common issues. **Options:** - `--async` - Enable async Svelte mode (default: false) - `--svelte-version` - Target or 5 (default: 5) **Examples:** ```bash # Analyze inline code (escape $ as \\$) npx @sveltejs/mcp svelte-autofixer '' # Analyze a file npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte # Target Svelte 4 npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4 ``` **Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\\$` to prevent shell variable substitution. ## Workflow 1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics 2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues 3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component ````\n\nOpen Releases page\n\nView skill content ````markdown ## `$state` Only use the `$state` rune for variables that should be _reactive_ — in other words, variables that cause an `$effect`, `$derived` or template expression to update. Everything else can be a normal variable. Objects and arrays (`$state({...})` or `$state([...])`) are made deeply reactive, meaning mutation will trigger updates. This has a exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use `$state.raw` instead. This is often the case with API responses, for example. ## `$derived` To compute something from state, use `$derived` rather than `$effect`: ```js // do this let square = $derived(num * num); // don't do this let square; $effect(() => { square = num * num; }); ``` > [!NOTE] `$derived` is given an expression, _not_ a function. If you need to use a function (because the expression is complex, for example) use `$derived.by`. Deriveds are writable — you can assign to them, just like `$state`, except that they will re-evaluate when their expression changes. If the derived expression is an object or array, it will be returned as-is — it is _not_ made deeply reactive. You can, however, use `$state` inside `$derived.by` in the rare cases that you need this. ## `$effect` Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects. - If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md) - If you need to run some code in response to user interaction, put the code directly in an event handler or use a [function binding](references/bind.md) as appropriate - If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md) - If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md) Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server. ## `$props` Treat props as though they will change. For example, values that depend on props should usually use `$derived`: ```js // @errors: 2451 let { type } = $props(); // do this let color = $derived(type === 'danger' ? 'red' : 'green'); // don't do this — `color` will not update if `type` changes let color = type === 'danger' ? 'red' : 'green'; ``` ## `$inspect.trace` `$inspect.trace` is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add `$inspect.trace(label)` as the first line of an `$effect` or `$derived.by` (or any function they call) to trace their dependencies and discover which one triggered an update. ## Events Any element attribute starting with `on` is treated as an event listener: ```svelte {...}}>click me ... ... ``` If you need to attach listeners to `window` or `document` you can use `` and ``: ```svelte ``` Avoid using `onMount` or `$effect` for this. ## Snippets [Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template. ```svelte {#snippet greeting(name)} hello {name}! {/snippet} {@render greeting('world')} ``` > [!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.318Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":9,"estimatedTokens":1281}}231{"id":"doc-https_svelte_dev_docs_svelte_host_llms_txt-c48472c6","source":"documentation","title":"https://svelte.dev/docs/svelte/$host/llms.txt","url":"https://svelte.dev/docs/svelte/$host/llms.txt","text":"dispatch('decrement')}>decrement dispatch('increment')}>increment ``` ```svelte /// count -= 1} onincrement={() => count += 1} > count: {count} ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.318Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":41}}232{"id":"doc-https_svelte_dev_docs_cli_sv_check_llms_txt-a301bc74","source":"documentation","title":"https://svelte.dev/docs/cli/sv-check/llms.txt","url":"https://svelte.dev/docs/cli/sv-check/llms.txt","text":"` Path to your workspace. All subdirectories except `node_modules` and those listed in `--ignore` are checked. ### `--output ` How to display errors and warnings. See [machine-readable output](#Machine-readable-output). - `human` - `human-verbose` - `machine` - `machine-verbose` ### `--watch` Keeps the process alive and watches for changes. ### `--preserveWatchOutput` Prevents the screen from being cleared in watch mode. ### `--tsconfig ` Pass a path to a `tsconfig` or `jsconfig` file. The path can be relative to the workspace path or absolute. Doing this means that only files matched by the `files`/`include`/`exclude` pattern of the config file are diagnosed. It also means that errors from TypeScript and JavaScript files are reported. If not given, will traverse upwards from the project directory looking for the next `jsconfig`/`tsconfig.json` file. ### `--no-tsconfig` Use this if you only want to check the Svelte files found in the current directory and below and ignore any `.js`/`.ts` files (they will not be type-checked) ### `--ignore ` Files/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example: ```sh npx sv check --ignore \"dist,build\" ``` Only has an effect when used in conjunction with `--no-tsconfig`. When used in conjunction with `--tsconfig`, this will only have effect on the files watched, not on the files that are diagnosed, which is then determined by the `tsconfig.json`. ### `--fail-on-warnings` If provided, warnings will cause `sv check` to exit with an error code. ### `--compiler-warnings ` A quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`: ```sh npx sv check --compiler-warnings \"css_unused_selector:ignore,a11y_missing_attribute:error\" ``` ### `--diagnostic-sources ` A quoted, comma-separated list of sources that should run diagnostics on your code. By default, all are `js` (includes TypeScript) - `svelte` - `css` Example: ```sh npx sv check --diagnostic-sources \"js,svelte\" ``` ### `--threshold ` Filters the `warning` (default) — both errors and warnings are shown - `error` — only errors are shown ## Troubleshooting [See the language-tools documentation](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) for more information on preprocessor setup and other troubleshooting. ## Machine-readable output Setting the `--output` to `machine` or `machine-verbose` will format output in a way that is easier to read by machines, e.g. inside CI pipelines, for code quality checks, etc. Each row corresponds to a new record. Rows are made up of columns that are separated by a single space character. The first column of every row contains a timestamp in milliseconds which can be used for monitoring purposes. The second column gives us the \"row type\", based on which the number and types of subsequent columns may differ. The first row is of type `START` and contains the workspace folder (wrapped in quotes). Example: ``` 1590680325583 START \"/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles\" ``` Any number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argument. If the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example: ``` 1590680326283 ERROR \"codeactions.svelte\" \"Cannot find module 'blubb' or its corresponding type declarations.\" 1590680326778 WARNING \"imported-file.svelte\" \"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\" ``` If the argument is `machine-verbose` it will tell us the filename, the starting line and column numbers, the ending line and column numbers, the error message, the code of diagnostic, the human-friendly description of the code and the human-friendly source of the diagnostic (eg. svelte/typescript). The filename is relative to the workspace directory. Each diagnostic is represented as an [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) line prefixed by the timestamp of the log. Example: ``` 1590680326283 {\"type\":\"ERROR\",\"fn\":\"codeaction.svelte\",\"start\":{\"line\":1,\"character\":16},\"end\":{\"line\":1,\"character\":23},\"message\":\"Cannot find module 'blubb' or its corresponding type declarations.\",\"code\":2307,\"source\":\"js\"} 1590680326778 {\"type\":\"WARNING\",\"filename\":\"imported-file.svelte\",\"start\":{\"line\":0,\"character\":37},\"end\":{\"line\":0,\"character\":51},\"message\":\"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\",\"code\":\"unused-export-let\",\"source\":\"svelte\"} ``` The output concludes with a `COMPLETED` message that summarizes total numbers of files, errors and warnings that were encountered during the check. Example: ``` 1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS ``` If the application experiences a runtime error, this error will appear as a `FAILURE` record. Example: ``` 1590680328921 FAILURE \"Connection closed\" ``` ## Credits - Vue's [VTI](https://github.com/vuejs/vetur/tree/master/vti) which laid the foundation for `svelte-check` ## FAQ ### Why is there no option to only check specific files (for example only staged files)? `svelte-check` needs to 'see' the whole project for checks to be valid. Suppose you renamed a component prop but didn't update any of the places where the prop is used — the usage sites are all errors now, but you would miss them if checks only ran on changed files.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.319Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1445}}233{"id":"doc-https_svelte_dev_docs_svelte_bindable_llms_txt-6de7926c","source":"documentation","title":"https://svelte.dev/docs/svelte/$bindable/llms.txt","url":"https://svelte.dev/docs/svelte/$bindable/llms.txt","text":"` can add the [`bind:`](bind) directive (demo: ```svelte /// {message} ``` The parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say. In this case, you can specify a fallback value for when no prop is passed at all: ```js /// let { value = $bindable('fallback'), ...props } = $props(); ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.319Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":100}}234{"id":"doc-shopping_list-8281c1e4","source":"documentation","title":"Shopping list","url":"https://svelte.dev/docs/svelte/each/llms.txt","text":"{#each items as item} {item.name} x {item.qty} {/each}\n\n{i + 1}: {item.name} x {item.qty}\n\n{item.name} x {item.qty}\n\n{i + 1}: {item.name} x {item.qty}\n\n{i + 1}: {name} x {qty}\n\n{#each { }, rank} {#each { }, file} {/each} {/each}\n\nNo tasks today!\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.319Z","totalSectionsIncluded":7,"totalCodeBlocksIncluded":0,"totalLines":15,"estimatedTokens":65}}235{"id":"doc-hello_name-7e9b5a32","source":"documentation","title":"Hello {name}!","url":"https://svelte.dev/docs/svelte/basic-markup/llms.txt","text":"` or ``, indicates a _component_. ```svelte ``` ## Element attributes By default, attributes work exactly like their HTML counterparts. ```svelte can't touch this ``` As in HTML, values may be unquoted. ```svelte ``` Attribute values can contain JavaScript expressions. ```svelte page {p} ``` Or they can _be_ JavaScript expressions. ```svelte ... ``` Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`). ```svelte This div has no title attribute ``` > [!NOTE] Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it will cause the value to be coerced to a string: > > > ```svelte > ... > ``` When the attribute name and value match (`name={name}`), they can be replaced with `{name}`. ```svelte ... ``` ## Component props By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM. As with elements, `name={name}` can be replaced with the `{name}` shorthand. ```svelte ``` ## Spread attributes _Spread attributes_ allow many attributes or properties to be passed to an element or component at once. An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a=\"b\"`, while `c=\"d\"` would take precedence over `things.c`: ```svelte ``` ## Events Listening to DOM events is possible by adding attributes to the element that start with `on`. For example, to listen to the `click` event, add the `onclick` attribute to a button: ```svelte console.log('clicked')}>click me ``` Event attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them. Because events are just attributes, the same rules as for attributes you can use the shorthand form: `click me` - you can spread them: `click me` Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_. When using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`. In the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action). ### Event delegation To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path. There are a few gotchas to be aware when you manually dispatch an event with a delegated listener, make sure to set the `{ }` option or it won't reach the application root - when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly. The following event handlers are `beforeinput` - `click` - `change` - `dblclick` - `contextmenu` - `focusin` - `focusout` - `input` - `keydown` - `keyup` - `mousedown` - `mousemove` - `mouseout` - `mouseover` - `mouseup` - `pointerdown` - `pointermove` - `pointerout` - `pointerover` - `pointerup` - `touchend` - `touchmove` - `touchstart` ## Text expressions A JavaScript expression can be included as text by surrounding it with curly braces. ```svelte {expression} ``` Expressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion). Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`. If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses. ```svelte Hello {name}! {a} + {b} = {a + b}. {(/^[A-Za-z ]+$/).test(value) ? } ``` The expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead. ```svelte {@html potentiallyUnsafeHtmlString} ``` > [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/) ## Comments You can use HTML comments inside components. ```svelte Hello world ``` Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason. ```svelte ``` You can add a special comment starting with `@component` that will show up when hovering over the component name in other files. ````svelte Hello, {name} ````\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.320Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1526}}236{"id":"doc-https_svelte_dev_docs_svelte_derived_llms_txt-f5be8fef","source":"documentation","title":"https://svelte.dev/docs/svelte/$derived/llms.txt","url":"https://svelte.dev/docs/svelte/$derived/llms.txt","text":"{count} doubled is {doubled}\n\nnumbers.push(numbers.length + 1)}> {numbers.join(' + ')} = {total}\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.320Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":28}}237{"id":"doc-https_svelte_dev_docs_svelte_props_llms_txt-8d969aa9","source":"documentation","title":"https://svelte.dev/docs/svelte/$props/llms.txt","url":"https://svelte.dev/docs/svelte/$props/llms.txt","text":"``` On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune... ```svelte this component is {props.adjective} ``` ...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props: ```svelte this component is {+++adjective+++} ``` ## Fallback values Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`): ```js let { adjective = 'happy' } = $props(); ``` > [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info) ## Renaming props We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`: ```js let { = 'lights are gonna find me' } = $props(); ``` ## Rest props Finally, we can use a _rest property_ to get, well, the rest of the props: ```js let { a, b, c, ...others } = $props(); ``` ## Updating props References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state: ```svelte (count += 1)}> clicks (parent): {count} ``` ```svelte (count += 1)}> clicks (child): {count} ``` While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable). If the prop is a regular object, the mutation will have no effect: ```svelte ``` ```svelte { // has no effect object.count += 1 }}> clicks: {object.count} ``` If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it: ```svelte ``` ```svelte { // will cause the count below to update, // but with a warning. Don't mutate // objects you don't own! object.count += 1 }}> clicks: {object.count} ``` The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates: ```svelte ``` ```svelte { // has no effect if the fallback value is used object.count += 1 }}> clicks: {object.count} ``` In 't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune. ## Type safety You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this... ```svelte ``` ...while in JSDoc you can do this: ```svelte ``` You can, of course, separate the type declaration from the annotation: ```svelte ``` > [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components)) If your component exposes [snippet](snippet) props like `children`, these should be typed using the `Snippet` interface imported from `'svelte'` — see [Typing snippets](snippet#Typing-snippets) for examples. Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide. ## `$props.id()` This rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client. This is useful for linking elements via attributes like `for` and `aria-labelledby`. ```svelte First Name: ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.320Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":955}}238{"id":"doc-https_svelte_dev_docs_svelte_state_llms_txt-57eb39cb","source":"documentation","title":"https://svelte.dev/docs/svelte/$state/llms.txt","url":"https://svelte.dev/docs/svelte/$state/llms.txt","text":"count++}> clicks: {count}\n\n` rather than the `Todo`: ```svelte\n\n{ } interface Svelte { state(value?: T): Signal; get(source: Signal): T; set(source: Signal, ): void; } declare const $: Svelte; // ---cut--- export let count = $.state(0); export function increment() { $.set(count, $.get(count) + 1); } ``` > [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground). Since the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`: ```js // @filename: state.svelte.js export let count = 0; // @filename: index.js // ---cut--- import { count } from './state.svelte.js'; console.log(typeof count); // 'object', not 'number' ``` This leaves you with two options for sharing state between modules — either don't reassign it... ```js // This is allowed — since we're updating // `counter.count` rather than `counter`, // Svelte doesn't wrap it in `$.state` export const counter = $state({ }); export function increment() { counter.count += 1; } ``` ...or don't directly export it: ```js let count = $state(0); export function getCount() { return count; } export function increment() { count += 1; } ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":317}}239{"id":"doc-https_svelte_dev_docs_svelte_transition_llms_txt-2fd98e3e","source":"documentation","title":"https://svelte.dev/docs/svelte/transition/llms.txt","url":"https://svelte.dev/docs/svelte/transition/llms.txt","text":"visible = !visible}>toggle\n\nfades in and out\n\nfades in and out only when y changes\n\nfades in and out when x or y change\n\nfades in and out over two seconds\n\nThe quick brown fox jumps over the lazy dog\n\n(status = 'intro started')} onoutrostart={() => (status = 'outro started')} onintroend={() => (status = 'intro ended')} onoutroend={() => (status = 'outro ended')} > Flies in and out\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":7,"totalCodeBlocksIncluded":0,"totalLines":15,"estimatedTokens":100}}240{"id":"doc-https_svelte_dev_docs_svelte_await_llms_txt-53fef2fb","source":"documentation","title":"https://svelte.dev/docs/svelte/await/llms.txt","url":"https://svelte.dev/docs/svelte/await/llms.txt","text":"waiting for the promise to resolve...\n\nThe value is {value}\n\nSomething went wrong: {error.message}\n\nwaiting for the promise to resolve...\n\nThe value is {value}\n\nThe value is {value}\n\nThe error is {error}\n\n> {/await} > ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":8,"totalCodeBlocksIncluded":0,"totalLines":17,"estimatedTokens":59}}241{"id":"doc-https_svelte_dev_docs_svelte_svelte_element_llms-7723c4ab","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-element/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-element/llms.txt","text":"``` The `` element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element. The only supported binding is `bind:this`, since Svelte's built-in bindings do not work with generic elements. If `this` has a nullish value, the element and its children will not be rendered. If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `` has child elements, a runtime error will be thrown in development mode: ```svelte This text cannot appear inside an hr element ``` Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute: ```svelte ``` `this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":234}}242{"id":"doc-https_svelte_dev_docs_svelte_await_expressions_l-baf7af23","source":"documentation","title":"https://svelte.dev/docs/svelte/await-expressions/llms.txt","url":"https://svelte.dev/docs/svelte/await-expressions/llms.txt","text":"{a} + {b} = {await add(a, b)}\n\n` will _not_ immediately update to read this — ```html\n\nopen = false} /> {/if} ``` ## Caveats As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum. ## Breaking changes Effects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in very rare situations.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":166}}243{"id":"doc-https_svelte_dev_docs_svelte_snippet_llms_txt-4b988d4b","source":"documentation","title":"https://svelte.dev/docs/svelte/snippet/llms.txt","url":"https://svelte.dev/docs/svelte/snippet/llms.txt","text":"hello {name}! {message}!\n\n{#snippet x()} {#snippet y()}...{/snippet} {@render y()} {/snippet} {@render y()}\n\nfruit qty price total{d.name} {d.qty} {d.price} {d.qty * d.price}\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":47}}244{"id":"doc-https_svelte_dev_docs_svelte_declaration_tags_ll-b1d837bc","source":"documentation","title":"https://svelte.dev/docs/svelte/declaration-tags/llms.txt","url":"https://svelte.dev/docs/svelte/declaration-tags/llms.txt","text":"editing = true}>edit name\n\n{ user.name = name; editing = false; }}>save\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":22}}245{"id":"doc-https_svelte_dev_docs_svelte_svelte_body_llms_tx-ccae08f6","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-body/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-body/llms.txt","text":"``` Similarly to ``, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `` element. As with `` and ``, this element may only appear at the top level of your component and must never be inside a block or element. ```svelte ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":93}}246{"id":"doc-https_svelte_dev_docs_svelte_class_llms_txt-1b446c53","source":"documentation","title":"https://svelte.dev/docs/svelte/class/llms.txt","url":"https://svelte.dev/docs/svelte/class/llms.txt","text":"useTailwind = true} class={{ 'bg-blue-700 /2': useTailwind }} > Accept the inevitability of Tailwind\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":29}}247{"id":"doc-https_svelte_dev_docs_svelte_svelte_window_llms_-b6c96f29","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-window/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-window/llms.txt","text":"``` ```svelte ``` The `` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering. This element may only appear at the top level of your component — it cannot be inside a block or element. ```svelte ``` You can also bind to the following `innerWidth` - `innerHeight` - `outerWidth` - `outerHeight` - `scrollX` - `scrollY` - `online` — an alias for `window.navigator.onLine` - `devicePixelRatio` All except `scrollX` and `scrollY` are readonly. ```svelte ``` > [!NOTE] Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. If you have a legitimate reason to scroll when the component is rendered, call `scrollTo()` in an `$effect`.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":231}}248{"id":"doc-https_svelte_dev_docs_svelte_svelte_document_llm-21426db8","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-document/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-document/llms.txt","text":"``` ```svelte ``` Similarly to ``, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [attachments](@attach) on `document`. As with ``, this element may only appear the top level of your component and must never be inside a block or element. ```svelte ``` You can also bind to the following `activeElement` - `fullscreenElement` - `pointerLockElement` - `visibilityState` All are readonly.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":125}}249{"id":"doc-hello_world-01c76e33","source":"documentation","title":"Hello world!","url":"https://svelte.dev/docs/svelte/svelte-head/llms.txt","text":"`, `` and ``, this element may only appear at the top level of your component and must never be inside a block or element. ```svelte Hello world! ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.321Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":41}}250{"id":"doc-customize_your_burrito-be8fa416","source":"documentation","title":"Customize your burrito","url":"https://svelte.dev/docs/svelte/bind/llms.txt","text":"{#if indeterminate} waiting... {:else if checked} checked {:else} unchecked {/if}\n\n# Customize your burrito\n\nFillings: {fillings.join(', ') || 'None'}\n\nUpload a picture:\n\n` A `\n\n`, which can be any value (not just strings, as is normally the case in the DOM). ```svelte a b c ``` A `` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected ``. ```svelte\n\n` matches its text content, the attribute can be omitted. ```svelte Rice Beans Cheese Guac (extra) ``` You can give the `` a default value by adding a `selected` attribute to the `` (or options, in the case of ``) that should be initially selected. If the `` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`. ```svelte\n\n` `` elements have their own set of bindings — five two-way ones... - [`currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) - [`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) - [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused) - [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume) - [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted) ...and six readonly [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration) - [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered) - [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable) - [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event) - [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended) - [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState) - [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played) ```svelte ``` ## `` `` elements have all the same bindings as [``](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings. ## `` `` elements have two readonly [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) - [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight) ## `` `` elements support binding to the `open` property. ```svelte How do you comfort a JavaScript bug? You console it. ``` ## `window` and `document` To bind to properties of `window` and `document`, see [``](svelte-window) and [``](svelte-document). ## Contenteditable bindings Elements with the `contenteditable` attribute support the following [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) - [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) > [!NOTE] There are [subtle differences between `innerText` and `textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext). ```svelte ``` ## Dimensions All visible elements have the following readonly bindings, measured with a `ResizeObserver`: - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) - [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect) - [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize) - [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize) - [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize) ```svelte ``` > [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `` and `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.322Z","totalSectionsIncluded":8,"totalCodeBlocksIncluded":0,"totalLines":17,"estimatedTokens":1116}}251{"id":"doc-hello_user_name_inside_child_svelte-611e6d63","source":"documentation","title":"hello {user.name}, inside Child.svelte","url":"https://svelte.dev/docs/svelte/context/llms.txt","text":"# hello {user.name}, inside Child.svelte\n\n(); ``` > [!NOTE] `createContext` was added in version 5.40. If you are using an earlier version of Svelte, you must use `setContext` and `getContext` instead. This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) as shown above. ## `setContext` and `getContext` As an alternative to `createContext`, you can use `setContext` and `getContext` directly. The parent component sets context with `setContext(key, value)`... ```svelte ``` ...and the child retrieves it with `getContext`: ```svelte {message}, inside Child.svelte ``` The key (`'my-context'`, in the example above) and the context itself can be any JavaScript value. > [!NOTE] `createContext` is preferred since it provides better type safety and makes it unnecessary to use keys. In addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions. ## Using context with state You can store reactive state in context... ```svelte counter.count += 1}> increment counter.count = 0}> reset ``` ```svelte {counter.count} ``` ```ts /// import { createContext } from 'svelte'; interface Counter { } export const [getCounter, setCounter] = createContext(); ``` ...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this... ```svelte counter = { } }> reset ``` ...you must do this: ```svelte +++counter.count = 0+++}> reset ``` Svelte will warn you if you get it wrong. Similarly, to pass primitive values through context, use functions as described in [Passing state into functions]($state#Passing-state-into-functions). ## Component testing When writing [component tests](testing#Unit-and-component-tests-with-Vitest-Component-testing), it can be useful to create a wrapper component that sets the context in order to check the behaviour of a component that uses it. As of version 5.49, you can do this sort of thing: ```js import { mount, unmount } from 'svelte'; import { expect, test } from 'vitest'; import { setUserContext } from './context'; import MyComponent from './MyComponent.svelte'; test('MyComponent', () => { function Wrapper(...args) { setUserContext({ name: 'Bob' }); return MyComponent(...args); } const component = mount(Wrapper, { }); expect(document.body.innerHTML).toBe('Hello Bob!'); unmount(component); }); ``` This approach also works with [`hydrate`](imperative-component-api#hydrate) and [`render`](imperative-component-api#render). ## Replacing global state When you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed: ```js /// export const myGlobalState = $state({ user: { // ... } // ... }); ``` In many cases this is perfectly fine, but there is a you mutate the state during server-side rendering (which is discouraged, but entirely possible!)... ```svelte ``` ...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.323Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":804}}252{"id":"doc-https_svelte_dev_docs_svelte_custom_properties_l-1a98de16","source":"documentation","title":"https://svelte.dev/docs/svelte/custom-properties/llms.txt","url":"https://svelte.dev/docs/svelte/custom-properties/llms.txt","text":"``` The above code essentially desugars to this: ```svelte ``` For an SVG element, it would use `` instead: ```svelte ``` Inside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties): ```svelte ``` You don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application. > [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.323Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":207}}253{"id":"doc-https_svelte_dev_docs_svelte_svelte_animate_llms-f13a11ac","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-animate/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-animate/llms.txt","text":"```dts function flip( , { from, to }: { }, params?: FlipParams ): AnimationConfig; ```\n\n```dts interface AnimationConfig {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: (t: number) => number; ``` ```dts css?: (t: number, ) => string; ``` ```dts tick?: (t: number, ) => void; ```\n\n```dts interface FlipParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number | ((len: number) => number); ``` ```dts easing?: (t: number) => number; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.323Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":125}}254{"id":"doc-https_svelte_dev_docs_svelte_svelte_options_llms-ab519c9c","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-options/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-options/llms.txt","text":"``` The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section) - `runes={false}` — forces a component into _legacy mode_ - `namespace=\"...\"` — the namespace where this component will be used, can be \"html\" (the default), \"svg\" or \"mathml\" - `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option - `css=\"injected\"` — the component will inject its styles server-side rendering, it's injected as a `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.323Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":188}}255{"id":"doc-https_svelte_dev_docs_svelte_svelte_boundary_llm-b9f8a9e8","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-boundary/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-boundary/llms.txt","text":"{await delayed('hello!')} {#snippet pending()} loading... {/snippet}\n\n{#snippet failed(error, reset)} oops! try again {/snippet}\n\n{ error = null; reset(); }}> oops! try again\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.323Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":47}}256{"id":"doc-https_svelte_dev_docs_svelte_typescript_llms_txt-01345a05","source":"documentation","title":"https://svelte.dev/docs/svelte/typescript/llms.txt","url":"https://svelte.dev/docs/svelte/typescript/llms.txt","text":"greet(e.target.innerText)}> {name as string}\n\neventHandler('clicked button')}> {@render snippetWithStringArgument('hello')}\n\n``` > [!LEGACY] In Svelte 4, components were of type `SvelteComponent` To extract the properties from a component, use `ComponentProps`. ```ts import type { Component, ComponentProps } from 'svelte'; import MyComponent from './MyComponent.svelte'; function withProps>( , ) {} // Errors if the second argument is not the correct props expected // by the component in the first argument. withProps(MyComponent, { foo: 'bar' }); ``` To declare that a variable expects the constructor or instance type of a component: ```svelte ``` ## Enhancing built-in DOM types Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it. In case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this: ```ts /// import { HTMLButtonAttributes } from 'svelte/elements'; declare module 'svelte/elements' { // add a new element export interface SvelteHTMLElements { 'custom-button': HTMLButtonAttributes; } // add a new global attribute that is available on all html elements export interface HTMLAttributes { globalattribute?: string; } // add a new attribute for button elements export interface HTMLButtonAttributes { veryexperimentalattribute?: string; } } export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented ``` Then make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `\"include\": [\"src/**/*\"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.324Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":539}}257{"id":"doc-hello_name-28a4f5c3","source":"documentation","title":"Hello {name}!","url":"https://svelte.dev/docs/svelte/custom-elements/llms.txt","text":"` [element](svelte-options). Within the custom element you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune. ```svelte Hello {name}! ``` You can leave out the tag name for any of your inner components which you don't want to expose and use them like regular Svelte components. Consumers of the component can still name it afterwards if needed, using the static `element` property which contains the custom element constructor and which is available when the `customElement` compiler option is `true`. ```js // @noErrors import MyElement from './MyElement.svelte'; customElements.define('my-element', MyElement.element); ``` Once a custom element has been defined, it can be used as a regular DOM element: ```js document.body.innerHTML = ` This is some slotted content `; ``` Any [props](basic-markup#Component-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible). ```js // @noErrors const el = document.querySelector('my-element'); // get the current value of the 'name' prop console.log(el.name); // set a new value, updating the shadow DOM el.name = 'everybody'; ``` Note that you need to list out all properties explicitly, i.e. doing `let props = $props()` without declaring `props` in the [component options](#Component-options) means that Svelte can't know which props to expose as properties on the DOM element. ## Component lifecycle Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately. When a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#Component-options). When a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component. The inner Svelte component is destroyed in the next tick after the `disconnectedCallback` is invoked. ## Component options When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `` since Svelte 4. This object may contain the following `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component. - `shadow`: an optional property to modify shadow root properties. It accepts the following `\"none\"`: No shadow root is created. Note that styles are then no longer encapsulated, and you can't use slots. - `\"open\"`: Shadow root is created with the `mode: \"open\"` option. - [`ShadowRootInit`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options): You can pass a settings object that will be passed to `attachShadow()` when shadow root is created. - `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following `attribute: string`: To update a custom element's prop, you have two set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: \"\"`. - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`. - `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a `String` by default. This may not always be accurate. For instance, for a number type, define it using `type: \"Number\"` You don't need to list all properties, those not listed will use the default settings. - `extend`: an optional property which expects a function as its argument. It is passed the custom element class generated by Svelte and expects you to return a custom element class. This comes in handy if you have very specific requirements to the life cycle of the custom element or want to enhance the class to for example use [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) for better HTML form integration. ```svelte { // Extend the class so we can let it participate in HTML forms return class extends customElementConstructor { static formAssociated = true; constructor() { super(); this.attachedInternals = this.attachInternals(); } // Add the function here, not below in the component so that // it's always available, not just when the inner Svelte component // is mounted randomIndex() { this.elementIndex = Math.random(); } }; } }} /> ... ``` > [!NOTE] While Typescript is supported in the `extend` function, it is subject to need to set `lang=\"ts\"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors. ## Caveats and limitations Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: \"none\"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier - Instead of being extracted out as a separate ` block. Similarly, including a `` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times - The deprecated `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot - Polyfills are required to support older browsers - You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element. - Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.324Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1791}}258{"id":"doc-https_svelte_dev_docs_svelte_stores_llms_txt-87af435b","source":"documentation","title":"https://svelte.dev/docs/svelte/stores/llms.txt","url":"https://svelte.dev/docs/svelte/stores/llms.txt","text":"User name: {userState.name}\n\n{ userState.name = 'new name'; }}> change name\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":23}}259{"id":"doc-https_svelte_dev_docs_svelte_svelte_legacy_llms_-7807da5d","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-legacy/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-legacy/llms.txt","text":"[CALLOUT]\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n```dts function asClassComponent< Props extends Record, Exports extends Record, Events extends Record, Slots extends Record >( component: | SvelteComponent | Component ): ComponentType< SvelteComponent & Exports >; ```\n\n[CALLOUT]\nUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.\n\n```dts function createBubbler(): ( ) => (event: Event) => boolean; ```\n\n[CALLOUT]\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n```dts function createClassComponent< Props extends Record, Exports extends Record, Events extends Record, Slots extends Record >( & { component: | ComponentType> | Component; } ): SvelteComponent & Exports; ```\n\n```dts function handlers( ...handlers: EventListener[] ): EventListener; ```\n\n```dts function nonpassive( , [event, handler]: [ , handler: () => EventListener ] ): void; ```\n\n```dts function once( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n```dts function passive( , [event, handler]: [ , handler: () => EventListener ] ): void; ```\n\n```dts function preventDefault( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n[CALLOUT]\nUse this only as a temporary solution to migrate your component code to Svelte 5.\n\n```dts function run(fn: () => void | (() => void)): void; ```\n\n```dts function self( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n```dts function stopImmediatePropagation( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n```dts function stopPropagation( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n```dts function trusted( fn: (event: Event, ...args: Array) => void ): (event: Event, ...args: unknown[]) => void; ```\n\n```dts type LegacyComponentType = { new (o: ComponentConstructorOptions): SvelteComponent; ( ...args: Parameters>> ): ReturnType< Component, Record> >; }; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":18,"totalCodeBlocksIncluded":0,"totalLines":41,"estimatedTokens":542}}260{"id":"doc-https_svelte_dev_docs_svelte_best_practices_llms-0f14f6c0","source":"documentation","title":"https://svelte.dev/docs/svelte/best-practices/llms.txt","url":"https://svelte.dev/docs/svelte/best-practices/llms.txt","text":"` and ``: ```svelte ``` Avoid using `onMount` or `$effect` for this. ## Snippets [Snippets](snippet) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](@render) tag, or passed to components as props. They must be declared within the template. ```svelte {#snippet greeting(name)} hello {name}! {/snippet} {@render greeting('world')} ``` > [!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":130}}261{"id":"doc-https_svelte_dev_docs_svelte_svelte_action_llms_-930f3c0e","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-action/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-action/llms.txt","text":"= (node, param = { }) => { // ... } ``` `Action` and `Action` both signal that the action accepts no parameters. You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has. See interface `ActionReturn` for more details. ```dts interface Action< Element = HTMLElement, Parameter = undefined, Attributes extends Record = Record< never, any > > {/*…*/} ``` ```dts ( ...args: undefined extends Parameter ? [node: Node, parameter?: Parameter] : [node: Node, ] ): void | ActionReturn; ``` ## ActionReturn Actions can return an object containing the two properties defined in this interface. Both are optional. - action can have a parameter. This method will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn` both mean that the action accepts no parameters. - that is called after the element is unmounted Additionally, you can specify which additional attributes and events the action enables on the applied element. This applies to TypeScript typings only and has no effect at runtime. Example usage: ```ts interface Attributes { newprop?: string; 'on:event': (e: CustomEvent) => void; } export function myAction(node: HTMLElement, ): ActionReturn { // ... return { update: (updatedParameter) => {...}, destroy: () => {...} }; } ``` ```dts interface ActionReturn< Parameter = undefined, Attributes extends Record = Record< never, any > > {/*…*/} ``` ```dts update?: (parameter: Parameter) => void; ``` ```dts destroy?: () => void; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":402}}262{"id":"doc-https_svelte_dev_docs_svelte_legacy_props_and_re-dbebc391","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-$$props-and-$$restProps/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-$$props-and-$$restProps/llms.txt","text":"` component might need to pass along all its props to its own `\n\n` element, except the `variant` prop: ```svelte\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":32}}263{"id":"doc-https_svelte_dev_docs_svelte_testing_llms_txt-14f5ee42","source":"documentation","title":"https://svelte.dev/docs/svelte/testing/llms.txt","url":"https://svelte.dev/docs/svelte/testing/llms.txt","text":"{ // Simulate a user filling out the form await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); await userEvent.click(canvas.getByRole('button')); // Run assertions await expect(args.onSubmit).toHaveBeenCalledTimes(1); await expect(canvas.getByText('You’re in!')).toBeInTheDocument(); }} /> ``` ## End-to-end tests with Playwright E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/). You can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE. If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests — mainly starting your application at a certain port. For example: ```js /// const config = { webServer: { command: 'npm run build && npm run preview', }, testDir: 'tests', testMatch: /(.+\\.)?(test|spec)\\.[jt]s/ }; export default config; ``` You can now start writing tests. These are totally unaware of Svelte as a framework, so you mainly interact with the DOM and write assertions. ```js // @errors: 2307 7031 /// /hello-world.spec.js import { expect, test } from '@playwright/test'; test('home page has expected h1', async ({ page }) => { await page.goto('/'); await expect(page.locator('h1')).toBeVisible(); }); ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.325Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":478}}264{"id":"doc-https_svelte_dev_docs_svelte_svelte_motion_llms_-497b231c","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-motion/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-motion/llms.txt","text":"[CALLOUT]\nAvailable since 5.8.0\n\n```dts class Spring {/*…*/} ``` ```dts constructor(value: T, options?: SpringOptions); ``` ```dts static of(fn: () => U, options?: SpringOptions): Spring; ``` Create a spring whose value is bound to the return value of `fn`. This must be called inside an effect root (for example, during component initialisation). ```svelte ``` ```dts set(value: T, options?: SpringUpdateOptions): Promise; ``` Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it. If `options.instant` is `true`, `spring.current` immediately matches `spring.target`. If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for the specified number of milliseconds. This is useful for things like 'fling' gestures. ```dts ``` ```dts ``` ```dts ``` ```dts ``` The end value of the spring. This property only exists on the `Spring` class, not the legacy `spring` store. ```dts get current(): T; ``` The current value of the spring. This property only exists on the `Spring` class, not the legacy `spring` store.\n\n## Tween Available since 5.8.0 A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to move towards it over time, taking account of the `delay`, `duration` and `easing` options. ```svelte ``` ```dts class Tween {/*…*/} ``` ```dts static of(fn: () => U, options?: TweenOptions | undefined): Tween; ``` Create a tween whose value is bound to the return value of `fn`. This must be called inside an effect root (for example, during component initialisation). ```svelte ``` ```dts constructor(value: T, options?: TweenOptions); ``` ```dts set(value: T, options?: TweenOptions | undefined): Promise; ``` Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it. If `options` are provided, they will override the tween's defaults. ```dts get current(): T; ``` ```dts set target(v: T); ``` ```dts get target(): T; ``` ## prefersReducedMotion Available since 5.7.0 A [media query](/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). ```svelte visible = !visible}> toggle {#if visible} flies in, unless the user prefers reduced motion {/if} ``` ```dts const ``` ## spring Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it \"bounces\" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience. ```dts function spring( value?: T | undefined, opts?: SpringOptions | undefined ): Spring; ``` ## tweened Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time. ```dts function tweened( value?: T | undefined, defaults?: TweenOptions | undefined ): Tweened; ``` ## Spring ```dts interface Spring extends Readable {/*…*/} ``` ```dts set(new_value: T, opts?: SpringUpdateOptions): Promise; ``` ```dts update: (fn: Updater, opts?: SpringUpdateOptions) => Promise; ``` - deprecated Only exists on the legacy `spring` store, not the `Spring` class ```dts subscribe(fn: (value: T) => void): Unsubscriber; ``` - deprecated Only exists on the legacy `spring` store, not the `Spring` class ```dts ``` ```dts ``` ```dts ``` ## SpringOptions ```dts interface SpringOptions {/*…*/} ``` ```dts stiffness?: number; ``` ```dts damping?: number; ``` ```dts precision?: number; ``` ## SpringUpdateOptions ```dts interface SpringUpdateOptions {/*…*/} ``` ```dts hard?: any; ``` - deprecated Only use this for the spring store; does nothing when set on the Spring class ```dts soft?: string | number | boolean; ``` - deprecated Only use this for the spring store; does nothing when set on the Spring class ```dts instant?: boolean; ``` Only use this for the Spring class; does nothing when set on the spring store ```dts preserveMomentum?: number; ``` Only use this for the Spring class; does nothing when set on the spring store ## TweenOptions ```dts interface TweenOptions {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number | ((from: T, ) => number); ``` ```dts easing?: (t: number) => number; ``` ```dts interpolate?: (a: T, ) => (t: number) => T; ``` ## Tweened ```dts interface Tweened extends Readable {/*…*/} ``` ```dts set(value: T, opts?: TweenOptions): Promise; ``` ```dts update(updater: Updater, opts?: TweenOptions): Promise; ``` ## Updater ```dts type Updater = (target_value: T, ) => T; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.326Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":8,"estimatedTokens":1220}}265{"id":"doc-https_svelte_dev_docs_svelte_svelte_attachments_-c60e405d","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-attachments/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-attachments/llms.txt","text":"[CALLOUT]\nAvailable since 5.29\n\n```dts function createAttachmentKey(): symbol; ```\n\n```dts function fromAction< E extends EventTarget, T extends unknown >( action: | Action | ((element: E, ) => void | ActionReturn), fn: () => T ): Attachment; ```\n\n```dts function fromAction( action: | Action | ((element: E) => void | ActionReturn) ): Attachment; ```\n\n```dts interface Attachment {/*…*/} ``` ```dts (element: T): void | (() => void); ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.326Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":12,"estimatedTokens":113}}266{"id":"doc-https_svelte_dev_docs_svelte_svelte_events_llms_-e4533a2c","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-events/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-events/llms.txt","text":"```dts function on( , , handler: ( , [Type] & { } ) => any, options?: AddEventListenerOptions | undefined ): () => void; ```\n\n```dts function on( , , handler: ( , [Type] & { } ) => any, options?: AddEventListenerOptions | undefined ): () => void; ```\n\n```dts function on< Element extends HTMLElement, Type extends keyof HTMLElementEventMap >( , , handler: ( , [Type] & { } ) => any, options?: AddEventListenerOptions | undefined ): () => void; ```\n\n```dts function on< Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap >( , , handler: ( , [Type] & { } ) => any, options?: AddEventListenerOptions | undefined ): () => void; ```\n\n```dts function on( , , , options?: AddEventListenerOptions | undefined ): () => void; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.326Z","totalSectionsIncluded":5,"totalCodeBlocksIncluded":0,"totalLines":11,"estimatedTokens":189}}267{"id":"doc-https_svelte_dev_docs_svelte_svelte_easing_llms_-92071155","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-easing/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-easing/llms.txt","text":"```dts function backIn(t: number): number; ```\n\n```dts function backInOut(t: number): number; ```\n\n```dts function backOut(t: number): number; ```\n\n```dts function bounceIn(t: number): number; ```\n\n```dts function bounceInOut(t: number): number; ```\n\n```dts function bounceOut(t: number): number; ```\n\n```dts function circIn(t: number): number; ```\n\n```dts function circInOut(t: number): number; ```\n\n```dts function circOut(t: number): number; ```\n\n```dts function cubicIn(t: number): number; ```\n\n```dts function cubicInOut(t: number): number; ```\n\n```dts function cubicOut(t: number): number; ```\n\n```dts function elasticIn(t: number): number; ```\n\n```dts function elasticInOut(t: number): number; ```\n\n```dts function elasticOut(t: number): number; ```\n\n```dts function expoIn(t: number): number; ```\n\n```dts function expoInOut(t: number): number; ```\n\n```dts function expoOut(t: number): number; ```\n\n```dts function linear(t: number): number; ```\n\n```dts function quadIn(t: number): number; ```\n\n```dts function quadInOut(t: number): number; ```\n\n```dts function quadOut(t: number): number; ```\n\n```dts function quartIn(t: number): number; ```\n\n```dts function quartInOut(t: number): number; ```\n\n```dts function quartOut(t: number): number; ```\n\n```dts function quintIn(t: number): number; ```\n\n```dts function quintInOut(t: number): number; ```\n\n```dts function quintOut(t: number): number; ```\n\n```dts function sineIn(t: number): number; ```\n\n```dts function sineInOut(t: number): number; ```\n\n```dts function sineOut(t: number): number; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.327Z","totalSectionsIncluded":31,"totalCodeBlocksIncluded":0,"totalLines":63,"estimatedTokens":391}}268{"id":"doc-https_svelte_dev_docs_svelte_v4_migration_guide_-1eb258f2","source":"documentation","title":"https://svelte.dev/docs/svelte/v4-migration-guide/llms.txt","url":"https://svelte.dev/docs/svelte/v4-migration-guide/llms.txt","text":"= (node, params) => { ... } // params is of type string+++ ``` - `onMount` now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136)) ```js // @noErrors // Example where this change reveals an actual bug onMount( --- // someCleanup() not called because function handed to onMount is async async () => { const something = await foo();--- +++ // someCleanup() is called because function handed to onMount is sync () => { foo().then(something => {...}); // ... return () => someCleanup(); } ); ``` ## Custom Elements with Svelte The creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option: ```svelte ------ ++++++ ``` This change was made to allow [more configurability](custom-elements#Component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457)) ## SvelteComponentTyped is deprecated `SvelteComponentTyped` is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with `SvelteComponent`. ```js ---import { SvelteComponentTyped } from 'svelte';--- +++import { SvelteComponent } from 'svelte';+++ ---export class Foo extends SvelteComponentTyped<{ }> {}--- +++export class Foo extends SvelteComponent<{ }> {}+++ ``` If you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent`. ```svelte random ``` The migration script will do both automatically for you. ([#8512](https://github.com/sveltejs/svelte/issues/8512)) ## Transitions are local by default Transitions are now local by default to prevent confusion around page navigations. \"local\" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`: ```svelte {#if show} ... {#if success} Success {/each} {/if} ``` To make transitions global, add the `|global` modifier — then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686)) ## Default slot bindings Default slot bindings are no longer exposed to named slots and vice versa: ```svelte count in default slot — is available: {count} count in bar slot — is not available: {count} ``` This makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not. ([#6049](https://github.com/sveltejs/svelte/issues/6049)) ## Preprocessors The order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style. ```js // @errors: 2304 import { preprocess } from 'svelte/compiler'; const { code } = await preprocess( source, [ { markup: () => { console.log('markup-1'); }, script: () => { console.log('script-1'); }, style: () => { console.log('style-1'); } }, { markup: () => { console.log('markup-2'); }, script: () => { console.log('script-2'); }, style: () => { console.log('style-2'); } } ], { filename: 'App.svelte' } ); // Svelte 3 logs: // markup-1 // markup-2 // script-1 // script-2 // style-1 // style-2 // Svelte 4 logs: // markup-1 // script-1 // style-1 // markup-2 // script-2 // style-2 ``` This could affect you for example if you are using `MDsveX` - in which case you should make sure it comes before any script or style preprocessor. ```js // @noErrors preprocess: [ --- vitePreprocess(), mdsvex(mdsvexConfig)--- +++ mdsvex(mdsvexConfig), vitePreprocess()+++ ] ``` Each preprocessor must also have a name. ([#8618](https://github.com/sveltejs/svelte/issues/8618)) ## New eslint package `eslint-plugin-svelte3` is deprecated. It may still work with Svelte 4 but we make no guarantees about that. We recommend switching to our new package [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte). See [this Github post](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) for an instruction how to migrate. Alternatively, you can create a new project using `npm create svelte@latest`, select the eslint (and possibly TypeScript) option and then copy over the related files into your existing project. ## Other breaking changes - the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628)) - the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629)) - the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775)) - people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750)) - `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947)) - type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5 - Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a `MutationObserver` on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763)) - if you enhanced the global typings through the `svelte.JSX` namespace before, you need to migrate this to use the `svelteHTML` namespace. Similarly if you used the `svelte.JSX` namespace to use type definitions from it, you need to migrate those to use the types from `svelte/elements` instead. You can find more information about what to do [here](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.327Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":1797}}269{"id":"doc-https_svelte_dev_docs_svelte_svelte_compiler_llm-fd105776","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-compiler/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-compiler/llms.txt","text":"```dts const ```\n\n```dts function compile( , ): CompileResult; ```\n\n```dts function compileModule( , ): CompileResult; ```\n\n```dts function migrate( , { filename, use_ts }?: | { filename?: string; use_ts?: boolean; } | undefined ): { }; ```\n\n```dts function parse( , options: { filename?: string; loose?: boolean; } ): AST.Root; ```\n\n```dts function parse( , options?: | { filename?: string; modern?: false; loose?: boolean; } | undefined ): Record; ```\n\n```dts function parseCss(source: string): AST.CSS.StyleSheetFile; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.328Z","totalSectionsIncluded":7,"totalCodeBlocksIncluded":0,"totalLines":15,"estimatedTokens":135}}270{"id":"doc-https_svelte_dev_docs_svelte_svelte_llms_txt-aaa1929c","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte/llms.txt","url":"https://svelte.dev/docs/svelte/svelte/llms.txt","text":"```dts class SvelteComponent< Props extends Record = Record, Events extends Record = any, Slots extends Record = any > {/*…*/} ``` ```dts static element?: typeof HTMLElement; ``` The custom element version of the component. Only present if compiled with the `customElement` compiler option ```dts [prop: string]: any; ``` ```dts constructor(options: ComponentConstructorOptions>); ``` - deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which is a stop-gap solution. Migrate towards using `mount` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info. ```dts $destroy(): void; ``` - deprecated This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info. ```dts $on>( , callback: (e: Events[K]) => void ): () => void; ``` - deprecated This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info. ```dts $set(props: Partial): void; ``` - deprecated This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n[CALLOUT]\nUse `Component` instead. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n```dts class SvelteComponentTyped< Props extends Record = Record, Events extends Record = any, Slots extends Record = any > extends SvelteComponent {} ```\n\n[CALLOUT]\nUse [`$effect`](/docs/svelte/$effect) instead\n\n```dts function afterUpdate(fn: () => void): void; ```\n\n[CALLOUT]\nUse [`$effect.pre`](/docs/svelte/$effect#$effect.pre) instead\n\n```dts function beforeUpdate(fn: () => void): void; ```\n\n[CALLOUT]\nAvailable since 5.40.0\n\n```dts function createContext(): [() => T, (context: T) => T]; ```\n\n[CALLOUT]\nUse callback props and/or the `$host()` rune instead — see [migration guide](/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n\n```dts function createEventDispatcher< EventMap extends Record = any >(): EventDispatcher; ```\n\n```dts function createRawSnippet( fn: (...params: Getters) => { render: () => string; setup?: (element: Element) => void | (() => void); } ): Snippet; ```\n\n```dts function flushSync(fn?: (() => T) | undefined): T; ```\n\n[CALLOUT]\nAvailable since 5.42\n\n```dts function fork(fn: () => void): Fork; ```\n\n```dts function getAbortSignal(): AbortSignal; ```\n\n```dts function getAllContexts< T extends Map = Map >(): T; ```\n\n```dts function getContext(key: any): T; ```\n\n```dts function hasContext(key: any): boolean; ```\n\n```dts function hydratable(key: string, fn: () => T): T; ```\n\n```dts function hydrate< Props extends Record, Exports extends Record >( component: | ComponentType> | Component, options: {} extends Props ? { | Element | ShadowRoot; props?: Props; events?: Record any>; context?: Map; intro?: boolean; recover?: boolean; transformError?: (error: unknown) => unknown; } : { | Element | ShadowRoot; events?: Record any>; context?: Map; intro?: boolean; recover?: boolean; transformError?: (error: unknown) => unknown; } ): Exports; ```\n\n```dts function mount< Props extends Record, Exports extends Record >( component: | ComponentType> | Component, ): Exports; ```\n\n```dts function onDestroy(fn: () => any): void; ```\n\n```dts function onMount( fn: () => | NotFunction | Promise> | (() => any) ): void; ```\n\n```dts function setContext(key: any, ): T; ```\n\n[CALLOUT]\nAvailable since 5.36\n\n```dts function settled(): Promise; ```\n\n```dts function tick(): Promise; ```\n\n```dts function unmount( , options?: | { outro?: boolean; } | undefined ): Promise; ```\n\n```dts function untrack(fn: () => T): T; ```\n\n``` ```dts interface Component< Props extends Record = {}, Exports extends Record = {}, Bindings extends keyof Props | '' = string > {/*…*/} ``` ```dts ( , , ): { /** * @deprecated This method only exists when using one of the legacy compatibility helpers, which * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) * for more info. */ $on?(type: string, callback: (e: any) => void): () => void; /** * @deprecated This method only exists when using one of the legacy compatibility helpers, which * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) * for more info. */ $set?(props: Partial): void; } & Exports; ``` - `internal` An internal object used by Svelte. Do not use or modify. - `props` The props passed to the component. ```dts element?: typeof HTMLElement; ``` The custom element version of the component. Only present if compiled with the `customElement` compiler option ## ComponentConstructorOptions In Svelte 4, components are classes. In Svelte 5, they are functions. Use `mount` instead to instantiate components. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info. ```dts interface ComponentConstructorOptions< Props extends Record = Record > {/*…*/} ``` ```dts | Document | ShadowRoot; ``` ```dts anchor?: Element; ``` ```dts props?: Props; ``` ```dts context?: Map; ``` ```dts hydrate?: boolean; ``` ```dts intro?: boolean; ``` ```dts recover?: boolean; ``` ```dts sync?: boolean; ``` ```dts idPrefix?: string; ``` ```dts $$inline?: boolean; ``` ```dts transformError?: (error: unknown) => unknown; ``` ## ComponentEvents The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead. ```dts type ComponentEvents = Comp extends SvelteComponent ? ``` ## ComponentInternals Internal implementation details that vary between environments ```dts type ComponentInternals = Branded<{}, 'ComponentInternals'>; ``` ## ComponentProps Convenience type to get the props the given component expects. a variable contains the props expected by `MyComponent`: ```ts import type { ComponentProps } from 'svelte'; import MyComponent from './MyComponent.svelte'; // Errors if these aren't the correct props expected by MyComponent. const = { foo: 'bar' }; ``` > [!NOTE] In Svelte 4, you would do `ComponentProps` because `MyComponent` was a class. generic function that accepts some component and infers the type of its props: ```ts import type { Component, ComponentProps } from 'svelte'; import MyComponent from './MyComponent.svelte'; function withProps>( , ) {}; // Errors if the second argument is not the correct props expected by the component in the first argument. withProps(MyComponent, { foo: 'bar' }); ``` ```dts type ComponentProps< Comp extends SvelteComponent | Component > = Comp extends SvelteComponent ? extends Component ? ``` ## ComponentType This type is obsolete when working with the new `Component` type. ```dts type ComponentType< Comp extends SvelteComponent = SvelteComponent > = (new ( < Comp extends SvelteComponent ? > ) => Comp) & { /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */ element?: typeof HTMLElement; }; ``` ## EventDispatcher ```dts interface EventDispatcher< EventMap extends Record > {/*…*/} ``` ```dts ( ...args: null extends EventMap[Type] ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions] : undefined extends EventMap[Type] ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions] : [type: Type, [Type], options?: DispatchOptions] ): boolean; ``` ## Fork Available since 5.42 Represents work that is happening off-screen, such as data being preloaded in anticipation of the user navigating ```dts interface Fork {/*…*/} ``` ```dts commit(): Promise; ``` Commit the fork. The promise will resolve once the state change has been applied ```dts discard(): void; ``` Discard the fork ## MountOptions Defines the options accepted by the `mount()` function. ```dts type MountOptions< Props extends Record = Record > = { /** * Target element where the component will be mounted. */ | Element | ShadowRoot; /** * Optional node inside `target`. When specified, it is used to render the component immediately before it. */ anchor?: Node; /** * Allows the specification of events. * @deprecated Use callback props instead. */ events?: Record any>; /** * Can be accessed via `getContext()` at the component level. */ context?: Map; /** * Whether or not to play transitions on initial render. * @default true */ intro?: boolean; /** * A function that transforms errors caught by error boundaries before they are passed to the `failed` snippet. * Defaults to the identity function. */ transformError?: ( ) => unknown | Promise; } & ({} extends Props ? { /** * Component properties. */ props?: Props; } : { /** * Component properties. */ }); ``` ## Snippet The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type: ```ts let { banner }: { <[{ }]> } = $props(); ``` You can only call a snippet through the `{@render ...}` tag. See the [snippet documentation](/docs/svelte/snippet) for more info. ```dts interface Snippet {/*…*/} ``` ```dts ( , // this conditional allows tuples but not arrays. Arrays would indicate a // rest parameter type, which is not supported. If rest parameters are added // in the future, the condition can be removed. ...args: number extends Parameters['length'] ? ): { '{@render ...} must be called with a Snippet': \"import type { Snippet } from 'svelte'\"; } & typeof SnippetReturn; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":31,"totalCodeBlocksIncluded":0,"totalLines":70,"estimatedTokens":2462}}271{"id":"doc-https_svelte_dev_docs_svelte_legacy_on_llms_txt-27cc2c5a","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-on/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-on/llms.txt","text":"(count += 1)}> count: {count}\n\nThe component itself will emit the click event\n\nn -= 1} ={() => n += 1} /> n: {n} ``` Component events do not bubble — a parent component can only listen for events on its immediate children. Other than `once`, modifiers are not valid on component event handlers. > [!NOTE] > If you're planning an eventual migration to Svelte 5, use callback props instead. This will make upgrading easier as `createEventDispatcher` is deprecated: > > ```svelte > > > > decrement > increment > ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":132}}272{"id":"doc-https_svelte_dev_docs_svelte_legacy_slots_llms_t-572093bb","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-slots/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-slots/llms.txt","text":"` element: ```svelte This is some slotted content ``` ```svelte ``` > [!NOTE] If you want to render a regular `` element, you can use ``. ## Named slots A component can have _named_ slots in addition to the default slot. On the parent side, add a `slot=\"...\"` attribute to an element, component or [``](legacy-svelte-fragment) directly inside the component tags. ```svelte {#if open} This is some slotted content ++++++ open = false}> close ++++++ {/if} ``` On the child side, add a corresponding `` element: ```svelte ++++++ ``` ## Fallback content If no slotted content is provided, a component can define fallback content by putting it inside the `` element: ```svelte This will be rendered if no slotted content is provided ``` ## Passing data to slotted content Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. ```svelte {#each items as data} {/each} ``` ```svelte {processed.text} ``` The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `` is equivalent to ``. Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute. ```svelte {#each items as item} {/each} ``` ```svelte {item.text} Copyright (c) 2019 Svelte Industries ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":338}}273{"id":"doc-https_svelte_dev_docs_svelte_legacy_svelte_compo-c0b46c9e","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-svelte-component/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-svelte-component/llms.txt","text":"` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example. In legacy mode, it won't — we must use ``, which destroys and recreates the component instance when the value of its `this` expression changes: ```svelte ``` If `this` is falsy, no component is rendered.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":100}}274{"id":"doc-https_svelte_dev_docs_svelte_svelte_server_llms_-670abe74","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-server/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-server/llms.txt","text":"| Component, Props extends ComponentProps = ComponentProps >( ...args: {} extends Props ? [ extends SvelteComponent ? , options?: { props?: Omit; context?: Map; idPrefix?: string; csp?: Csp; transformError?: ( ) => unknown | Promise; } ] : [ extends SvelteComponent ? , options: { context?: Map; idPrefix?: string; csp?: Csp; transformError?: ( ) => unknown | Promise; } ] ): RenderOutput; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":102}}275{"id":"doc-large_current_large_screen_small_screen-c7d5dd1a","source":"documentation","title":"{large.current ? 'large screen' : 'small screen'}","url":"https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt","text":"[CALLOUT]\nAvailable since 5.7.0\n\n# {large.current ? 'large screen' : 'small screen'}\n\n```dts class MediaQuery extends ReactiveValue {/*…*/} ``` ```dts constructor(query: string, fallback?: boolean | undefined); ``` - `query` A media query string - `fallback` Fallback value for the server\n\nThe time is {formatter.format(date)}\n\n```dts class SvelteDate extends Date {/*…*/} ``` ```dts constructor(...params: any[]); ```\n\n{#each Array(9), i} { board.set(i, player); player = player === 'x' ? 'o' : 'x'; }} >{board.get(i)} {/each}\n\n{player} is next\n\n```dts class SvelteMap extends Map {/*…*/} ``` ```dts constructor(value?: Iterable | null | undefined); ``` ```dts set(key: K, ): this; ```\n\nsee no evil\n\nhear no evil\n\nspeak no evil\n\n```dts class SvelteSet extends Set {/*…*/} ``` ```dts constructor(value?: Iterable | null | undefined); ``` ```dts add(value: T): this; ```\n\n```dts class SvelteURL extends URL {/*…*/} ``` ```dts get searchParams(): SvelteURLSearchParams; ```\n\n```dts class SvelteURLSearchParams extends URLSearchParams {/*…*/} ``` ```dts [REPLACE](params: URLSearchParams): void; ```\n\n[CALLOUT]\nAvailable since 5.7.0\n\n```dts function createSubscriber( start: (update: () => void) => (() => void) | void ): () => void; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.329Z","totalSectionsIncluded":16,"totalCodeBlocksIncluded":0,"totalLines":35,"estimatedTokens":312}}276{"id":"doc-https_svelte_dev_docs_svelte_legacy_export_let_l-be9234b0","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-export-let/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-export-let/llms.txt","text":"greeter.greet('world')}> greet ``` ## Renaming props The `export` keyword can appear separately from the declaration. This is useful for renaming props, for example in the case of a reserved word: ```svelte ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.330Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":56}}277{"id":"doc-https_svelte_dev_docs_svelte_svelte_transition_l-1f3073fd","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-transition/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-transition/llms.txt","text":"```dts function blur( , { delay, duration, easing, amount, opacity }?: BlurParams | undefined ): TransitionConfig; ```\n\n```dts function crossfade({ fallback, ...defaults }: CrossfadeParams & { fallback?: ( , , ) => TransitionConfig; }): [ ( , & { } ) => () => TransitionConfig, ( , & { } ) => () => TransitionConfig ]; ```\n\n` and ``. ```dts function draw( & { getTotalLength(): number; }, { delay, speed, duration, easing }?: DrawParams | undefined ): TransitionConfig; ``` ## fade Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions. ```dts function fade( , { delay, duration, easing }?: FadeParams | undefined ): TransitionConfig; ``` ## fly Animates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values. ```dts function fly( , { delay, duration, easing, x, y, opacity }?: FlyParams | undefined ): TransitionConfig; ``` ## scale Animates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values. ```dts function scale( , { delay, duration, easing, start, opacity }?: ScaleParams | undefined ): TransitionConfig; ``` ## slide Slides an element in and out. ```dts function slide( , { delay, duration, easing, axis }?: SlideParams | undefined ): TransitionConfig; ``` ## BlurParams ```dts interface BlurParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ```dts amount?: number | string; ``` ```dts opacity?: number; ``` ## CrossfadeParams ```dts interface CrossfadeParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number | ((len: number) => number); ``` ```dts easing?: EasingFunction; ``` ## DrawParams ```dts interface DrawParams {/*…*/} ``` ```dts delay?: number; ``` ```dts speed?: number; ``` ```dts duration?: number | ((len: number) => number); ``` ```dts easing?: EasingFunction; ``` ## EasingFunction ```dts type EasingFunction = (t: number) => number; ``` ## FadeParams ```dts interface FadeParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ## FlyParams ```dts interface FlyParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ```dts x?: number | string; ``` ```dts y?: number | string; ``` ```dts opacity?: number; ``` ## ScaleParams ```dts interface ScaleParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ```dts start?: number; ``` ```dts opacity?: number; ``` ## SlideParams ```dts interface SlideParams {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ```dts axis?: 'x' | 'y'; ``` ## TransitionConfig ```dts interface TransitionConfig {/*…*/} ``` ```dts delay?: number; ``` ```dts duration?: number; ``` ```dts easing?: EasingFunction; ``` ```dts css?: (t: number, ) => string; ``` ```dts tick?: (t: number, ) => void; ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.330Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":830}}278{"id":"doc-https_svelte_dev_docs_svelte_legacy_svelte_self_-aeaf90e6","source":"documentation","title":"https://svelte.dev/docs/svelte/legacy-svelte-self/llms.txt","url":"https://svelte.dev/docs/svelte/legacy-svelte-self/llms.txt","text":"` element allows a component to include itself, recursively. It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop. ```svelte {#if count > 0} counting down... {count} {:else} lift-off! {/if} ``` > [!NOTE] > This concept is obsolete, as components can import themselves: > ```svelte > > > > {#if count > 0} > counting down... {count} > > {:else} > lift-off! > {/if} > ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.330Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":120}}279{"id":"doc-https_svelte_dev_docs_svelte_compiler_errors_llm-7173fb98","source":"documentation","title":"https://svelte.dev/docs/svelte/compiler-errors/llms.txt","url":"https://svelte.dev/docs/svelte/compiler-errors/llms.txt","text":"`, `` or `` ``` ### const_tag_invalid_reference ``` The `{@const %name% = ...}` declaration is not available in this snippet ``` The following is an error: ```svelte {@const foo = 'bar'} {#snippet failed()} {foo} {/snippet} ``` Here, `foo` is not available inside `failed`. The top level code inside `` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this: ```svelte {#snippet children()} {@const foo = 'bar'} {/snippet} {#snippet failed()} {foo} {/snippet} ``` The same applies to components: ```svelte {@const foo = 'bar'} {#snippet someProp()} {foo} {/snippet} ``` ### constant_assignment ``` Cannot assign to %thing% ``` ### constant_binding ``` Cannot bind to %thing% ``` ### css_empty_declaration ``` Declaration cannot be empty ``` ### css_expected_identifier ``` Expected a valid CSS identifier ``` ### css_global_block_invalid_combinator ``` A `:global` selector cannot follow a `%name%` combinator ``` ### css_global_block_invalid_declaration ``` A top-level `:global {...}` block can only contain rules, not declarations ``` ### css_global_block_invalid_list ``` A `:global` selector cannot be part of a selector list with entries that don't contain `:global` ``` The following CSS is invalid: ```css :global, x { y { } } ``` This is mixing a `:global` block, which means \"everything in here is unscoped\", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors: ```css :global { y { } } x y { } ``` ### css_global_block_invalid_modifier ``` A `:global` selector cannot modify an existing selector ``` ### css_global_block_invalid_modifier_start ``` A `:global` selector can only be modified if it is a descendant of other selectors ``` ### css_global_block_invalid_placement ``` A `:global` selector cannot be inside a pseudoclass ``` ### css_global_invalid_placement ``` `:global(...)` can be at the start or end of a selector sequence, but not in the middle ``` ### css_global_invalid_selector ``` `:global(...)` must contain exactly one selector ``` ### css_global_invalid_selector_list ``` `:global(...)` must not contain type or universal selectors when used in a compound selector ``` ### css_nesting_selector_invalid_placement ``` Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)` ``` ### css_selector_invalid ``` Invalid selector ``` ### css_type_selector_invalid_placement ``` `:global(...)` must not be followed by a type selector ``` ### debug_tag_invalid_arguments ``` {@debug ...} arguments must be identifiers, not arbitrary expressions ``` ### declaration_duplicate ``` `%name%` has already been declared ``` ### declaration_duplicate_module_import ``` Cannot declare a variable with the same name as an import from ` {#each array as entry} entry = 4}>change {/each} ``` This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead: ```svelte {#each array as entry, i} array[i] = 4}>change {/each} ``` ### each_key_without_as ``` An `{#each ...}` block without an `as` clause cannot have a key ``` ### effect_invalid_placement ``` `$effect()` can only be used as an expression statement ``` ### element_invalid_closing_tag ``` `` attempted to close an element that was not open ``` ### element_invalid_closing_tag_autoclosed ``` `` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`) ``` ### element_unclosed ``` `<%name%>` was left open ``` ### event_handler_invalid_component_modifier ``` Event modifiers other than 'once' can only be used on DOM elements ``` ### event_handler_invalid_modifier ``` Valid event modifiers are %list% ``` ### event_handler_invalid_modifier_combination ``` The '%modifier1%' and '%modifier2%' modifiers cannot be used together ``` ### expected_attribute_value ``` Expected attribute value ``` ### expected_block_type ``` Expected 'if', 'each', 'await', 'key' or 'snippet' ``` ### expected_identifier ``` Expected an identifier ``` ### expected_pattern ``` Expected identifier or destructure pattern ``` ### expected_tag ``` Expected 'html', 'render', 'attach', 'const', or 'debug' ``` ### expected_token ``` Expected token %token% ``` ### expected_whitespace ``` Expected whitespace ``` ### experimental_async ``` Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true` ``` ### export_undefined ``` `%name%` is not defined ``` ### global_reference_invalid ``` `%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%` ``` ### host_invalid_placement ``` `$host()` can only be used inside custom element component instances ``` ### illegal_await_expression ``` `use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions ``` ### illegal_element_attribute ``` `<%name%>` does not support non-event attributes or spread attributes ``` ### import_svelte_internal_forbidden ``` Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case ``` ### inspect_trace_generator ``` `$inspect.trace(...)` cannot be used inside a generator function ``` ### inspect_trace_invalid_placement ``` `$inspect.trace(...)` must be the first statement of a function body ``` ### invalid_arguments_usage ``` The arguments keyword cannot be used within the template or at the top level of a component ``` ### js_parse_error ``` %message% ``` ### legacy_await_invalid ``` Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode ``` ### legacy_export_invalid ``` Cannot use `export let` in runes mode — use `$props()` instead ``` ### legacy_props_invalid ``` Cannot use `$$props` in runes mode ``` ### legacy_reactive_statement_invalid ``` `$:` is not allowed in runes mode, use `$derived` or `$effect` instead ``` ### legacy_rest_props_invalid ``` Cannot use `$$restProps` in runes mode ``` ### let_directive_invalid_placement ``` `let:` directive at invalid position ``` ### mixed_event_handler_syntaxes ``` Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax ``` ### module_illegal_default_export ``` A component cannot have a default export ``` ### node_invalid_placement ``` %message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components. ``` HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some `hello world` will result in `hello world` (the `` autoclosed the `` because `` cannot contain block-level elements) - `option a` will result in `option a` (the `` is removed) - `cell` will result in `cell` (a `` is auto-inserted) ### options_invalid_value ``` Invalid compiler option: %details% ``` ### options_removed ``` Invalid compiler option: %details% ``` ### options_unrecognised ``` Unrecognised compiler option %keypath% ``` ### props_duplicate ``` Cannot use `%rune%()` more than once ``` ### props_id_invalid_placement ``` `$props.id()` can only be used at the top level of components as a variable declaration initializer ``` ### props_illegal_name ``` Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals) ``` ### props_invalid_identifier ``` `$props()` can only be used with an object destructuring pattern ``` ### props_invalid_pattern ``` `$props()` assignment must not contain nested properties or computed keys ``` ### props_invalid_placement ``` `$props()` can only be used at the top level of components as a variable declaration initializer ``` ### reactive_declaration_cycle ``` Cyclical dependency detected: %cycle% ``` ### render_tag_invalid_call_expression ``` Calling a snippet function using apply, bind or call is not allowed ``` ### render_tag_invalid_expression ``` `{@render ...}` tags can only contain call expressions ``` ### render_tag_invalid_spread_argument ``` cannot use spread arguments in `{@render ...}` tags ``` ### rune_invalid_arguments ``` `%rune%` cannot be called with arguments ``` ### rune_invalid_arguments_length ``` `%rune%` must be called with %args% ``` ### rune_invalid_computed_property ``` Cannot access a computed property of a rune ``` ### rune_invalid_name ``` `%name%` is not a valid rune ``` ### rune_invalid_spread ``` `%rune%` cannot be called with a spread argument ``` ### rune_invalid_usage ``` Cannot use `%rune%` rune in non-runes mode ``` ### rune_missing_parentheses ``` Cannot use rune without parentheses ``` ### rune_removed ``` The `%name%` rune has been removed ``` ### rune_renamed ``` `%name%` is now `%replacement%` ``` ### runes_mode_invalid_import ``` %name% cannot be used in runes mode ``` ### script_duplicate ``` A component can have a single top-level ` {#snippet greeting(name)} {message} {name}! {/snippet} ``` ...because `greeting` references `message`, which is defined in the second `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.331Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":2414}}280{"id":"doc-https_svelte_dev_docs_svelte_runtime_errors_llms-c2fe36df","source":"documentation","title":"https://svelte.dev/docs/svelte/runtime-errors/llms.txt","url":"https://svelte.dev/docs/svelte/runtime-errors/llms.txt","text":"{count} is even: {even}\n\n{count} is odd: {odd}\n\n{count} is even: {even}\n\n` `reset` function cannot be called while an error is still being handled ``` If a [``](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved. If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick): ```svelte { fixTheError(); +++await tick();+++ reset(); }}> ``` ## Server errors ### async_local_storage_unavailable ``` The node API `AsyncLocalStorage` is not available, but is required to use async server rendering. ``` Some platforms require configuration flags to enable this API. Consult your platform's documentation. ### await_invalid ``` Encountered asynchronous work while rendering synchronously. ``` You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [``](svelte-boundary) with a `pending` snippet. ### dynamic_element_invalid_tag ``` `` is not a valid element name — the element will not be rendered ``` The value passed to the `this` prop of `` must be a valid HTML element, SVG element, MathML element, or custom element name. A value containing invalid characters (such as whitespace or special characters) was provided, which could be a security risk. Ensure only valid tag names are passed. ### html_deprecated ``` The `html` property of server render results has been deprecated. Use `body` instead. ``` ### hydratable_clobbering ``` Attempted to set `hydratable` with key `%key%` twice with different values. %stack% ``` This error occurs when using `hydratable` multiple times with the same key. To avoid this, you Ensure all invocations with the same key result in the same value - Update the keys to make both instances unique ```svelte ``` ### hydratable_serialization_failed ``` Failed to serialize `hydratable` data for key `%key%`. `hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises. Cause: %stack% ``` ### invalid_csp ``` `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously. ``` ### invalid_id_prefix ``` The `idPrefix` option cannot include `--`. ``` ### lifecycle_function_unavailable ``` `%name%(...)` is not available on the server ``` Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render. ### server_context_required ``` Could not resolve `render` context. ``` Certain functions such as `hydratable` cannot be invoked outside of a `render(...)` call, such as at the top level of a module. ## Shared errors ### experimental_async_required ``` Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true` ``` ### invalid_default_snippet ``` Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead ``` This error would be thrown in a setup like this: ```svelte {entry} ``` ```svelte {#each items as item} {@render children(item)} {/each} ``` Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error. ### invalid_snippet_arguments ``` A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}` ``` ### invariant_violation ``` An invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: \"%message%\" ``` ### lifecycle_outside_component ``` `%name%(...)` can only be used during component initialisation ``` Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component. ```svelte click me ``` ### missing_context ``` Context was not set in a parent component ``` The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component. ### snippet_without_render_tag ``` Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`. ``` A component throwing this error will look something like this (`children` is not being rendered): ```svelte {children} ``` ...or like this (a parent component is passing a snippet where a non-snippet value is expected): ```svelte {#snippet label()} Hi! {/snippet} ``` ```svelte {label} ``` ### store_invalid_shape ``` `%name%` is not a store with a `subscribe` method ``` ### svelte_element_invalid_this_value ``` The `this` prop on `` must be a string, if defined ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.331Z","totalSectionsIncluded":4,"totalCodeBlocksIncluded":0,"totalLines":9,"estimatedTokens":1355}}281{"id":"doc-https_svelte_dev_docs_svelte_runtime_warnings_ll-5821c008","source":"documentation","title":"https://svelte.dev/docs/svelte/runtime-warnings/llms.txt","url":"https://svelte.dev/docs/svelte/runtime-warnings/llms.txt","text":"} a * @param {number} b */ async function sum(a, b) { return await a + b; } let total = $derived(await sum(a, b)); ``` ### await_waterfall ``` An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app ``` In a case like this... ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let a = $derived(await one()); let b = $derived(await two()); ``` ...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary. (Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.) You can solve this by creating the promises first and _then_ awaiting them: ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let aPromise = $derived(one()); let bPromise = $derived(two()); let a = $derived(await aPromise); let b = $derived(await bPromise); ``` ### binding_property_non_reactive ``` `%binding%` is binding to a non-reactive property ``` ``` `%binding%` (%location%) is binding to a non-reactive property ``` ### console_log_state ``` Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead ``` When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing. The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. ### derived_inert ``` Reading a derived belonging to a now-destroyed effect may result in stale values ``` A `$derived` value created inside an effect will stop updating when the effect is destroyed. You should create the `$derived` outside the effect, or inside an `$effect.root`. ### event_handler_invalid ``` %handler% should be a function. Did you mean to %suggestion%? ``` ### hydratable_missing_but_expected ``` Expected to find a hydratable with key `%key%` during hydration, but did not. ``` This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes. ```svelte ``` ### hydration_attribute_changed ``` The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value ``` Certain attributes like `src` on an `` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.332Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":831}}282{"id":"doc-https_svelte_dev_docs_svelte_svelte_store_llms_t-11e97f9e","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-store/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-store/llms.txt","text":"```dts function derived( , fn: ( , set: (value: T) => void, update: (fn: Updater) => void ) => Unsubscriber | void, initial_value?: T | undefined ): Readable; ```\n\n```dts function derived( , fn: (values: StoresValues) => T, initial_value?: T | undefined ): Readable; ``` ## fromStore ```dts function fromStore(store: Writable): { }; ``` ```dts function fromStore(store: Readable): { readonly }; ``` ## get Get the current value from a store by subscribing and immediately unsubscribing. ```dts function get(store: Readable): T; ``` ## readable Creates a `Readable` store that allows reading by subscription. ```dts function readable( value?: T | undefined, start?: StartStopNotifier | undefined ): Readable; ``` ## readonly Takes a store and returns a new one derived from the old one that is readable. ```dts function readonly(store: Readable): Readable; ``` ## toStore ```dts function toStore( get: () => V, set: (v: V) => void ): Writable; ``` ```dts function toStore(get: () => V): Readable; ``` ## writable Create a `Writable` store that allows both updating and reading by subscription. ```dts function writable( value?: T | undefined, start?: StartStopNotifier | undefined ): Writable; ``` ## Readable Readable interface for subscribing. ```dts interface Readable {/*…*/} ``` ```dts subscribe(this: void, , invalidate?: () => void): Unsubscriber; ``` - `run` subscription callback - `invalidate` cleanup callback Subscribe on value changes. ## StartStopNotifier Start and stop notification callbacks. This function is called when the first subscriber subscribes. ```dts type StartStopNotifier = ( set: (value: T) => void, update: (fn: Updater) => void ) => void | (() => void); ``` ## Subscriber Callback to inform of a value updates. ```dts type Subscriber = (value: T) => void; ``` ## Unsubscriber Unsubscribes from value updates. ```dts type Unsubscriber = () => void; ``` ## Updater Callback to update a value. ```dts type Updater = (value: T) => T; ``` ## Writable Writable interface for both updating and subscribing. ```dts interface Writable extends Readable {/*…*/} ``` ```dts set(this: void, ): void; ``` - `value` to set Set value and inform subscribers. ```dts update(this: void, ): void; ``` - `updater` callback Update value using callback and inform subscribers.\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.332Z","totalSectionsIncluded":2,"totalCodeBlocksIncluded":0,"totalLines":5,"estimatedTokens":575}}283{"id":"doc-https_svelte_dev_docs_svelte_compiler_warnings_l-84797824","source":"documentation","title":"https://svelte.dev/docs/svelte/compiler-warnings/llms.txt","url":"https://svelte.dev/docs/svelte/compiler-warnings/llms.txt","text":"` or `` might be more appropriate ``` Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler. Users should first consider whether an interactive element might be more appropriate such as a `\n\n` element for actions or `` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `\n\n` and `Enter` will trigger an `` element. If a non-interactive element is required then `onclick` should be accompanied by an `onkeyup` or `onkeydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `onkeypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated. ```svelte {}}> ``` Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. ### a11y_consider_explicit_label ``` Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute ``` ### a11y_distracting_elements ``` Avoid `<%name%>` elements ``` Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided. The following elements are visually distracting: `` and ``. ```svelte ``` ### a11y_figcaption_index ``` `` must be first or last child of `` ``` ### a11y_figcaption_parent ``` `` must be an immediate child of `` ``` Enforce that certain DOM elements have the correct structure. ```svelte Image caption ``` ### a11y_hidden ``` `<%name%>` element should not be hidden ``` Certain DOM elements are useful for screen reader navigation and should not be hidden. ```svelte invisible header ``` ### a11y_img_redundant_alt ``` Screenreaders already announce `` elements as an image ``` Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_. ```svelte ``` ### a11y_incorrect_aria_attribute_type ``` The value of '%attribute%' must be a %type% ``` Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden` should only receive a boolean. ```svelte ``` ### a11y_incorrect_aria_attribute_type_boolean ``` The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty ``` ### a11y_incorrect_aria_attribute_type_id ``` The value of '%attribute%' must be a string that represents a DOM element ID ``` ### a11y_incorrect_aria_attribute_type_idlist ``` The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs ``` ### a11y_incorrect_aria_attribute_type_integer ``` The value of '%attribute%' must be an integer ``` ### a11y_incorrect_aria_attribute_type_token ``` The value of '%attribute%' must be exactly one of %values% ``` ### a11y_incorrect_aria_attribute_type_tokenlist ``` The value of '%attribute%' must be a space-separated list of one or more of %values% ``` ### a11y_incorrect_aria_attribute_type_tristate ``` The value of '%attribute%' must be exactly one of true, false, or mixed ``` ### a11y_interactive_supports_focus ``` Elements with the '%role%' interactive role must have a tabindex value ``` Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable. ```svelte {}} /> ``` ### a11y_invalid_attribute ``` '%href_value%' is not a valid %href_attribute% attribute ``` Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`. ```svelte invalid ``` ### a11y_label_has_associated_control ``` A form label must be associated with a control ``` Enforce that a label tag has a text label and an associated control. There are two supported ways to associate a label with a Wrapping a control in a label tag. - Adding `for` to a label and assigning it the ID of an input on the page. ```svelte B C A ``` ### a11y_media_has_caption ``` `` elements must have a `` ``` Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load). The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute. ```svelte ``` ### a11y_misplaced_role ``` `<%name%>` should not have role attribute ``` Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props. ```svelte ``` ### a11y_misplaced_scope ``` The scope attribute should only be used with `` elements ``` The scope attribute should only be used on `` elements. ```svelte ``` ### a11y_missing_attribute ``` `<%name%>` element should have %article% %sequence% attribute ``` Enforce that attributes required for accessibility are present on an element. This includes the following `` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697)) - `` should have alt, aria-label, or aria-labelledby - `` should have lang - `\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.333Z","totalSectionsIncluded":3,"totalCodeBlocksIncluded":0,"totalLines":7,"estimatedTokens":1511}}284{"id":"doc-https_svelte_dev_docs_svelte_svelte_reactivity_w-7ff36dfb","source":"documentation","title":"https://svelte.dev/docs/svelte/svelte-reactivity-window/llms.txt","url":"https://svelte.dev/docs/svelte/svelte-reactivity-window/llms.txt","text":"`](svelte-window) bindings or manually creating your own event listeners. ```svelte {innerWidth.current}x{innerHeight.current} ``` ```js // @noErrors import { devicePixelRatio, innerHeight, innerWidth, online, outerHeight, outerWidth, screenLeft, screenTop, scrollX, scrollY } from 'svelte/reactivity/window'; ``` ## devicePixelRatio Available since 5.11.0 `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, on Firefox and Safari it won't. ```dts const devicePixelRatio: { get current(): number | undefined; }; ``` ## innerHeight Available since 5.11.0 `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`. ```dts const ``` ## innerWidth Available since 5.11.0 `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`. ```dts const ``` ## online Available since 5.11.0 `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`. ```dts const ``` ## outerHeight Available since 5.11.0 `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`. ```dts const ``` ## outerWidth Available since 5.11.0 `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`. ```dts const ``` ## screenLeft Available since 5.11.0 `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`. ```dts const ``` ## screenTop Available since 5.11.0 `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`. ```dts const ``` ## scrollX Available since 5.11.0 `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`. ```dts const ``` ## scrollY Available since 5.11.0 `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`. ```dts const ```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:46.333Z","totalSectionsIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":3,"estimatedTokens":534}}285