diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts new file mode 100644 index 0000000000..671f68bff7 --- /dev/null +++ b/packages/svelte/types/index.d.ts @@ -0,0 +1,3072 @@ +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 + * [migration guide](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 [migration guide](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 [migration guide](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 [migration guide](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 [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; + /** 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 [migration guide](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`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead + * */ + 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`](https://svelte.dev/docs/svelte/$effect) instead + * */ + 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`. + * + * Since 5.13.0, if `options.outro` is `true`, [transitions](https://svelte.dev/docs/svelte/transition) will play before the component is removed from the DOM. + * + * Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`). + * + * ```js + * import { mount, unmount } from 'svelte'; + * import App from './App.svelte'; + * + * const app = mount(App, { target: document.body }); + * + * // later... + * unmount(app, { outro: true }); + * ``` + * */ + export function unmount(component: Record, options?: { + outro?: boolean; + } | undefined): Promise; + /** + * 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, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } 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; + loose?: boolean; + }): 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; + loose?: boolean; + } | 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 `(fn: () => U, options?: SpringOpts): Spring; + + /** + * 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. + */ + set(value: T, options?: SpringUpdateOpts): Promise; + + damping: number; + precision: number; + stiffness: number; + /** + * The end value of the spring. + * This property only exists on the `Spring` class, not the legacy `spring` store. + */ + target: T; + /** + * The current value of the spring. + * This property only exists on the `Spring` class, not the legacy `spring` store. + */ + get current(): T; + } + + export interface Tweened extends Readable { + set(value: T, opts?: TweenedOptions): Promise; + update(updater: Updater, opts?: TweenedOptions): Promise; + } + /** Callback to inform of a value updates. */ + type Subscriber = (value: T) => void; + + /** Unsubscribes from value updates. */ + type Unsubscriber = () => void; + + /** Readable interface for subscribing. */ + interface Readable { + /** + * Subscribe on value changes. + * @param run subscription callback + * @param invalidate cleanup callback + */ + subscribe(this: void, run: Subscriber, invalidate?: () => void): Unsubscriber; + } + interface SpringOpts { + stiffness?: number; + damping?: number; + precision?: number; + } + + interface SpringUpdateOpts { + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + hard?: any; + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + soft?: string | number | boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + instant?: boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + preserveMomentum?: number; + } + + type Updater = (target_value: T, value: T) => T; + + interface TweenedOptions { + delay?: number; + duration?: number | ((from: T, to: T) => number); + easing?: (t: number) => number; + interpolate?: (a: T, b: T) => (t: number) => T; + } + /** + * A [media query](https://svelte.dev/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 + * + * + * + * + * {#if visible} + *

+ * flies in, unless the user prefers reduced motion + *

+ * {/if} + * ``` + * @since 5.7.0 + */ + export const prefersReducedMotion: MediaQuery; + /** + * 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. + * + * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead + * */ + export function spring(value?: T | undefined, opts?: SpringOpts | undefined): Spring; + /** + * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time. + * + * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead + * */ + export function tweened(value?: T | undefined, defaults?: TweenedOptions | undefined): Tweened; + /** + * 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 + * + * + * + * + * ``` + * @since 5.8.0 + */ + export class 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 + * + * ``` + * + */ + static of(fn: () => U, options?: TweenedOptions | undefined): Tween; + + constructor(value: T, options?: TweenedOptions); + /** + * 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. + * */ + set(value: T, options?: TweenedOptions | undefined): Promise; + get current(): T; + set target(v: T); + get target(): T; + #private; + } + + export {}; +} + +declare module 'svelte/reactivity' { + export class SvelteDate extends Date { + + constructor(...params: any[]); + #private; + } + export class SvelteSet extends Set { + + constructor(value?: Iterable | null | undefined); + + add(value: T): this; + #private; + } + export class SvelteMap extends Map { + + constructor(value?: Iterable | null | undefined); + + set(key: K, value: V): this; + #private; + } + export class SvelteURL extends URL { + get searchParams(): SvelteURLSearchParams; + #private; + } + const REPLACE: unique symbol; + export class SvelteURLSearchParams extends URLSearchParams { + + [REPLACE](params: URLSearchParams): void; + #private; + } + /** + * Creates a media query and provides a `current` property that reflects whether or not it matches. + * + * Use 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. + * If you can use the media query in CSS to achieve the same effect, do that. + * + * ```svelte + * + * + *

{large.current ? 'large screen' : 'small screen'}

+ * ``` + * @extends {ReactiveValue} + * @since 5.7.0 + */ + export class MediaQuery extends ReactiveValue { + /** + * @param query A media query string + * @param fallback Fallback value for the server + */ + constructor(query: string, fallback?: boolean | undefined); + } + /** + * Returns a `subscribe` function that, if called in an effect (including expressions in the template), + * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs. + * + * If `start` returns a function, it will be called when the effect is destroyed. + * + * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects + * are active, and the returned teardown function will only be called when all effects are destroyed. + * + * It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery): + * + * ```js + * import { createSubscriber } from 'svelte/reactivity'; + * import { on } from 'svelte/events'; + * + * export class MediaQuery { + * #query; + * #subscribe; + * + * constructor(query) { + * this.#query = window.matchMedia(`(${query})`); + * + * this.#subscribe = createSubscriber((update) => { + * // when the `change` event occurs, re-run any effects that read `this.current` + * const off = on(this.#query, 'change', update); + * + * // stop listening when all the effects are destroyed + * return () => off(); + * }); + * } + * + * get current() { + * this.#subscribe(); + * + * // Return the current state of the query, whether or not we're in an effect + * return this.#query.matches; + * } + * } + * ``` + * @since 5.7.0 + */ + export function createSubscriber(start: (update: () => void) => (() => void) | void): () => void; + class ReactiveValue { + + constructor(fn: () => T, onsubscribe: (update: () => void) => void); + get current(): T; + #private; + } + + export {}; +} + +declare module 'svelte/reactivity/window' { + /** + * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const scrollX: ReactiveValue; + /** + * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const scrollY: ReactiveValue; + /** + * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const innerWidth: ReactiveValue; + /** + * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const innerHeight: ReactiveValue; + /** + * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const outerWidth: ReactiveValue; + /** + * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const outerHeight: ReactiveValue; + /** + * `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`. + * @since 5.11.0 + */ + export const screenLeft: ReactiveValue; + /** + * `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`. + * @since 5.11.0 + */ + export const screenTop: ReactiveValue; + /** + * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`. + * @since 5.11.0 + */ + export const online: ReactiveValue; + /** + * `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. + * @since 5.11.0 + */ + export const devicePixelRatio: { + get current(): number | undefined; + }; + class ReactiveValue { + + constructor(fn: () => T, onsubscribe: (update: () => void) => void); + get current(): T; + #private; + } + + export {}; +} + +declare module 'svelte/server' { + import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte'; + /** + * Only available on the server and when compiling with the `server` option. + * Takes 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. + */ + export function render< + Comp extends SvelteComponent | Component, + Props extends ComponentProps = ComponentProps + >( + ...args: {} extends Props + ? [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options?: { props?: Omit; context?: Map } + ] + : [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options: { props: Omit; context?: Map } + ] + ): RenderOutput; + interface RenderOutput { + /** HTML that goes into the `` */ + 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 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. + * + * */ + 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 } from 'svelte' + import { LegacyComponentType } from 'svelte/legacy'; + const Comp: LegacyComponentType; + 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 }; + +declare namespace $inspect { + /** + * Tracks which reactive state changes caused an effect to re-run. Must be the first + * statement of a function body. Example: + * + * ```svelte + * + */ + export function trace(name: string): 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 \ No newline at end of file