declare module 'svelte' { /** * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions. * Use `mount` instead to instantiate components. * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) * for more info. */ export interface ComponentConstructorOptions< Props extends Record = Record > { target: Element | Document | ShadowRoot; anchor?: Element; props?: Props; context?: Map; hydrate?: boolean; intro?: boolean; recover?: boolean; sync?: boolean; $$inline?: boolean; } /** * Utility type for ensuring backwards compatibility on a type level that if there's a default slot, add 'children' to the props */ type Properties = Props & (Slots extends { default: any } ? // This is unfortunate because it means "accepts no props" turns into "accepts any prop" // but the alternative is non-fixable type errors because of the way TypeScript index // signatures work (they will always take precedence and make an impossible-to-satisfy children type). Props extends Record ? any : { children?: any } : {}); /** * This was the base class for Svelte components in Svelte 4. Svelte 5+ components * are completely different under the hood. For typing, use `Component` instead. * To instantiate components, use `mount` instead`. * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info. */ export class SvelteComponent< Props extends Record = Record, Events extends Record = any, Slots extends Record = any > { /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */ static element?: typeof HTMLElement; [prop: string]: any; /** * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which * is a stop-gap solution. Migrate towards using `mount` instead. See * https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more info. */ constructor(options: ComponentConstructorOptions>); /** * For type checking capabilities only. * Does not exist at runtime. * ### DO NOT USE! */ $$prop_def: Props; // Without Properties: unnecessary, causes type bugs /** * For type checking capabilities only. * Does not exist at runtime. * ### DO NOT USE! */ $$events_def: Events; /** * For type checking capabilities only. * Does not exist at runtime. * ### DO NOT USE! */ $$slot_def: Slots; /** * For type checking capabilities only. * Does not exist at runtime. * ### DO NOT USE! */ $$bindings?: string; /** * @deprecated This method only exists when using one of the legacy compatibility helpers, which * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes * for more info. */ $destroy(): void; /** * @deprecated This method only exists when using one of the legacy compatibility helpers, which * is a stop-gap solution. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes * for more info. */ $on>( type: K, 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 https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes * for more info. */ $set(props: Partial): void; } const brand: unique symbol; type Brand = { [brand]: B }; type Branded = T & Brand; /** * Internal implementation details that vary between environments */ export type ComponentInternals = Branded<{}, 'ComponentInternals'>; /** * Can be used to create strongly typed Svelte components. * * #### Example: * * You have component library on npm called `component-library`, from which * you export a component called `MyComponent`. For Svelte+TypeScript users, * you want to provide typings. Therefore you create a `index.d.ts`: * ```ts * import type { Component } from 'svelte'; * export declare const MyComponent: Component<{ foo: string }> {} * ``` * Typing this makes it possible for IDEs like VS Code with the Svelte extension * to provide intellisense and to use the component like this in a Svelte file * with TypeScript: * ```svelte * * * ``` */ export interface Component< Props extends Record = {}, Exports extends Record = {}, Bindings extends keyof Props | '' = string > { /** * @param internal An internal object used by Svelte. Do not use or modify. * @param props The props passed to the component. */ ( this: void, internals: ComponentInternals, props: Props ): { /** * @deprecated This method only exists when using one of the legacy compatibility helpers, which * is a stop-gap solution. See 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 https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes * for more info. */ $set?(props: Partial): void; } & Exports; /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */ element?: typeof HTMLElement; /** Does not exist at runtime, for typing capabilities only. DO NOT USE */ z_$$bindings?: Bindings; } /** * @deprecated Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. */ export class SvelteComponentTyped< Props extends Record = Record, Events extends Record = any, Slots extends Record = any > extends SvelteComponent {} /** * @deprecated The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead. * * @description * Convenience type to get the events the given component expects. Example: * ```html * * * * ``` */ export type ComponentEvents = Comp extends SvelteComponent ? Events : never; /** * Convenience type to get the props the given component expects. * * Example: Ensure 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 props: ComponentProps = { foo: 'bar' }; * ``` * * > [!NOTE] In Svelte 4, you would do `ComponentProps` because `MyComponent` was a class. * * Example: A 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>( * component: TComponent, * props: ComponentProps * ) {}; * * // Errors if the second argument is not the correct props expected by the component in the first argument. * withProps(MyComponent, { foo: 'bar' }); * ``` */ export type ComponentProps> = Comp extends SvelteComponent ? Props : Comp extends Component ? Props : never; /** * @deprecated This type is obsolete when working with the new `Component` type. * * @description * Convenience type to get the type of a Svelte component. Useful for example in combination with * dynamic components using ``. * * Example: * ```html * * * * * ``` */ export type ComponentType = (new ( options: ComponentConstructorOptions< Comp extends SvelteComponent ? Props : Record > ) => Comp) & { /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */ element?: typeof HTMLElement; }; const SnippetReturn: unique symbol; // Use an interface instead of a type, makes for better intellisense info because the type is named in more situations. /** * 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 }: { banner: Snippet<[{ text: string }]> } = $props(); * ``` * You can only call a snippet through the `{@render ...}` tag. * * https://svelte.dev/docs/svelte/snippet * * @template Parameters the parameters that the snippet expects (if any) as a tuple. */ export interface Snippet { ( this: void, // 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'] ? never : Parameters ): { '{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'"; } & typeof SnippetReturn; } interface DispatchOptions { cancelable?: boolean; } export interface EventDispatcher> { // Implementation notes: // - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode // - | null | undefined is added for convenience, as they are equivalent for the custom event constructor (both result in a null detail) ( ...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, parameter: EventMap[Type], options?: DispatchOptions] ): boolean; } /** * Defines the options accepted by the `mount()` function. */ export type MountOptions = Record> = { /** * Target element where the component will be mounted. */ target: Document | 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; } & ({} extends Props ? { /** * Component properties. */ props?: Props; } : { /** * Component properties. */ props: Props; }); /** * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. * It must be called during the component's initialisation (but doesn't need to live *inside* the component; * it can be called from an external module). * * If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted. * * `onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render). * * */ export function onMount(fn: () => NotFunction | Promise> | (() => any)): void; /** * Schedules a callback to run immediately before the component is unmounted. * * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the * only one that runs inside a server-side component. * * */ export function onDestroy(fn: () => any): void; /** * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events). * Event dispatchers are functions that can take two arguments: `name` and `detail`. * * Component events created with `createEventDispatcher` create a * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) * property and can contain any type of data. * * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument: * ```ts * const dispatch = createEventDispatcher<{ * loaded: never; // does not take a detail argument * change: string; // takes a detail argument of type string, which is required * optional: number | null; // takes an optional detail argument of type number * }>(); * ``` * * @deprecated Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events * */ export function createEventDispatcher = any>(): EventDispatcher; /** * Schedules a callback to run immediately before the component is updated after any state change. * * The first time the callback runs will be before the initial `onMount`. * * In runes mode use `$effect.pre` instead. * * @deprecated Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre * */ export function beforeUpdate(fn: () => void): void; /** * Schedules a callback to run immediately after the component has been updated. * * The first time the callback runs will be after the initial `onMount`. * * In runes mode use `$effect` instead. * * @deprecated Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect * */ export function afterUpdate(fn: () => void): void; /** * Synchronously flushes any pending state changes and those that result from it. * */ export function flushSync(fn?: (() => void) | undefined): void; /** * Create a snippet programmatically * */ export function createRawSnippet(fn: (...params: Getters) => { render: () => string; setup?: (element: Element) => void | (() => void); }): Snippet; /** Anything except a function */ type NotFunction = T extends Function ? never : T; /** * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. * Transitions will play during the initial render unless the `intro` option is set to `false`. * * */ export function mount, Exports extends Record>(component: ComponentType> | Component, options: MountOptions): Exports; /** * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component * * */ export function hydrate, Exports extends Record>(component: ComponentType> | Component, options: {} extends Props ? { target: Document | Element | ShadowRoot; props?: Props; events?: Record any>; context?: Map; intro?: boolean; recover?: boolean; } : { target: Document | Element | ShadowRoot; props: Props; events?: Record any>; context?: Map; intro?: boolean; recover?: boolean; }): Exports; /** * Unmounts a component that was previously mounted using `mount` or `hydrate`. * */ export function unmount(component: Record): void; /** * Returns a promise that resolves once any pending state changes have been applied. * */ export function tick(): Promise; /** * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect), * any state read inside `fn` will not be treated as a dependency. * * ```ts * $effect(() => { * // this will run when `data` changes, but not when `time` changes * save(data, { * timestamp: untrack(() => time) * }); * }); * ``` * */ export function untrack(fn: () => T): T; /** * Retrieves the context that belongs to the closest parent component with the specified `key`. * Must be called during component initialisation. * * */ export function getContext(key: any): T; /** * Associates an arbitrary `context` object with the current component and the specified `key` * and returns that object. The context is then available to children of the component * (including slotted content) with `getContext`. * * Like lifecycle functions, this must be called during component initialisation. * * */ export function setContext(key: any, context: T): T; /** * Checks whether a given `key` has been set in the context of a parent component. * Must be called during component initialisation. * * */ export function hasContext(key: any): boolean; /** * Retrieves the whole context map that belongs to the closest parent component. * Must be called during component initialisation. Useful, for example, if you * programmatically create a component and want to pass the existing context to it. * * */ export function getAllContexts = Map>(): T; type Getters = { [K in keyof T]: () => T[K]; }; export {}; } declare module 'svelte/action' { /** * Actions can return an object containing the two properties defined in this interface. Both are optional. * - update: An 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. * - destroy: Method 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, parameter: Parameter): ActionReturn { * // ... * return { * update: (updatedParameter) => {...}, * destroy: () => {...} * }; * } * ``` */ export interface ActionReturn< Parameter = undefined, Attributes extends Record = Record > { update?: (parameter: Parameter) => void; destroy?: () => void; /** * ### DO NOT USE THIS * This exists solely for type-checking and has no effect at runtime. * Set this through the `Attributes` generic instead. */ $$_attributes?: Attributes; } /** * Actions are functions that are called when an element is created. * You can use this interface to type such actions. * The following example defines an action that only works on `
` elements * and optionally accepts a parameter which it has a default value for: * ```ts * export const myAction: Action = (node, param = { someProperty: true }) => { * // ... * } * ``` * `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. */ export interface Action< Element = HTMLElement, Parameter = undefined, Attributes extends Record = Record > { ( ...args: undefined extends Parameter ? [node: Node, parameter?: Parameter] : [node: Node, parameter: Parameter] ): void | ActionReturn; } // Implementation notes: // - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode export {}; } declare module 'svelte/animate' { // todo: same as Transition, should it be shared? export interface AnimationConfig { delay?: number; duration?: number; easing?: (t: number) => number; css?: (t: number, u: number) => string; tick?: (t: number, u: number) => void; } export interface FlipParams { delay?: number; duration?: number | ((len: number) => number); easing?: (t: number) => number; } /** * The flip function calculates the start and end position of an element and animates between them, translating the x and y values. * `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/). * * */ export function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect; }, params?: FlipParams): AnimationConfig; export {}; } declare module 'svelte/compiler' { import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression } from 'estree'; import type { SourceMap } from 'magic-string'; import type { Location } from 'locate-character'; /** * `compile` converts your `.svelte` source code into a JavaScript module that exports a component * * @param source The component source code * @param options The compiler options * */ export function compile(source: string, options: CompileOptions): CompileResult; /** * `compileModule` takes your JavaScript source code containing runes, and turns it into a JavaScript module. * * @param source The component source code * */ export function compileModule(source: string, options: ModuleCompileOptions): CompileResult; /** * The parse function parses a component, returning only its abstract syntax tree. * * The `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST. * `modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7. * * */ export function parse(source: string, options: { filename?: string; modern: true; }): AST.Root; /** * The parse function parses a component, returning only its abstract syntax tree. * * The `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST. * `modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7. * * */ export function parse(source: string, options?: { filename?: string; modern?: false; } | undefined): Record; /** * @deprecated Replace this with `import { walk } from 'estree-walker'` * */ export function walk(): never; /** * The result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged. */ export interface Processed { /** * The new code */ code: string; /** * A source map mapping back to the original code */ map?: string | object; // we are opaque with the type here to avoid dependency on the remapping module for our public types. /** * A list of additional files to watch for changes */ dependencies?: string[]; /** * Only for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged. */ attributes?: Record; toString?: () => string; } /** * A markup preprocessor that takes a string of code and returns a processed version. */ export type MarkupPreprocessor = (options: { /** * The whole Svelte file content */ content: string; /** * The filename of the Svelte file */ filename?: string; }) => Processed | void | Promise; /** * A script/style preprocessor that takes a string of code and returns a processed version. */ export type Preprocessor = (options: { /** * The script/style tag content */ content: string; /** * The attributes on the script/style tag */ attributes: Record; /** * The whole Svelte file content */ markup: string; /** * The filename of the Svelte file */ filename?: string; }) => Processed | void | Promise; /** * A preprocessor group is a set of preprocessors that are applied to a Svelte file. */ export interface PreprocessorGroup { /** Name of the preprocessor. Will be a required option in the next major version */ name?: string; markup?: MarkupPreprocessor; style?: Preprocessor; script?: Preprocessor; } /** The return value of `compile` from `svelte/compiler` */ export interface CompileResult { /** The compiled JavaScript */ js: { /** The generated code */ code: string; /** A source map */ map: SourceMap; }; /** The compiled CSS */ css: null | { /** The generated code */ code: string; /** A source map */ map: SourceMap; }; /** * An array of warning objects that were generated during compilation. Each warning has several properties: * - `code` is a string identifying the category of warning * - `message` describes the issue in human-readable terms * - `start` and `end`, if the warning relates to a specific location, are objects with `line`, `column` and `character` properties */ warnings: Warning[]; /** * Metadata about the compiled component */ metadata: { /** * Whether the file was compiled in runes mode, either because of an explicit option or inferred from usage. * For `compileModule`, this is always `true` */ runes: boolean; }; /** The AST */ ast: any; } export interface Warning extends ICompileDiagnostic {} export interface CompileError extends ICompileDiagnostic {} type CssHashGetter = (args: { name: string; filename: string; css: string; hash: (input: string) => string; }) => string; export interface CompileOptions extends ModuleCompileOptions { /** * Sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). * If unspecified, will be inferred from `filename` */ name?: string; /** * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component. * * @default false */ customElement?: boolean; /** * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`. * * @default false * @deprecated This will have no effect in runes mode */ accessors?: boolean; /** * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`. * * @default 'html' */ namespace?: Namespace; /** * If `true`, tells the compiler that you promise not to mutate any objects. * This allows it to be less conservative about checking whether values have changed. * * @default false * @deprecated This will have no effect in runes mode */ immutable?: boolean; /** * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root. * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. * This is always `'injected'` when compiling with `customElement` mode. */ css?: 'injected' | 'external'; /** * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. * It defaults to returning `svelte-${hash(css)}`. * * @default undefined */ cssHash?: CssHashGetter; /** * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out. * * @default false */ preserveComments?: boolean; /** * If `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible. * * @default false */ preserveWhitespace?: boolean; /** * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage. * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage. * Set to `undefined` (the default) to infer runes mode from the component code. * Is always `true` for JS/TS modules compiled with Svelte. * Will be `true` by default in Svelte 6. * Note that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`, * which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead. * @default undefined */ runes?: boolean | undefined; /** * If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`. * * @default true */ discloseVersion?: boolean; /** * @deprecated Use these only as a temporary solution before migrating your code */ compatibility?: { /** * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`) * or as an object with a `.render(...)` method when compiling for the server * @default 5 */ componentApi?: 4 | 5; }; /** * An initial sourcemap that will be merged into the final output sourcemap. * This is usually the preprocessor sourcemap. * * @default null */ sourcemap?: object | string; /** * Used for your JavaScript sourcemap. * * @default null */ outputFilename?: string; /** * Used for your CSS sourcemap. * * @default null */ cssOutputFilename?: string; /** * If `true`, compiles components with hot reloading support. * * @default false */ hmr?: boolean; /** * If `true`, returns the modern version of the AST. * Will become `true` by default in Svelte 6, and the option will be removed in Svelte 7. * * @default false */ modernAst?: boolean; } export interface ModuleCompileOptions { /** * If `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development. * * @default false */ dev?: boolean; /** * If `"client"`, Svelte emits code designed to run in the browser. * If `"server"`, Svelte emits code suitable for server-side rendering. * If `false`, nothing is generated. Useful for tooling that is only interested in warnings. * * @default 'client' */ generate?: 'client' | 'server' | false; /** * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically. */ filename?: string; /** * Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically. * @default process.cwd() on node-like environments, undefined elsewhere */ rootDir?: string; /** * A function that gets a `Warning` as an argument and returns a boolean. * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it. */ warningFilter?: (warning: Warning) => boolean; } /** * - `html` — the default, for e.g. `
` or `` * - `svg` — for e.g. `` or `` * - `mathml` — for e.g. `` or `` */ type Namespace = 'html' | 'svg' | 'mathml'; export namespace AST { export interface BaseNode { type: string; start: number; end: number; } export interface Fragment { type: 'Fragment'; nodes: Array; } export interface Root extends BaseNode { type: 'Root'; /** * Inline options provided by `` — these override options passed to `compile(...)` */ options: SvelteOptions | null; fragment: Fragment; /** The parsed `` */ head: string; /** @deprecated use `body` instead */ html: string; /** HTML that goes somewhere into the `` */ body: string; } export {}; } declare module 'svelte/store' { /** Callback to inform of a value updates. */ export type Subscriber = (value: T) => void; /** Unsubscribes from value updates. */ export type Unsubscriber = () => void; /** Callback to update a value. */ export type Updater = (value: T) => T; /** * Start and stop notification callbacks. * This function is called when the first subscriber subscribes. * * @param set Function that sets the value of the store. * @param update Function that sets the value of the store after passing the current value to the update function. * @returns Optionally, a cleanup function that is called when the last remaining * subscriber unsubscribes. */ export type StartStopNotifier = ( set: (value: T) => void, update: (fn: Updater) => void ) => void | (() => void); /** Readable interface for subscribing. */ export interface Readable { /** * Subscribe on value changes. * @param run subscription callback * @param invalidate cleanup callback */ subscribe(this: void, run: Subscriber, invalidate?: () => void): Unsubscriber; } /** Writable interface for both updating and subscribing. */ export interface Writable extends Readable { /** * Set value and inform subscribers. * @param value to set */ set(this: void, value: T): void; /** * Update value using callback and inform subscribers. * @param updater callback */ update(this: void, updater: Updater): void; } export function toStore(get: () => V, set: (v: V) => void): Writable; export function toStore(get: () => V): Readable; export function fromStore(store: Writable): { current: V; }; export function fromStore(store: Readable): { readonly current: V; }; /** * Creates a `Readable` store that allows reading by subscription. * * @param value initial value * */ export function readable(value?: T | undefined, start?: StartStopNotifier | undefined): Readable; /** * Create a `Writable` store that allows both updating and reading by subscription. * * @param value initial value * */ export function writable(value?: T | undefined, start?: StartStopNotifier | undefined): Writable; /** * Derived value store by synchronizing one or more readable stores and * applying an aggregation function over its input values. * * */ export function derived(stores: S, fn: (values: StoresValues, set: (value: T) => void, update: (fn: Updater) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable; /** * Derived value store by synchronizing one or more readable stores and * applying an aggregation function over its input values. * * */ export function derived(stores: S, fn: (values: StoresValues) => T, initial_value?: T | undefined): Readable; /** * Takes a store and returns a new one derived from the old one that is readable. * * @param store - store to make readonly * */ export function readonly(store: Readable): Readable; /** * Get the current value from a store by subscribing and immediately unsubscribing. * * */ export function get(store: Readable): T; /** One or more `Readable`s. */ type Stores = Readable | [Readable, ...Array>] | Array>; /** One or more values from `Readable` stores. */ type StoresValues = T extends Readable ? U : { [K in keyof T]: T[K] extends Readable ? U : never }; export {}; } declare module 'svelte/transition' { export type EasingFunction = (t: number) => number; export interface TransitionConfig { delay?: number; duration?: number; easing?: EasingFunction; css?: (t: number, u: number) => string; tick?: (t: number, u: number) => void; } export interface BlurParams { delay?: number; duration?: number; easing?: EasingFunction; amount?: number | string; opacity?: number; } export interface FadeParams { delay?: number; duration?: number; easing?: EasingFunction; } export interface FlyParams { delay?: number; duration?: number; easing?: EasingFunction; x?: number | string; y?: number | string; opacity?: number; } export interface SlideParams { delay?: number; duration?: number; easing?: EasingFunction; axis?: 'x' | 'y'; } export interface ScaleParams { delay?: number; duration?: number; easing?: EasingFunction; start?: number; opacity?: number; } export interface DrawParams { delay?: number; speed?: number; duration?: number | ((len: number) => number); easing?: EasingFunction; } export interface CrossfadeParams { delay?: number; duration?: number | ((len: number) => number); easing?: EasingFunction; } /** * Animates a `blur` filter alongside an element's opacity. * * */ export function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfig; /** * 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. * * */ export function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfig; /** * 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. * * */ export function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig; /** * Slides an element in and out. * * */ export function slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfig; /** * Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values. * * */ export function scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfig; /** * Animates 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 `` and ``. * * */ export function draw(node: SVGElement & { getTotalLength(): number; }, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfig; /** * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) 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. * * */ export function crossfade({ fallback, ...defaults }: CrossfadeParams & { fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig; }): [(node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig, (node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig]; export {}; } declare module 'svelte/events' { // Once https://github.com/microsoft/TypeScript/issues/59980 is fixed we can put these overloads into the JSDoc comments of the `on` function /** * Attaches an event handler to the window and returns a function that removes the handler. Using this * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively * (with attributes like `onclick`), which use event delegation for performance reasons */ export function on( window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type]) => any, options?: AddEventListenerOptions | undefined ): () => void; /** * Attaches an event handler to the document and returns a function that removes the handler. Using this * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively * (with attributes like `onclick`), which use event delegation for performance reasons */ export function on( document: Document, type: Type, handler: (this: Document, event: DocumentEventMap[Type]) => any, options?: AddEventListenerOptions | undefined ): () => void; /** * Attaches an event handler to an element and returns a function that removes the handler. Using this * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively * (with attributes like `onclick`), which use event delegation for performance reasons */ export function on( element: Element, type: Type, handler: (this: Element, event: HTMLElementEventMap[Type]) => any, options?: AddEventListenerOptions | undefined ): () => void; /** * Attaches an event handler to an element and returns a function that removes the handler. Using this * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively * (with attributes like `onclick`), which use event delegation for performance reasons */ export function on( element: Element, type: Type, handler: (this: Element, event: MediaQueryListEventMap[Type]) => any, options?: AddEventListenerOptions | undefined ): () => void; /** * Attaches an event handler to an element and returns a function that removes the handler. Using this * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively * (with attributes like `onclick`), which use event delegation for performance reasons */ export function on( element: EventTarget, type: string, handler: EventListener, options?: AddEventListenerOptions | undefined ): () => void; export {}; } declare module 'svelte/types/compiler/preprocess' { /** @deprecated import this from 'svelte/preprocess' instead */ export type MarkupPreprocessor = MarkupPreprocessor_1; /** @deprecated import this from 'svelte/preprocess' instead */ export type Preprocessor = Preprocessor_1; /** @deprecated import this from 'svelte/preprocess' instead */ export type PreprocessorGroup = PreprocessorGroup_1; /** @deprecated import this from 'svelte/preprocess' instead */ export type Processed = Processed_1; /** @deprecated import this from 'svelte/preprocess' instead */ export type SveltePreprocessor = SveltePreprocessor_1< PreprocessorType, Options >; /** * The result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged. */ interface Processed_1 { /** * The new code */ code: string; /** * A source map mapping back to the original code */ map?: string | object; // we are opaque with the type here to avoid dependency on the remapping module for our public types. /** * A list of additional files to watch for changes */ dependencies?: string[]; /** * Only for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged. */ attributes?: Record; toString?: () => string; } /** * A markup preprocessor that takes a string of code and returns a processed version. */ type MarkupPreprocessor_1 = (options: { /** * The whole Svelte file content */ content: string; /** * The filename of the Svelte file */ filename?: string; }) => Processed_1 | void | Promise; /** * A script/style preprocessor that takes a string of code and returns a processed version. */ type Preprocessor_1 = (options: { /** * The script/style tag content */ content: string; /** * The attributes on the script/style tag */ attributes: Record; /** * The whole Svelte file content */ markup: string; /** * The filename of the Svelte file */ filename?: string; }) => Processed_1 | void | Promise; /** * A preprocessor group is a set of preprocessors that are applied to a Svelte file. */ interface PreprocessorGroup_1 { /** Name of the preprocessor. Will be a required option in the next major version */ name?: string; markup?: MarkupPreprocessor_1; style?: Preprocessor_1; script?: Preprocessor_1; } /** * @description Utility type to extract the type of a preprocessor from a preprocessor group * @deprecated Create this utility type yourself instead */ interface SveltePreprocessor_1< PreprocessorType extends keyof PreprocessorGroup_1, Options = any > { (options?: Options): Required>; } export {}; } declare module 'svelte/types/compiler/interfaces' { import type { Location } from 'locate-character'; /** @deprecated import this from 'svelte' instead */ export type CompileOptions = CompileOptions_1; /** @deprecated import this from 'svelte' instead */ export type Warning = Warning_1; interface Warning_1 extends ICompileDiagnostic {} type CssHashGetter = (args: { name: string; filename: string; css: string; hash: (input: string) => string; }) => string; interface CompileOptions_1 extends ModuleCompileOptions { /** * Sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). * If unspecified, will be inferred from `filename` */ name?: string; /** * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component. * * @default false */ customElement?: boolean; /** * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`. * * @default false * @deprecated This will have no effect in runes mode */ accessors?: boolean; /** * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`. * * @default 'html' */ namespace?: Namespace; /** * If `true`, tells the compiler that you promise not to mutate any objects. * This allows it to be less conservative about checking whether values have changed. * * @default false * @deprecated This will have no effect in runes mode */ immutable?: boolean; /** * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root. * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. * This is always `'injected'` when compiling with `customElement` mode. */ css?: 'injected' | 'external'; /** * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. * It defaults to returning `svelte-${hash(css)}`. * * @default undefined */ cssHash?: CssHashGetter; /** * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out. * * @default false */ preserveComments?: boolean; /** * If `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible. * * @default false */ preserveWhitespace?: boolean; /** * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage. * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage. * Set to `undefined` (the default) to infer runes mode from the component code. * Is always `true` for JS/TS modules compiled with Svelte. * Will be `true` by default in Svelte 6. * Note that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`, * which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead. * @default undefined */ runes?: boolean | undefined; /** * If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`. * * @default true */ discloseVersion?: boolean; /** * @deprecated Use these only as a temporary solution before migrating your code */ compatibility?: { /** * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`) * or as an object with a `.render(...)` method when compiling for the server * @default 5 */ componentApi?: 4 | 5; }; /** * An initial sourcemap that will be merged into the final output sourcemap. * This is usually the preprocessor sourcemap. * * @default null */ sourcemap?: object | string; /** * Used for your JavaScript sourcemap. * * @default null */ outputFilename?: string; /** * Used for your CSS sourcemap. * * @default null */ cssOutputFilename?: string; /** * If `true`, compiles components with hot reloading support. * * @default false */ hmr?: boolean; /** * If `true`, returns the modern version of the AST. * Will become `true` by default in Svelte 6, and the option will be removed in Svelte 7. * * @default false */ modernAst?: boolean; } interface ModuleCompileOptions { /** * If `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development. * * @default false */ dev?: boolean; /** * If `"client"`, Svelte emits code designed to run in the browser. * If `"server"`, Svelte emits code suitable for server-side rendering. * If `false`, nothing is generated. Useful for tooling that is only interested in warnings. * * @default 'client' */ generate?: 'client' | 'server' | false; /** * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically. */ filename?: string; /** * Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically. * @default process.cwd() on node-like environments, undefined elsewhere */ rootDir?: string; /** * A function that gets a `Warning` as an argument and returns a boolean. * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it. */ warningFilter?: (warning: Warning_1) => boolean; } /** * - `html` — the default, for e.g. `
` or `` * - `svg` — for e.g. `` or `` * - `mathml` — for e.g. `` or `` */ type Namespace = 'html' | 'svg' | 'mathml'; type ICompileDiagnostic = { code: string; message: string; stack?: string; filename?: string; start?: Location; end?: Location; position?: [number, number]; frame?: string; }; export {}; }declare module '*.svelte' { // use prettier-ignore for a while because of https://github.com/sveltejs/language-tools/commit/026111228b5814a9109cc4d779d37fb02955fb8b // prettier-ignore import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte' // Support using the component as both a class and function during the transition period // prettier-ignore interface ComponentType { ( ...args: Parameters>> ): ReturnType, Record>> new (o: ComponentConstructorOptions): SvelteComponent } const Comp: ComponentType; type Comp = SvelteComponent; export default Comp; } /** * Declares reactive state. * * Example: * ```ts * let count = $state(0); * ``` * * https://svelte.dev/docs/svelte/$state * * @param initial The initial value */ declare function $state(initial: T): T; declare function $state(): T | undefined; declare namespace $state { type Primitive = string | number | boolean | null | undefined; type TypedArray = | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | BigInt64Array | BigUint64Array; /** The things that `structuredClone` can handle — https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm */ export type Cloneable = | ArrayBuffer | DataView | Date | Error | Map | RegExp | Set | TypedArray // web APIs | Blob | CryptoKey | DOMException | DOMMatrix | DOMMatrixReadOnly | DOMPoint | DOMPointReadOnly | DOMQuad | DOMRect | DOMRectReadOnly | File | FileList | FileSystemDirectoryHandle | FileSystemFileHandle | FileSystemHandle | ImageBitmap | ImageData | RTCCertificate | VideoFrame; /** Turn `SvelteDate`, `SvelteMap` and `SvelteSet` into their non-reactive counterparts. (`URL` is uncloneable.) */ type NonReactive = T extends Date ? Date : T extends Map ? Map : T extends Set ? Set : T; type Snapshot = T extends Primitive ? T : T extends Cloneable ? NonReactive : T extends { toJSON(): infer R } ? R : T extends Array ? Array> : T extends object ? T extends { [key: string]: any } ? { [K in keyof T]: Snapshot } : never : never; /** * Declares state that is _not_ made deeply reactive — instead of mutating it, * you must reassign it. * * Example: * ```ts * * * * ``` * * https://svelte.dev/docs/svelte/$state#$state.raw * * @param initial The initial value */ export function raw(initial: T): T; export function raw(): T | undefined; /** * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`: * * Example: * ```ts * * ``` * * https://svelte.dev/docs/svelte/$state#$state.snapshot * * @param state The value to snapshot */ export function snapshot(state: T): Snapshot; // prevent intellisense from being unhelpful /** @deprecated */ export const apply: never; /** @deprecated */ // @ts-ignore export const arguments: never; /** @deprecated */ export const bind: never; /** @deprecated */ export const call: never; /** @deprecated */ export const caller: never; /** @deprecated */ export const length: never; /** @deprecated */ export const name: never; /** @deprecated */ export const prototype: never; /** @deprecated */ export const toString: never; } /** * Declares derived state, i.e. one that depends on other state variables. * The expression inside `$derived(...)` should be free of side-effects. * * Example: * ```ts * let double = $derived(count * 2); * ``` * * https://svelte.dev/docs/svelte/$derived * * @param expression The derived state expression */ declare function $derived(expression: T): T; declare namespace $derived { /** * Sometimes you need to create complex derivations that don't fit inside a short expression. * In these cases, you can use `$derived.by` which accepts a function as its argument. * * Example: * ```ts * let total = $derived.by(() => { * let result = 0; * for (const n of numbers) { * result += n; * } * return result; * }); * ``` * * https://svelte.dev/docs/svelte/$derived#$derived.by */ export function by(fn: () => T): T; // prevent intellisense from being unhelpful /** @deprecated */ export const apply: never; /** @deprecated */ // @ts-ignore export const arguments: never; /** @deprecated */ export const bind: never; /** @deprecated */ export const call: never; /** @deprecated */ export const caller: never; /** @deprecated */ export const length: never; /** @deprecated */ export const name: never; /** @deprecated */ export const prototype: never; /** @deprecated */ export const toString: never; } /** * Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values. * The timing of the execution is after the DOM has been updated. * * Example: * ```ts * $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. * * Does not run during server side rendering. * * https://svelte.dev/docs/svelte/$effect * @param fn The function to execute */ declare function $effect(fn: () => void | (() => void)): void; declare namespace $effect { /** * Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values. * The timing of the execution is right before the DOM is updated. * * Example: * ```ts * $effect.pre(() => 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. * * Does not run during server side rendering. * * https://svelte.dev/docs/svelte/$effect#$effect.pre * @param fn The function to execute */ export function pre(fn: () => void | (() => void)): void; /** * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template. * * Example: * ```svelte * * *

in template: {$effect.tracking()}

* ``` * * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. * * https://svelte.dev/docs/svelte/$effect#$effect.tracking */ export function tracking(): boolean; /** * The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for * nested effects that you want to manually control. This rune also allows for creation of effects outside of the component * initialisation phase. * * Example: * ```svelte * * * * ``` * * https://svelte.dev/docs/svelte/$effect#$effect.root */ export function root(fn: () => void | (() => void)): () => void; // prevent intellisense from being unhelpful /** @deprecated */ export const apply: never; /** @deprecated */ // @ts-ignore export const arguments: never; /** @deprecated */ export const bind: never; /** @deprecated */ export const call: never; /** @deprecated */ export const caller: never; /** @deprecated */ export const length: never; /** @deprecated */ export const name: never; /** @deprecated */ export const prototype: never; /** @deprecated */ export const toString: never; } /** * Declares the props that a component accepts. Example: * * ```ts * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props(); * ``` * * https://svelte.dev/docs/svelte/$props */ declare function $props(): any; /** * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it. * * ```ts * let { propName = $bindable() }: { propName: boolean } = $props(); * ``` * * https://svelte.dev/docs/svelte/$bindable */ declare function $bindable(fallback?: T): T; /** * Inspects one or more values whenever they, or the properties they contain, change. Example: * * ```ts * $inspect(someValue, someOtherValue) * ``` * * `$inspect` returns a `with` function, which you can invoke with a callback function that * will be called with the value and the event type (`'init'` or `'update'`) on every change. * By default, the values will be logged to the console. * * ```ts * $inspect(x).with(console.trace); * $inspect(x, y).with(() => { debugger; }); * ``` * * https://svelte.dev/docs/svelte/$inspect */ declare function $inspect( ...values: T ): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void }; /** * Retrieves the `this` reference of the custom element that contains this component. Example: * * ```svelte * * * * * * ``` * * Only available inside custom element components, and only on the client-side. * * https://svelte.dev/docs/svelte/$host */ declare function $host(): El; //# sourceMappingURL=index.d.ts.map