1 | declare module 'svelte' {
|
2 | /**
|
3 | * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.
|
4 | * Use `mount` instead to instantiate components.
|
5 | * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
6 | * for more info.
|
7 | */
|
8 | export interface ComponentConstructorOptions<
|
9 | Props extends Record<string, any> = Record<string, any>
|
10 | > {
|
11 | target: Element | Document | ShadowRoot;
|
12 | anchor?: Element;
|
13 | props?: Props;
|
14 | context?: Map<any, any>;
|
15 | hydrate?: boolean;
|
16 | intro?: boolean;
|
17 | recover?: boolean;
|
18 | sync?: boolean;
|
19 | $$inline?: boolean;
|
20 | }
|
21 |
|
22 | /**
|
23 | * Utility type for ensuring backwards compatibility on a type level that if there's a default slot, add 'children' to the props
|
24 | */
|
25 | type Properties<Props, Slots> = Props &
|
26 | (Slots extends { default: any }
|
27 | ? // This is unfortunate because it means "accepts no props" turns into "accepts any prop"
|
28 | // but the alternative is non-fixable type errors because of the way TypeScript index
|
29 | // signatures work (they will always take precedence and make an impossible-to-satisfy children type).
|
30 | Props extends Record<string, never>
|
31 | ? any
|
32 | : { children?: any }
|
33 | : {});
|
34 |
|
35 | /**
|
36 | * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
|
37 | * are completely different under the hood. For typing, use `Component` instead.
|
38 | * To instantiate components, use `mount` instead.
|
39 | * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
|
40 | */
|
41 | export class SvelteComponent<
|
42 | Props extends Record<string, any> = Record<string, any>,
|
43 | Events extends Record<string, any> = any,
|
44 | Slots extends Record<string, any> = any
|
45 | > {
|
46 | /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
|
47 | static element?: typeof HTMLElement;
|
48 |
|
49 | [prop: string]: any;
|
50 | /**
|
51 | * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which
|
52 | * is a stop-gap solution. Migrate towards using `mount` instead. See
|
53 | * [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
|
54 | */
|
55 | constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
|
56 | /**
|
57 | * For type checking capabilities only.
|
58 | * Does not exist at runtime.
|
59 | * ### DO NOT USE!
|
60 | */
|
61 | $$prop_def: Props; // Without Properties: unnecessary, causes type bugs
|
62 | /**
|
63 | * For type checking capabilities only.
|
64 | * Does not exist at runtime.
|
65 | * ### DO NOT USE!
|
66 | */
|
67 | $$events_def: Events;
|
68 | /**
|
69 | * For type checking capabilities only.
|
70 | * Does not exist at runtime.
|
71 | * ### DO NOT USE!
|
72 | */
|
73 | $$slot_def: Slots;
|
74 | /**
|
75 | * For type checking capabilities only.
|
76 | * Does not exist at runtime.
|
77 | * ### DO NOT USE!
|
78 | */
|
79 | $$bindings?: string;
|
80 |
|
81 | /**
|
82 | * @deprecated This method only exists when using one of the legacy compatibility helpers, which
|
83 | * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
84 | * for more info.
|
85 | */
|
86 | $destroy(): void;
|
87 |
|
88 | /**
|
89 | * @deprecated This method only exists when using one of the legacy compatibility helpers, which
|
90 | * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
91 | * for more info.
|
92 | */
|
93 | $on<K extends Extract<keyof Events, string>>(
|
94 | type: K,
|
95 | callback: (e: Events[K]) => void
|
96 | ): () => void;
|
97 |
|
98 | /**
|
99 | * @deprecated This method only exists when using one of the legacy compatibility helpers, which
|
100 | * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
101 | * for more info.
|
102 | */
|
103 | $set(props: Partial<Props>): void;
|
104 | }
|
105 |
|
106 | const brand: unique symbol;
|
107 | type Brand<B> = { [brand]: B };
|
108 | type Branded<T, B> = T & Brand<B>;
|
109 |
|
110 | /**
|
111 | * Internal implementation details that vary between environments
|
112 | */
|
113 | export type ComponentInternals = Branded<{}, 'ComponentInternals'>;
|
114 |
|
115 | /**
|
116 | * Can be used to create strongly typed Svelte components.
|
117 | *
|
118 | * #### Example:
|
119 | *
|
120 | * You have component library on npm called `component-library`, from which
|
121 | * you export a component called `MyComponent`. For Svelte+TypeScript users,
|
122 | * you want to provide typings. Therefore you create a `index.d.ts`:
|
123 | * ```ts
|
124 | * import type { Component } from 'svelte';
|
125 | * export declare const MyComponent: Component<{ foo: string }> {}
|
126 | * ```
|
127 | * Typing this makes it possible for IDEs like VS Code with the Svelte extension
|
128 | * to provide intellisense and to use the component like this in a Svelte file
|
129 | * with TypeScript:
|
130 | * ```svelte
|
131 | * <script lang="ts">
|
132 | * import { MyComponent } from "component-library";
|
133 | * </script>
|
134 | * <MyComponent foo={'bar'} />
|
135 | * ```
|
136 | */
|
137 | export interface Component<
|
138 | Props extends Record<string, any> = {},
|
139 | Exports extends Record<string, any> = {},
|
140 | Bindings extends keyof Props | '' = string
|
141 | > {
|
142 | /**
|
143 | * @param internal An internal object used by Svelte. Do not use or modify.
|
144 | * @param props The props passed to the component.
|
145 | */
|
146 | (
|
147 | this: void,
|
148 | internals: ComponentInternals,
|
149 | props: Props
|
150 | ): {
|
151 | /**
|
152 | * @deprecated This method only exists when using one of the legacy compatibility helpers, which
|
153 | * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
154 | * for more info.
|
155 | */
|
156 | $on?(type: string, callback: (e: any) => void): () => void;
|
157 | /**
|
158 | * @deprecated This method only exists when using one of the legacy compatibility helpers, which
|
159 | * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
|
160 | * for more info.
|
161 | */
|
162 | $set?(props: Partial<Props>): void;
|
163 | } & Exports;
|
164 | /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
|
165 | element?: typeof HTMLElement;
|
166 | /** Does not exist at runtime, for typing capabilities only. DO NOT USE */
|
167 | z_$$bindings?: Bindings;
|
168 | }
|
169 |
|
170 | /**
|
171 | * @deprecated Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
|
172 | */
|
173 | export class SvelteComponentTyped<
|
174 | Props extends Record<string, any> = Record<string, any>,
|
175 | Events extends Record<string, any> = any,
|
176 | Slots extends Record<string, any> = any
|
177 | > extends SvelteComponent<Props, Events, Slots> {}
|
178 |
|
179 | /**
|
180 | * @deprecated The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.
|
181 | *
|
182 | * @description
|
183 | * Convenience type to get the events the given component expects. Example:
|
184 | * ```html
|
185 | * <script lang="ts">
|
186 | * import type { ComponentEvents } from 'svelte';
|
187 | * import Component from './Component.svelte';
|
188 | *
|
189 | * function handleCloseEvent(event: ComponentEvents<Component>['close']) {
|
190 | * console.log(event.detail);
|
191 | * }
|
192 | * </script>
|
193 | *
|
194 | * <Component on:close={handleCloseEvent} />
|
195 | * ```
|
196 | */
|
197 | export type ComponentEvents<Comp extends SvelteComponent> =
|
198 | Comp extends SvelteComponent<any, infer Events> ? Events : never;
|
199 |
|
200 | /**
|
201 | * Convenience type to get the props the given component expects.
|
202 | *
|
203 | * Example: Ensure a variable contains the props expected by `MyComponent`:
|
204 | *
|
205 | * ```ts
|
206 | * import type { ComponentProps } from 'svelte';
|
207 | * import MyComponent from './MyComponent.svelte';
|
208 | *
|
209 | * // Errors if these aren't the correct props expected by MyComponent.
|
210 | * const props: ComponentProps<typeof MyComponent> = { foo: 'bar' };
|
211 | * ```
|
212 | *
|
213 | * > [!NOTE] In Svelte 4, you would do `ComponentProps<MyComponent>` because `MyComponent` was a class.
|
214 | *
|
215 | * Example: A generic function that accepts some component and infers the type of its props:
|
216 | *
|
217 | * ```ts
|
218 | * import type { Component, ComponentProps } from 'svelte';
|
219 | * import MyComponent from './MyComponent.svelte';
|
220 | *
|
221 | * function withProps<TComponent extends Component<any>>(
|
222 | * component: TComponent,
|
223 | * props: ComponentProps<TComponent>
|
224 | * ) {};
|
225 | *
|
226 | * // Errors if the second argument is not the correct props expected by the component in the first argument.
|
227 | * withProps(MyComponent, { foo: 'bar' });
|
228 | * ```
|
229 | */
|
230 | export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
|
231 | Comp extends SvelteComponent<infer Props>
|
232 | ? Props
|
233 | : Comp extends Component<infer Props, any>
|
234 | ? Props
|
235 | : never;
|
236 |
|
237 | /**
|
238 | * @deprecated This type is obsolete when working with the new `Component` type.
|
239 | *
|
240 | * @description
|
241 | * Convenience type to get the type of a Svelte component. Useful for example in combination with
|
242 | * dynamic components using `<svelte:component>`.
|
243 | *
|
244 | * Example:
|
245 | * ```html
|
246 | * <script lang="ts">
|
247 | * import type { ComponentType, SvelteComponent } from 'svelte';
|
248 | * import Component1 from './Component1.svelte';
|
249 | * import Component2 from './Component2.svelte';
|
250 | *
|
251 | * const component: ComponentType = someLogic() ? Component1 : Component2;
|
252 | * const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
|
253 | * </script>
|
254 | *
|
255 | * <svelte:component this={component} />
|
256 | * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
|
257 | * ```
|
258 | */
|
259 | export type ComponentType<Comp extends SvelteComponent = SvelteComponent> = (new (
|
260 | options: ComponentConstructorOptions<
|
261 | Comp extends SvelteComponent<infer Props> ? Props : Record<string, any>
|
262 | >
|
263 | ) => Comp) & {
|
264 | /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
|
265 | element?: typeof HTMLElement;
|
266 | };
|
267 |
|
268 | const SnippetReturn: unique symbol;
|
269 |
|
270 | // Use an interface instead of a type, makes for better intellisense info because the type is named in more situations.
|
271 | /**
|
272 | * The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:
|
273 | * ```ts
|
274 | * let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
|
275 | * ```
|
276 | * You can only call a snippet through the `{@render ...}` tag.
|
277 | *
|
278 | * https://svelte.dev/docs/svelte/snippet
|
279 | *
|
280 | * @template Parameters the parameters that the snippet expects (if any) as a tuple.
|
281 | */
|
282 | export interface Snippet<Parameters extends unknown[] = []> {
|
283 | (
|
284 | this: void,
|
285 | // this conditional allows tuples but not arrays. Arrays would indicate a
|
286 | // rest parameter type, which is not supported. If rest parameters are added
|
287 | // in the future, the condition can be removed.
|
288 | ...args: number extends Parameters['length'] ? never : Parameters
|
289 | ): {
|
290 | '{with a Snippet': "import type { Snippet } from 'svelte'";
...} must be called |
291 | } & typeof SnippetReturn;
|
292 | }
|
293 |
|
294 | interface DispatchOptions {
|
295 | cancelable?: boolean;
|
296 | }
|
297 |
|
298 | export interface EventDispatcher<EventMap extends Record<string, any>> {
|
299 | // Implementation notes:
|
300 | // - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
|
301 | // - | null | undefined is added for convenience, as they are equivalent for the custom event constructor (both result in a null detail)
|
302 | <Type extends keyof EventMap>(
|
303 | ...args: null extends EventMap[Type]
|
304 | ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
|
305 | : undefined extends EventMap[Type]
|
306 | ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
|
307 | : [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
|
308 | ): boolean;
|
309 | }
|
310 |
|
311 | /**
|
312 | * Defines the options accepted by the `mount()` function.
|
313 | */
|
314 | export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
|
315 | /**
|
316 | * Target element where the component will be mounted.
|
317 | */
|
318 | target: Document | Element | ShadowRoot;
|
319 | /**
|
320 | * Optional node inside `target`. When specified, it is used to render the component immediately before it.
|
321 | */
|
322 | anchor?: Node;
|
323 | /**
|
324 | * Allows the specification of events.
|
325 | * @deprecated Use callback props instead.
|
326 | */
|
327 | events?: Record<string, (e: any) => any>;
|
328 | /**
|
329 | * Can be accessed via `getContext()` at the component level.
|
330 | */
|
331 | context?: Map<any, any>;
|
332 | /**
|
333 | * Whether or not to play transitions on initial render.
|
334 | * @default true
|
335 | */
|
336 | intro?: boolean;
|
337 | } & ({} extends Props
|
338 | ? {
|
339 | /**
|
340 | * Component properties.
|
341 | */
|
342 | props?: Props;
|
343 | }
|
344 | : {
|
345 | /**
|
346 | * Component properties.
|
347 | */
|
348 | props: Props;
|
349 | });
|
350 | /**
|
351 | * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
|
352 | * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
|
353 | * it can be called from an external module).
|
354 | *
|
355 | * If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
|
356 | *
|
357 | * `onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
|
358 | *
|
359 | * */
|
360 | export function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
|
361 | /**
|
362 | * Schedules a callback to run immediately before the component is unmounted.
|
363 | *
|
364 | * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
|
365 | * only one that runs inside a server-side component.
|
366 | *
|
367 | * */
|
368 | export function onDestroy(fn: () => any): void;
|
369 | /**
|
370 | * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).
|
371 | * Event dispatchers are functions that can take two arguments: `name` and `detail`.
|
372 | *
|
373 | * Component events created with `createEventDispatcher` create a
|
374 | * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
|
375 | * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
|
376 | * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
|
377 | * property and can contain any type of data.
|
378 | *
|
379 | * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
|
380 | * ```ts
|
381 | * const dispatch = createEventDispatcher<{
|
382 | * loaded: never; // does not take a detail argument
|
383 | * change: string; // takes a detail argument of type string, which is required
|
384 | * optional: number | null; // takes an optional detail argument of type number
|
385 | * }>();
|
386 | * ```
|
387 | *
|
388 | * @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)
|
389 | * */
|
390 | export function createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>;
|
391 | /**
|
392 | * Schedules a callback to run immediately before the component is updated after any state change.
|
393 | *
|
394 | * The first time the callback runs will be before the initial `onMount`.
|
395 | *
|
396 | * In runes mode use `$effect.pre` instead.
|
397 | *
|
398 | * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead
|
399 | * */
|
400 | export function beforeUpdate(fn: () => void): void;
|
401 | /**
|
402 | * Schedules a callback to run immediately after the component has been updated.
|
403 | *
|
404 | * The first time the callback runs will be after the initial `onMount`.
|
405 | *
|
406 | * In runes mode use `$effect` instead.
|
407 | *
|
408 | * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
|
409 | * */
|
410 | export function afterUpdate(fn: () => void): void;
|
411 | /**
|
412 | * Synchronously flushes any pending state changes and those that result from it.
|
413 | * */
|
414 | export function flushSync(fn?: (() => void) | undefined): void;
|
415 | /**
|
416 | * Create a snippet programmatically
|
417 | * */
|
418 | export function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {
|
419 | render: () => string;
|
420 | setup?: (element: Element) => void | (() => void);
|
421 | }): Snippet<Params>;
|
422 | /** Anything except a function */
|
423 | type NotFunction<T> = T extends Function ? never : T;
|
424 | /**
|
425 | * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
|
426 | * Transitions will play during the initial render unless the `intro` option is set to `false`.
|
427 | *
|
428 | * */
|
429 | export function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exports;
|
430 | /**
|
431 | * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
|
432 | *
|
433 | * */
|
434 | export function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {
|
435 | target: Document | Element | ShadowRoot;
|
436 | props?: Props;
|
437 | events?: Record<string, (e: any) => any>;
|
438 | context?: Map<any, any>;
|
439 | intro?: boolean;
|
440 | recover?: boolean;
|
441 | } : {
|
442 | target: Document | Element | ShadowRoot;
|
443 | props: Props;
|
444 | events?: Record<string, (e: any) => any>;
|
445 | context?: Map<any, any>;
|
446 | intro?: boolean;
|
447 | recover?: boolean;
|
448 | }): Exports;
|
449 | /**
|
450 | * Unmounts a component that was previously mounted using `mount` or `hydrate`.
|
451 | *
|
452 | * 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.
|
453 | *
|
454 | * Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`).
|
455 | *
|
456 | * ```js
|
457 | * import { mount, unmount } from 'svelte';
|
458 | * import App from './App.svelte';
|
459 | *
|
460 | * const app = mount(App, { target: document.body });
|
461 | *
|
462 | * // later...
|
463 | * unmount(app, { outro: true });
|
464 | * ```
|
465 | * */
|
466 | export function unmount(component: Record<string, any>, options?: {
|
467 | outro?: boolean;
|
468 | } | undefined): Promise<void>;
|
469 | /**
|
470 | * Returns a promise that resolves once any pending state changes have been applied.
|
471 | * */
|
472 | export function tick(): Promise<void>;
|
473 | /**
|
474 | * When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
|
475 | * any state read inside `fn` will not be treated as a dependency.
|
476 | *
|
477 | * ```ts
|
478 | * $effect(() => {
|
479 | * // this will run when `data` changes, but not when `time` changes
|
480 | * save(data, {
|
481 | * timestamp: untrack(() => time)
|
482 | * });
|
483 | * });
|
484 | * ```
|
485 | * */
|
486 | export function untrack<T>(fn: () => T): T;
|
487 | /**
|
488 | * Retrieves the context that belongs to the closest parent component with the specified `key`.
|
489 | * Must be called during component initialisation.
|
490 | *
|
491 | * */
|
492 | export function getContext<T>(key: any): T;
|
493 | /**
|
494 | * Associates an arbitrary `context` object with the current component and the specified `key`
|
495 | * and returns that object. The context is then available to children of the component
|
496 | * (including slotted content) with `getContext`.
|
497 | *
|
498 | * Like lifecycle functions, this must be called during component initialisation.
|
499 | *
|
500 | * */
|
501 | export function setContext<T>(key: any, context: T): T;
|
502 | /**
|
503 | * Checks whether a given `key` has been set in the context of a parent component.
|
504 | * Must be called during component initialisation.
|
505 | *
|
506 | * */
|
507 | export function hasContext(key: any): boolean;
|
508 | /**
|
509 | * Retrieves the whole context map that belongs to the closest parent component.
|
510 | * Must be called during component initialisation. Useful, for example, if you
|
511 | * programmatically create a component and want to pass the existing context to it.
|
512 | *
|
513 | * */
|
514 | export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
|
515 | type Getters<T> = {
|
516 | [K in keyof T]: () => T[K];
|
517 | };
|
518 |
|
519 | export {};
|
520 | }
|
521 |
|
522 | declare module 'svelte/action' {
|
523 | /**
|
524 | * Actions can return an object containing the two properties defined in this interface. Both are optional.
|
525 | * - update: An action can have a parameter. This method will be called whenever that parameter changes,
|
526 | * immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
|
527 | * mean that the action accepts no parameters.
|
528 | * - destroy: Method that is called after the element is unmounted
|
529 | *
|
530 | * Additionally, you can specify which additional attributes and events the action enables on the applied element.
|
531 | * This applies to TypeScript typings only and has no effect at runtime.
|
532 | *
|
533 | * Example usage:
|
534 | * ```ts
|
535 | * interface Attributes {
|
536 | * newprop?: string;
|
537 | * 'on:event': (e: CustomEvent<boolean>) => void;
|
538 | * }
|
539 | *
|
540 | * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
|
541 | * // ...
|
542 | * return {
|
543 | * update: (updatedParameter) => {...},
|
544 | * destroy: () => {...}
|
545 | * };
|
546 | * }
|
547 | * ```
|
548 | */
|
549 | export interface ActionReturn<
|
550 | Parameter = undefined,
|
551 | Attributes extends Record<string, any> = Record<never, any>
|
552 | > {
|
553 | update?: (parameter: Parameter) => void;
|
554 | destroy?: () => void;
|
555 | /**
|
556 | * ### DO NOT USE THIS
|
557 | * This exists solely for type-checking and has no effect at runtime.
|
558 | * Set this through the `Attributes` generic instead.
|
559 | */
|
560 | $$_attributes?: Attributes;
|
561 | }
|
562 |
|
563 | /**
|
564 | * Actions are functions that are called when an element is created.
|
565 | * You can use this interface to type such actions.
|
566 | * The following example defines an action that only works on `<div>` elements
|
567 | * and optionally accepts a parameter which it has a default value for:
|
568 | * ```ts
|
569 | * export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
|
570 | * // ...
|
571 | * }
|
572 | * ```
|
573 | * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
|
574 | *
|
575 | * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
|
576 | * See interface `ActionReturn` for more details.
|
577 | */
|
578 | export interface Action<
|
579 | Element = HTMLElement,
|
580 | Parameter = undefined,
|
581 | Attributes extends Record<string, any> = Record<never, any>
|
582 | > {
|
583 | <Node extends Element>(
|
584 | ...args: undefined extends Parameter
|
585 | ? [node: Node, parameter?: Parameter]
|
586 | : [node: Node, parameter: Parameter]
|
587 | ): void | ActionReturn<Parameter, Attributes>;
|
588 | }
|
589 |
|
590 | // Implementation notes:
|
591 | // - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
|
592 |
|
593 | export {};
|
594 | }
|
595 |
|
596 | declare module 'svelte/animate' {
|
597 | // todo: same as Transition, should it be shared?
|
598 | export interface AnimationConfig {
|
599 | delay?: number;
|
600 | duration?: number;
|
601 | easing?: (t: number) => number;
|
602 | css?: (t: number, u: number) => string;
|
603 | tick?: (t: number, u: number) => void;
|
604 | }
|
605 |
|
606 | export interface FlipParams {
|
607 | delay?: number;
|
608 | duration?: number | ((len: number) => number);
|
609 | easing?: (t: number) => number;
|
610 | }
|
611 | /**
|
612 | * The flip function calculates the start and end position of an element and animates between them, translating the x and y values.
|
613 | * `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
|
614 | *
|
615 | * */
|
616 | export function flip(node: Element, { from, to }: {
|
617 | from: DOMRect;
|
618 | to: DOMRect;
|
619 | }, params?: FlipParams): AnimationConfig;
|
620 |
|
621 | export {};
|
622 | }
|
623 |
|
624 | declare module 'svelte/compiler' {
|
625 | import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
|
626 | import type { SourceMap } from 'magic-string';
|
627 | import type { Location } from 'locate-character';
|
628 | /**
|
629 | * `compile` converts your `.svelte` source code into a JavaScript module that exports a component
|
630 | *
|
631 | * @param source The component source code
|
632 | * @param options The compiler options
|
633 | * */
|
634 | export function compile(source: string, options: CompileOptions): CompileResult;
|
635 | /**
|
636 | * `compileModule` takes your JavaScript source code containing runes, and turns it into a JavaScript module.
|
637 | *
|
638 | * @param source The component source code
|
639 | * */
|
640 | export function compileModule(source: string, options: ModuleCompileOptions): CompileResult;
|
641 | /**
|
642 | * The parse function parses a component, returning only its abstract syntax tree.
|
643 | *
|
644 | * The `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST.
|
645 | * `modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.
|
646 | *
|
647 | * */
|
648 | export function parse(source: string, options: {
|
649 | filename?: string;
|
650 | modern: true;
|
651 | loose?: boolean;
|
652 | }): AST.Root;
|
653 | /**
|
654 | * The parse function parses a component, returning only its abstract syntax tree.
|
655 | *
|
656 | * The `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST.
|
657 | * `modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.
|
658 | *
|
659 | * */
|
660 | export function parse(source: string, options?: {
|
661 | filename?: string;
|
662 | modern?: false;
|
663 | loose?: boolean;
|
664 | } | undefined): Record<string, any>;
|
665 | /**
|
666 | * @deprecated Replace this with `import { walk } from 'estree-walker'`
|
667 | * */
|
668 | export function walk(): never;
|
669 | /**
|
670 | * The result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged.
|
671 | */
|
672 | export interface Processed {
|
673 | /**
|
674 | * The new code
|
675 | */
|
676 | code: string;
|
677 | /**
|
678 | * A source map mapping back to the original code
|
679 | */
|
680 | map?: string | object; // we are opaque with the type here to avoid dependency on the remapping module for our public types.
|
681 | /**
|
682 | * A list of additional files to watch for changes
|
683 | */
|
684 | dependencies?: string[];
|
685 | /**
|
686 | * Only for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged.
|
687 | */
|
688 | attributes?: Record<string, string | boolean>;
|
689 | toString?: () => string;
|
690 | }
|
691 |
|
692 | /**
|
693 | * A markup preprocessor that takes a string of code and returns a processed version.
|
694 | */
|
695 | export type MarkupPreprocessor = (options: {
|
696 | /**
|
697 | * The whole Svelte file content
|
698 | */
|
699 | content: string;
|
700 | /**
|
701 | * The filename of the Svelte file
|
702 | */
|
703 | filename?: string;
|
704 | }) => Processed | void | Promise<Processed | void>;
|
705 |
|
706 | /**
|
707 | * A script/style preprocessor that takes a string of code and returns a processed version.
|
708 | */
|
709 | export type Preprocessor = (options: {
|
710 | /**
|
711 | * The script/style tag content
|
712 | */
|
713 | content: string;
|
714 | /**
|
715 | * The attributes on the script/style tag
|
716 | */
|
717 | attributes: Record<string, string | boolean>;
|
718 | /**
|
719 | * The whole Svelte file content
|
720 | */
|
721 | markup: string;
|
722 | /**
|
723 | * The filename of the Svelte file
|
724 | */
|
725 | filename?: string;
|
726 | }) => Processed | void | Promise<Processed | void>;
|
727 |
|
728 | /**
|
729 | * A preprocessor group is a set of preprocessors that are applied to a Svelte file.
|
730 | */
|
731 | export interface PreprocessorGroup {
|
732 | /** Name of the preprocessor. Will be a required option in the next major version */
|
733 | name?: string;
|
734 | markup?: MarkupPreprocessor;
|
735 | style?: Preprocessor;
|
736 | script?: Preprocessor;
|
737 | }
|
738 | /** The return value of `compile` from `svelte/compiler` */
|
739 | export interface CompileResult {
|
740 | /** The compiled JavaScript */
|
741 | js: {
|
742 | /** The generated code */
|
743 | code: string;
|
744 | /** A source map */
|
745 | map: SourceMap;
|
746 | };
|
747 | /** The compiled CSS */
|
748 | css: null | {
|
749 | /** The generated code */
|
750 | code: string;
|
751 | /** A source map */
|
752 | map: SourceMap;
|
753 | };
|
754 | /**
|
755 | * An array of warning objects that were generated during compilation. Each warning has several properties:
|
756 | * - `code` is a string identifying the category of warning
|
757 | * - `message` describes the issue in human-readable terms
|
758 | * - `start` and `end`, if the warning relates to a specific location, are objects with `line`, `column` and `character` properties
|
759 | */
|
760 | warnings: Warning[];
|
761 | /**
|
762 | * Metadata about the compiled component
|
763 | */
|
764 | metadata: {
|
765 | /**
|
766 | * Whether the file was compiled in runes mode, either because of an explicit option or inferred from usage.
|
767 | * For `compileModule`, this is always `true`
|
768 | */
|
769 | runes: boolean;
|
770 | };
|
771 | /** The AST */
|
772 | ast: any;
|
773 | }
|
774 |
|
775 | export interface Warning extends ICompileDiagnostic {}
|
776 |
|
777 | export interface CompileError extends ICompileDiagnostic {}
|
778 |
|
779 | type CssHashGetter = (args: {
|
780 | name: string;
|
781 | filename: string;
|
782 | css: string;
|
783 | hash: (input: string) => string;
|
784 | }) => string;
|
785 |
|
786 | export interface CompileOptions extends ModuleCompileOptions {
|
787 | /**
|
788 | * Sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope).
|
789 | * If unspecified, will be inferred from `filename`
|
790 | */
|
791 | name?: string;
|
792 | /**
|
793 | * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
|
794 | *
|
795 | * @default false
|
796 | */
|
797 | customElement?: boolean;
|
798 | /**
|
799 | * 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`.
|
800 | *
|
801 | * @default false
|
802 | * @deprecated This will have no effect in runes mode
|
803 | */
|
804 | accessors?: boolean;
|
805 | /**
|
806 | * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`.
|
807 | *
|
808 | * @default 'html'
|
809 | */
|
810 | namespace?: Namespace;
|
811 | /**
|
812 | * If `true`, tells the compiler that you promise not to mutate any objects.
|
813 | * This allows it to be less conservative about checking whether values have changed.
|
814 | *
|
815 | * @default false
|
816 | * @deprecated This will have no effect in runes mode
|
817 | */
|
818 | immutable?: boolean;
|
819 | /**
|
820 | * - `'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.
|
821 | * - `'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.
|
822 | * This is always `'injected'` when compiling with `customElement` mode.
|
823 | */
|
824 | css?: 'injected' | 'external';
|
825 | /**
|
826 | * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
|
827 | * It defaults to returning `svelte-${hash(css)}`.
|
828 | *
|
829 | * @default undefined
|
830 | */
|
831 | cssHash?: CssHashGetter;
|
832 | /**
|
833 | * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
|
834 | *
|
835 | * @default false
|
836 | */
|
837 | preserveComments?: boolean;
|
838 | /**
|
839 | * If `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.
|
840 | *
|
841 | * @default false
|
842 | */
|
843 | preserveWhitespace?: boolean;
|
844 | /**
|
845 | * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
|
846 | * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
|
847 | * Set to `undefined` (the default) to infer runes mode from the component code.
|
848 | * Is always `true` for JS/TS modules compiled with Svelte.
|
849 | * Will be `true` by default in Svelte 6.
|
850 | * Note that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`,
|
851 | * 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.
|
852 | * @default undefined
|
853 | */
|
854 | runes?: boolean | undefined;
|
855 | /**
|
856 | * If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
|
857 | *
|
858 | * @default true
|
859 | */
|
860 | discloseVersion?: boolean;
|
861 | /**
|
862 | * @deprecated Use these only as a temporary solution before migrating your code
|
863 | */
|
864 | compatibility?: {
|
865 | /**
|
866 | * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —
|
867 | * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`)
|
868 | * or as an object with a `.render(...)` method when compiling for the server
|
869 | * @default 5
|
870 | */
|
871 | componentApi?: 4 | 5;
|
872 | };
|
873 | /**
|
874 | * An initial sourcemap that will be merged into the final output sourcemap.
|
875 | * This is usually the preprocessor sourcemap.
|
876 | *
|
877 | * @default null
|
878 | */
|
879 | sourcemap?: object | string;
|
880 | /**
|
881 | * Used for your JavaScript sourcemap.
|
882 | *
|
883 | * @default null
|
884 | */
|
885 | outputFilename?: string;
|
886 | /**
|
887 | * Used for your CSS sourcemap.
|
888 | *
|
889 | * @default null
|
890 | */
|
891 | cssOutputFilename?: string;
|
892 | /**
|
893 | * If `true`, compiles components with hot reloading support.
|
894 | *
|
895 | * @default false
|
896 | */
|
897 | hmr?: boolean;
|
898 | /**
|
899 | * If `true`, returns the modern version of the AST.
|
900 | * Will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.
|
901 | *
|
902 | * @default false
|
903 | */
|
904 | modernAst?: boolean;
|
905 | }
|
906 |
|
907 | export interface ModuleCompileOptions {
|
908 | /**
|
909 | * If `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development.
|
910 | *
|
911 | * @default false
|
912 | */
|
913 | dev?: boolean;
|
914 | /**
|
915 | * If `"client"`, Svelte emits code designed to run in the browser.
|
916 | * If `"server"`, Svelte emits code suitable for server-side rendering.
|
917 | * If `false`, nothing is generated. Useful for tooling that is only interested in warnings.
|
918 | *
|
919 | * @default 'client'
|
920 | */
|
921 | generate?: 'client' | 'server' | false;
|
922 | /**
|
923 | * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
|
924 | */
|
925 | filename?: string;
|
926 | /**
|
927 | * Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically.
|
928 | * @default process.cwd() on node-like environments, undefined elsewhere
|
929 | */
|
930 | rootDir?: string;
|
931 | /**
|
932 | * A function that gets a `Warning` as an argument and returns a boolean.
|
933 | * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
|
934 | */
|
935 | warningFilter?: (warning: Warning) => boolean;
|
936 | }
|
937 | /**
|
938 | * - `html` — the default, for e.g. `<div>` or `<span>`
|
939 | * - `svg` — for e.g. `<svg>` or `<g>`
|
940 | * - `mathml` — for e.g. `<math>` or `<mrow>`
|
941 | */
|
942 | type Namespace = 'html' | 'svg' | 'mathml';
|
943 |
|
944 | export namespace AST {
|
945 | export interface BaseNode {
|
946 | type: string;
|
947 | start: number;
|
948 | end: number;
|
949 | }
|
950 |
|
951 | export interface Fragment {
|
952 | type: 'Fragment';
|
953 | nodes: Array<Text | Tag | ElementLike | Block | Comment>;
|
954 | }
|
955 |
|
956 | export interface Root extends BaseNode {
|
957 | type: 'Root';
|
958 | /**
|
959 | * Inline options provided by `<svelte:options>` — these override options passed to `compile(...)`
|
960 | */
|
961 | options: SvelteOptions | null;
|
962 | fragment: Fragment;
|
963 | /** The parsed `<style>` element, if exists */
|
964 | css: AST.CSS.StyleSheet | null;
|
965 | /** The parsed `<script>` element, if exists */
|
966 | instance: Script | null;
|
967 | /** The parsed `<script module>` element, if exists */
|
968 | module: Script | null;
|
969 | }
|
970 |
|
971 | export interface SvelteOptions {
|
972 | // start/end info (needed for warnings and for our Prettier plugin)
|
973 | start: number;
|
974 | end: number;
|
975 | // options
|
976 | runes?: boolean;
|
977 | immutable?: boolean;
|
978 | accessors?: boolean;
|
979 | preserveWhitespace?: boolean;
|
980 | namespace?: Namespace;
|
981 | css?: 'injected';
|
982 | customElement?: {
|
983 | tag?: string;
|
984 | shadow?: 'open' | 'none';
|
985 | props?: Record<
|
986 | string,
|
987 | {
|
988 | attribute?: string;
|
989 | reflect?: boolean;
|
990 | type?: 'Array' | 'Boolean' | 'Number' | 'Object' | 'String';
|
991 | }
|
992 | >;
|
993 | /**
|
994 | * Is of type
|
995 | * ```ts
|
996 | * (ceClass: new () => HTMLElement) => new () => HTMLElement
|
997 | * ```
|
998 | */
|
999 | extend?: ArrowFunctionExpression | Identifier;
|
1000 | };
|
1001 | attributes: Attribute[];
|
1002 | }
|
1003 |
|
1004 | /** Static text */
|
1005 | export interface Text extends BaseNode {
|
1006 | type: 'Text';
|
1007 | /** Text with decoded HTML entities */
|
1008 | data: string;
|
1009 | /** The original text, with undecoded HTML entities */
|
1010 | raw: string;
|
1011 | }
|
1012 |
|
1013 | /** A (possibly reactive) template expression — `{...}` */
|
1014 | export interface ExpressionTag extends BaseNode {
|
1015 | type: 'ExpressionTag';
|
1016 | expression: Expression;
|
1017 | }
|
1018 |
|
1019 | /** A (possibly reactive) HTML template expression — `{@html ...}` */
|
1020 | export interface HtmlTag extends BaseNode {
|
1021 | type: 'HtmlTag';
|
1022 | expression: Expression;
|
1023 | }
|
1024 |
|
1025 | /** An HTML comment */
|
1026 | // TODO rename to disambiguate
|
1027 | export interface Comment extends BaseNode {
|
1028 | type: 'Comment';
|
1029 | /** the contents of the comment */
|
1030 | data: string;
|
1031 | }
|
1032 |
|
1033 | /** A `{@const ...}` tag */
|
1034 | export interface ConstTag extends BaseNode {
|
1035 | type: 'ConstTag';
|
1036 | declaration: VariableDeclaration & {
|
1037 | declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
|
1038 | };
|
1039 | }
|
1040 |
|
1041 | /** A `{@debug ...}` tag */
|
1042 | export interface DebugTag extends BaseNode {
|
1043 | type: 'DebugTag';
|
1044 | identifiers: Identifier[];
|
1045 | }
|
1046 |
|
1047 | /** A `{@render foo(...)} tag */
|
1048 | export interface RenderTag extends BaseNode {
|
1049 | type: 'RenderTag';
|
1050 | expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
|
1051 | }
|
1052 |
|
1053 | /** An `animate:` directive */
|
1054 | export interface AnimateDirective extends BaseNode {
|
1055 | type: 'AnimateDirective';
|
1056 | /** The 'x' in `animate:x` */
|
1057 | name: string;
|
1058 | /** The y in `animate:x={y}` */
|
1059 | expression: null | Expression;
|
1060 | }
|
1061 |
|
1062 | /** A `bind:` directive */
|
1063 | export interface BindDirective extends BaseNode {
|
1064 | type: 'BindDirective';
|
1065 | /** The 'x' in `bind:x` */
|
1066 | name: string;
|
1067 | /** The y in `bind:x={y}` */
|
1068 | expression: Identifier | MemberExpression | SequenceExpression;
|
1069 | }
|
1070 |
|
1071 | /** A `class:` directive */
|
1072 | export interface ClassDirective extends BaseNode {
|
1073 | type: 'ClassDirective';
|
1074 | /** The 'x' in `class:x` */
|
1075 | name: 'class';
|
1076 | /** The 'y' in `class:x={y}`, or the `x` in `class:x` */
|
1077 | expression: Expression;
|
1078 | }
|
1079 |
|
1080 | /** A `let:` directive */
|
1081 | export interface LetDirective extends BaseNode {
|
1082 | type: 'LetDirective';
|
1083 | /** The 'x' in `let:x` */
|
1084 | name: string;
|
1085 | /** The 'y' in `let:x={y}` */
|
1086 | expression: null | Identifier | ArrayExpression | ObjectExpression;
|
1087 | }
|
1088 |
|
1089 | /** An `on:` directive */
|
1090 | export interface OnDirective extends BaseNode {
|
1091 | type: 'OnDirective';
|
1092 | /** The 'x' in `on:x` */
|
1093 | name: string;
|
1094 | /** The 'y' in `on:x={y}` */
|
1095 | expression: null | Expression;
|
1096 | modifiers: string[];
|
1097 | }
|
1098 |
|
1099 | /** A `style:` directive */
|
1100 | export interface StyleDirective extends BaseNode {
|
1101 | type: 'StyleDirective';
|
1102 | /** The 'x' in `style:x` */
|
1103 | name: string;
|
1104 | /** The 'y' in `style:x={y}` */
|
1105 | value: true | ExpressionTag | Array<ExpressionTag | Text>;
|
1106 | modifiers: Array<'important'>;
|
1107 | }
|
1108 |
|
1109 | // TODO have separate in/out/transition directives
|
1110 | /** A `transition:`, `in:` or `out:` directive */
|
1111 | export interface TransitionDirective extends BaseNode {
|
1112 | type: 'TransitionDirective';
|
1113 | /** The 'x' in `transition:x` */
|
1114 | name: string;
|
1115 | /** The 'y' in `transition:x={y}` */
|
1116 | expression: null | Expression;
|
1117 | modifiers: Array<'local' | 'global'>;
|
1118 | /** True if this is a `transition:` or `in:` directive */
|
1119 | intro: boolean;
|
1120 | /** True if this is a `transition:` or `out:` directive */
|
1121 | outro: boolean;
|
1122 | }
|
1123 |
|
1124 | /** A `use:` directive */
|
1125 | export interface UseDirective extends BaseNode {
|
1126 | type: 'UseDirective';
|
1127 | /** The 'x' in `use:x` */
|
1128 | name: string;
|
1129 | /** The 'y' in `use:x={y}` */
|
1130 | expression: null | Expression;
|
1131 | }
|
1132 |
|
1133 | interface BaseElement extends BaseNode {
|
1134 | name: string;
|
1135 | attributes: Array<Attribute | SpreadAttribute | Directive>;
|
1136 | fragment: Fragment;
|
1137 | }
|
1138 |
|
1139 | export interface Component extends BaseElement {
|
1140 | type: 'Component';
|
1141 | }
|
1142 |
|
1143 | export interface TitleElement extends BaseElement {
|
1144 | type: 'TitleElement';
|
1145 | name: 'title';
|
1146 | }
|
1147 |
|
1148 | export interface SlotElement extends BaseElement {
|
1149 | type: 'SlotElement';
|
1150 | name: 'slot';
|
1151 | }
|
1152 |
|
1153 | export interface RegularElement extends BaseElement {
|
1154 | type: 'RegularElement';
|
1155 | }
|
1156 |
|
1157 | export interface SvelteBody extends BaseElement {
|
1158 | type: 'SvelteBody';
|
1159 | name: 'svelte:body';
|
1160 | }
|
1161 |
|
1162 | export interface SvelteComponent extends BaseElement {
|
1163 | type: 'SvelteComponent';
|
1164 | name: 'svelte:component';
|
1165 | expression: Expression;
|
1166 | }
|
1167 |
|
1168 | export interface SvelteDocument extends BaseElement {
|
1169 | type: 'SvelteDocument';
|
1170 | name: 'svelte:document';
|
1171 | }
|
1172 |
|
1173 | export interface SvelteElement extends BaseElement {
|
1174 | type: 'SvelteElement';
|
1175 | name: 'svelte:element';
|
1176 | tag: Expression;
|
1177 | }
|
1178 |
|
1179 | export interface SvelteFragment extends BaseElement {
|
1180 | type: 'SvelteFragment';
|
1181 | name: 'svelte:fragment';
|
1182 | }
|
1183 |
|
1184 | export interface SvelteBoundary extends BaseElement {
|
1185 | type: 'SvelteBoundary';
|
1186 | name: 'svelte:boundary';
|
1187 | }
|
1188 |
|
1189 | export interface SvelteHead extends BaseElement {
|
1190 | type: 'SvelteHead';
|
1191 | name: 'svelte:head';
|
1192 | }
|
1193 |
|
1194 | /** This is only an intermediate representation while parsing, it doesn't exist in the final AST */
|
1195 | export interface SvelteOptionsRaw extends BaseElement {
|
1196 | type: 'SvelteOptions';
|
1197 | name: 'svelte:options';
|
1198 | }
|
1199 |
|
1200 | export interface SvelteSelf extends BaseElement {
|
1201 | type: 'SvelteSelf';
|
1202 | name: 'svelte:self';
|
1203 | }
|
1204 |
|
1205 | export interface SvelteWindow extends BaseElement {
|
1206 | type: 'SvelteWindow';
|
1207 | name: 'svelte:window';
|
1208 | }
|
1209 |
|
1210 | /** An `{#each ...}` block */
|
1211 | export interface EachBlock extends BaseNode {
|
1212 | type: 'EachBlock';
|
1213 | expression: Expression;
|
1214 | /** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */
|
1215 | context: Pattern | null;
|
1216 | body: Fragment;
|
1217 | fallback?: Fragment;
|
1218 | index?: string;
|
1219 | key?: Expression;
|
1220 | }
|
1221 |
|
1222 | /** An `{#if ...}` block */
|
1223 | export interface IfBlock extends BaseNode {
|
1224 | type: 'IfBlock';
|
1225 | elseif: boolean;
|
1226 | test: Expression;
|
1227 | consequent: Fragment;
|
1228 | alternate: Fragment | null;
|
1229 | }
|
1230 |
|
1231 | /** An `{#await ...}` block */
|
1232 | export interface AwaitBlock extends BaseNode {
|
1233 | type: 'AwaitBlock';
|
1234 | expression: Expression;
|
1235 | // TODO can/should we move these inside the ThenBlock and CatchBlock?
|
1236 | /** The resolved value inside the `then` block */
|
1237 | value: Pattern | null;
|
1238 | /** The rejection reason inside the `catch` block */
|
1239 | error: Pattern | null;
|
1240 | pending: Fragment | null;
|
1241 | then: Fragment | null;
|
1242 | catch: Fragment | null;
|
1243 | }
|
1244 |
|
1245 | export interface KeyBlock extends BaseNode {
|
1246 | type: 'KeyBlock';
|
1247 | expression: Expression;
|
1248 | fragment: Fragment;
|
1249 | }
|
1250 |
|
1251 | export interface SnippetBlock extends BaseNode {
|
1252 | type: 'SnippetBlock';
|
1253 | expression: Identifier;
|
1254 | parameters: Pattern[];
|
1255 | body: Fragment;
|
1256 | }
|
1257 |
|
1258 | export interface Attribute extends BaseNode {
|
1259 | type: 'Attribute';
|
1260 | name: string;
|
1261 | /**
|
1262 | * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"`
|
1263 | */
|
1264 | value: true | ExpressionTag | Array<Text | ExpressionTag>;
|
1265 | }
|
1266 |
|
1267 | export interface SpreadAttribute extends BaseNode {
|
1268 | type: 'SpreadAttribute';
|
1269 | expression: Expression;
|
1270 | }
|
1271 |
|
1272 | export interface Script extends BaseNode {
|
1273 | type: 'Script';
|
1274 | context: 'default' | 'module';
|
1275 | content: Program;
|
1276 | attributes: Attribute[];
|
1277 | }
|
1278 |
|
1279 | export type AttributeLike = Attribute | SpreadAttribute | Directive;
|
1280 |
|
1281 | export type Directive =
|
1282 | | AST.AnimateDirective
|
1283 | | AST.BindDirective
|
1284 | | AST.ClassDirective
|
1285 | | AST.LetDirective
|
1286 | | AST.OnDirective
|
1287 | | AST.StyleDirective
|
1288 | | AST.TransitionDirective
|
1289 | | AST.UseDirective;
|
1290 |
|
1291 | export type Block =
|
1292 | | AST.EachBlock
|
1293 | | AST.IfBlock
|
1294 | | AST.AwaitBlock
|
1295 | | AST.KeyBlock
|
1296 | | AST.SnippetBlock;
|
1297 |
|
1298 | export type ElementLike =
|
1299 | | AST.Component
|
1300 | | AST.TitleElement
|
1301 | | AST.SlotElement
|
1302 | | AST.RegularElement
|
1303 | | AST.SvelteBody
|
1304 | | AST.SvelteBoundary
|
1305 | | AST.SvelteComponent
|
1306 | | AST.SvelteDocument
|
1307 | | AST.SvelteElement
|
1308 | | AST.SvelteFragment
|
1309 | | AST.SvelteHead
|
1310 | | AST.SvelteOptionsRaw
|
1311 | | AST.SvelteSelf
|
1312 | | AST.SvelteWindow
|
1313 | | AST.SvelteBoundary;
|
1314 |
|
1315 | export type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
|
1316 |
|
1317 | export type TemplateNode =
|
1318 | | AST.Root
|
1319 | | AST.Text
|
1320 | | Tag
|
1321 | | ElementLike
|
1322 | | AST.Attribute
|
1323 | | AST.SpreadAttribute
|
1324 | | Directive
|
1325 | | AST.Comment
|
1326 | | Block;
|
1327 |
|
1328 | export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node;
|
1329 |
|
1330 | export type { _CSS as CSS };
|
1331 | }
|
1332 | /**
|
1333 | * The preprocess function provides convenient hooks for arbitrarily transforming component source code.
|
1334 | * For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
|
1335 | *
|
1336 | * */
|
1337 | export function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {
|
1338 | filename?: string;
|
1339 | } | undefined): Promise<Processed>;
|
1340 | /**
|
1341 | * The current version, as set in package.json.
|
1342 | *
|
1343 | * https://svelte.dev/docs/svelte-compiler#svelte-version
|
1344 | * */
|
1345 | export const VERSION: string;
|
1346 | /**
|
1347 | * Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
|
1348 | * May throw an error if the code is too complex to migrate automatically.
|
1349 | *
|
1350 | * */
|
1351 | export function migrate(source: string, { filename, use_ts }?: {
|
1352 | filename?: string;
|
1353 | use_ts?: boolean;
|
1354 | } | undefined): {
|
1355 | code: string;
|
1356 | };
|
1357 | type ICompileDiagnostic = {
|
1358 | code: string;
|
1359 | message: string;
|
1360 | stack?: string;
|
1361 | filename?: string;
|
1362 | start?: Location;
|
1363 | end?: Location;
|
1364 | position?: [number, number];
|
1365 | frame?: string;
|
1366 | };
|
1367 | namespace _CSS {
|
1368 | export interface BaseNode {
|
1369 | start: number;
|
1370 | end: number;
|
1371 | }
|
1372 |
|
1373 | export interface StyleSheet extends BaseNode {
|
1374 | type: 'StyleSheet';
|
1375 | attributes: any[]; // TODO
|
1376 | children: Array<Atrule | Rule>;
|
1377 | content: {
|
1378 | start: number;
|
1379 | end: number;
|
1380 | styles: string;
|
1381 | /** Possible comment atop the style tag */
|
1382 | comment: AST.Comment | null;
|
1383 | };
|
1384 | }
|
1385 |
|
1386 | export interface Atrule extends BaseNode {
|
1387 | type: 'Atrule';
|
1388 | name: string;
|
1389 | prelude: string;
|
1390 | block: Block | null;
|
1391 | }
|
1392 |
|
1393 | export interface Rule extends BaseNode {
|
1394 | type: 'Rule';
|
1395 | prelude: SelectorList;
|
1396 | block: Block;
|
1397 | }
|
1398 |
|
1399 | /**
|
1400 | * A list of selectors, e.g. `a, b, c {}`
|
1401 | */
|
1402 | export interface SelectorList extends BaseNode {
|
1403 | type: 'SelectorList';
|
1404 | /**
|
1405 | * The `a`, `b` and `c` in `a, b, c {}`
|
1406 | */
|
1407 | children: ComplexSelector[];
|
1408 | }
|
1409 |
|
1410 | /**
|
1411 | * A complex selector, e.g. `a b c {}`
|
1412 | */
|
1413 | export interface ComplexSelector extends BaseNode {
|
1414 | type: 'ComplexSelector';
|
1415 | /**
|
1416 | * The `a`, `b` and `c` in `a b c {}`
|
1417 | */
|
1418 | children: RelativeSelector[];
|
1419 | }
|
1420 |
|
1421 | /**
|
1422 | * A relative selector, e.g the `a` and `> b` in `a > b {}`
|
1423 | */
|
1424 | export interface RelativeSelector extends BaseNode {
|
1425 | type: 'RelativeSelector';
|
1426 | /**
|
1427 | * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
|
1428 | */
|
1429 | combinator: null | Combinator;
|
1430 | /**
|
1431 | * The `b:is(...)` in `> b:is(...)`
|
1432 | */
|
1433 | selectors: SimpleSelector[];
|
1434 | }
|
1435 |
|
1436 | export interface TypeSelector extends BaseNode {
|
1437 | type: 'TypeSelector';
|
1438 | name: string;
|
1439 | }
|
1440 |
|
1441 | export interface IdSelector extends BaseNode {
|
1442 | type: 'IdSelector';
|
1443 | name: string;
|
1444 | }
|
1445 |
|
1446 | export interface ClassSelector extends BaseNode {
|
1447 | type: 'ClassSelector';
|
1448 | name: string;
|
1449 | }
|
1450 |
|
1451 | export interface AttributeSelector extends BaseNode {
|
1452 | type: 'AttributeSelector';
|
1453 | name: string;
|
1454 | matcher: string | null;
|
1455 | value: string | null;
|
1456 | flags: string | null;
|
1457 | }
|
1458 |
|
1459 | export interface PseudoElementSelector extends BaseNode {
|
1460 | type: 'PseudoElementSelector';
|
1461 | name: string;
|
1462 | }
|
1463 |
|
1464 | export interface PseudoClassSelector extends BaseNode {
|
1465 | type: 'PseudoClassSelector';
|
1466 | name: string;
|
1467 | args: SelectorList | null;
|
1468 | }
|
1469 |
|
1470 | export interface Percentage extends BaseNode {
|
1471 | type: 'Percentage';
|
1472 | value: string;
|
1473 | }
|
1474 |
|
1475 | export interface NestingSelector extends BaseNode {
|
1476 | type: 'NestingSelector';
|
1477 | name: '&';
|
1478 | }
|
1479 |
|
1480 | export interface Nth extends BaseNode {
|
1481 | type: 'Nth';
|
1482 | value: string;
|
1483 | }
|
1484 |
|
1485 | export type SimpleSelector =
|
1486 | | TypeSelector
|
1487 | | IdSelector
|
1488 | | ClassSelector
|
1489 | | AttributeSelector
|
1490 | | PseudoElementSelector
|
1491 | | PseudoClassSelector
|
1492 | | Percentage
|
1493 | | Nth
|
1494 | | NestingSelector;
|
1495 |
|
1496 | export interface Combinator extends BaseNode {
|
1497 | type: 'Combinator';
|
1498 | name: string;
|
1499 | }
|
1500 |
|
1501 | export interface Block extends BaseNode {
|
1502 | type: 'Block';
|
1503 | children: Array<Declaration | Rule | Atrule>;
|
1504 | }
|
1505 |
|
1506 | export interface Declaration extends BaseNode {
|
1507 | type: 'Declaration';
|
1508 | property: string;
|
1509 | value: string;
|
1510 | }
|
1511 |
|
1512 | // for zimmerframe
|
1513 | export type Node =
|
1514 | | StyleSheet
|
1515 | | Rule
|
1516 | | Atrule
|
1517 | | SelectorList
|
1518 | | Block
|
1519 | | ComplexSelector
|
1520 | | RelativeSelector
|
1521 | | Combinator
|
1522 | | SimpleSelector
|
1523 | | Declaration;
|
1524 | }
|
1525 |
|
1526 | export {};
|
1527 | }
|
1528 |
|
1529 | declare module 'svelte/easing' {
|
1530 | export function linear(t: number): number;
|
1531 |
|
1532 | export function backInOut(t: number): number;
|
1533 |
|
1534 | export function backIn(t: number): number;
|
1535 |
|
1536 | export function backOut(t: number): number;
|
1537 |
|
1538 | export function bounceOut(t: number): number;
|
1539 |
|
1540 | export function bounceInOut(t: number): number;
|
1541 |
|
1542 | export function bounceIn(t: number): number;
|
1543 |
|
1544 | export function circInOut(t: number): number;
|
1545 |
|
1546 | export function circIn(t: number): number;
|
1547 |
|
1548 | export function circOut(t: number): number;
|
1549 |
|
1550 | export function cubicInOut(t: number): number;
|
1551 |
|
1552 | export function cubicIn(t: number): number;
|
1553 |
|
1554 | export function cubicOut(t: number): number;
|
1555 |
|
1556 | export function elasticInOut(t: number): number;
|
1557 |
|
1558 | export function elasticIn(t: number): number;
|
1559 |
|
1560 | export function elasticOut(t: number): number;
|
1561 |
|
1562 | export function expoInOut(t: number): number;
|
1563 |
|
1564 | export function expoIn(t: number): number;
|
1565 |
|
1566 | export function expoOut(t: number): number;
|
1567 |
|
1568 | export function quadInOut(t: number): number;
|
1569 |
|
1570 | export function quadIn(t: number): number;
|
1571 |
|
1572 | export function quadOut(t: number): number;
|
1573 |
|
1574 | export function quartInOut(t: number): number;
|
1575 |
|
1576 | export function quartIn(t: number): number;
|
1577 |
|
1578 | export function quartOut(t: number): number;
|
1579 |
|
1580 | export function quintInOut(t: number): number;
|
1581 |
|
1582 | export function quintIn(t: number): number;
|
1583 |
|
1584 | export function quintOut(t: number): number;
|
1585 |
|
1586 | export function sineInOut(t: number): number;
|
1587 |
|
1588 | export function sineIn(t: number): number;
|
1589 |
|
1590 | export function sineOut(t: number): number;
|
1591 |
|
1592 | export {};
|
1593 | }
|
1594 |
|
1595 | declare module 'svelte/legacy' {
|
1596 | import type { ComponentConstructorOptions, SvelteComponent, ComponentType, Component } from 'svelte';
|
1597 | /**
|
1598 | * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
|
1599 | *
|
1600 | * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
|
1601 | *
|
1602 | * */
|
1603 | export function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {
|
1604 | component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
|
1605 | }): SvelteComponent<Props, Events, Slots> & Exports;
|
1606 | /**
|
1607 | * Takes the component function and returns a Svelte 4 compatible component constructor.
|
1608 | *
|
1609 | * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
|
1610 | *
|
1611 | * */
|
1612 | export function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots> | Component<Props>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;
|
1613 | /**
|
1614 | * Runs the given function once immediately on the server, and works like `$effect.pre` on the client.
|
1615 | *
|
1616 | * @deprecated Use this only as a temporary solution to migrate your component code to Svelte 5.
|
1617 | * */
|
1618 | export function run(fn: () => void | (() => void)): void;
|
1619 | /**
|
1620 | * Function to mimic the multiple listeners available in svelte 4
|
1621 | * @deprecated
|
1622 | * */
|
1623 | export function handlers(...handlers: EventListener[]): EventListener;
|
1624 | /**
|
1625 | * Function to create a `bubble` function that mimic the behavior of `on:click` without handler available in svelte 4.
|
1626 | * @deprecated Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.
|
1627 | */
|
1628 | export function createBubbler(): (type: string) => (event: Event) => boolean;
|
1629 | /**
|
1630 | * Support using the component as both a class and function during the transition period
|
1631 | */
|
1632 | export type LegacyComponentType = {
|
1633 | new (o: ComponentConstructorOptions): SvelteComponent;
|
1634 | (...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;
|
1635 | };
|
1636 | /**
|
1637 | * Substitute for the `trusted` event modifier
|
1638 | * @deprecated
|
1639 | * */
|
1640 | export function trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1641 | /**
|
1642 | * Substitute for the `self` event modifier
|
1643 | * @deprecated
|
1644 | * */
|
1645 | export function self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1646 | /**
|
1647 | * Substitute for the `stopPropagation` event modifier
|
1648 | * @deprecated
|
1649 | * */
|
1650 | export function stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1651 | /**
|
1652 | * Substitute for the `once` event modifier
|
1653 | * @deprecated
|
1654 | * */
|
1655 | export function once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1656 | /**
|
1657 | * Substitute for the `stopImmediatePropagation` event modifier
|
1658 | * @deprecated
|
1659 | * */
|
1660 | export function stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1661 | /**
|
1662 | * Substitute for the `preventDefault` event modifier
|
1663 | * @deprecated
|
1664 | * */
|
1665 | export function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
|
1666 | /**
|
1667 | * Substitute for the `passive` event modifier, implemented as an action
|
1668 | * @deprecated
|
1669 | * */
|
1670 | export function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
|
1671 | /**
|
1672 | * Substitute for the `nonpassive` event modifier, implemented as an action
|
1673 | * @deprecated
|
1674 | * */
|
1675 | export function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
|
1676 |
|
1677 | export {};
|
1678 | }
|
1679 |
|
1680 | declare module 'svelte/motion' {
|
1681 | import type { MediaQuery } from 'svelte/reactivity';
|
1682 | // TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
|
1683 | // this means both the Spring class and the Spring interface are merged into one with some things only
|
1684 | // existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
|
1685 |
|
1686 | export interface Spring<T> extends Readable<T> {
|
1687 | set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
|
1688 | /**
|
1689 | * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
|
1690 | */
|
1691 | update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
|
1692 | /**
|
1693 | * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
|
1694 | */
|
1695 | subscribe(fn: (value: T) => void): Unsubscriber;
|
1696 | precision: number;
|
1697 | damping: number;
|
1698 | stiffness: number;
|
1699 | }
|
1700 |
|
1701 | /**
|
1702 | * A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to
|
1703 | * move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.
|
1704 | *
|
1705 | * ```svelte
|
1706 | * <script>
|
1707 | * import { Spring } from 'svelte/motion';
|
1708 | *
|
1709 | * const spring = new Spring(0);
|
1710 | * </script>
|
1711 | *
|
1712 | * <input type="range" bind:value={spring.target} />
|
1713 | * <input type="range" bind:value={spring.current} disabled />
|
1714 | * ```
|
1715 | * @since 5.8.0
|
1716 | */
|
1717 | export class Spring<T> {
|
1718 | constructor(value: T, options?: SpringOpts);
|
1719 |
|
1720 | /**
|
1721 | * Create a spring whose value is bound to the return value of `fn`. This must be called
|
1722 | * inside an effect root (for example, during component initialisation).
|
1723 | *
|
1724 | * ```svelte
|
1725 | * <script>
|
1726 | * import { Spring } from 'svelte/motion';
|
1727 | *
|
1728 | * let { number } = $props();
|
1729 | *
|
1730 | * const spring = Spring.of(() => number);
|
1731 | * </script>
|
1732 | * ```
|
1733 | */
|
1734 | static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
|
1735 |
|
1736 | /**
|
1737 | * Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
|
1738 | *
|
1739 | * If `options.instant` is `true`, `spring.current` immediately matches `spring.target`.
|
1740 | *
|
1741 | * If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
|
1742 | * the specified number of milliseconds. This is useful for things like 'fling' gestures.
|
1743 | */
|
1744 | set(value: T, options?: SpringUpdateOpts): Promise<void>;
|
1745 |
|
1746 | damping: number;
|
1747 | precision: number;
|
1748 | stiffness: number;
|
1749 | /**
|
1750 | * The end value of the spring.
|
1751 | * This property only exists on the `Spring` class, not the legacy `spring` store.
|
1752 | */
|
1753 | target: T;
|
1754 | /**
|
1755 | * The current value of the spring.
|
1756 | * This property only exists on the `Spring` class, not the legacy `spring` store.
|
1757 | */
|
1758 | get current(): T;
|
1759 | }
|
1760 |
|
1761 | export interface Tweened<T> extends Readable<T> {
|
1762 | set(value: T, opts?: TweenedOptions<T>): Promise<void>;
|
1763 | update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
|
1764 | }
|
1765 | /** Callback to inform of a value updates. */
|
1766 | type Subscriber<T> = (value: T) => void;
|
1767 |
|
1768 | /** Unsubscribes from value updates. */
|
1769 | type Unsubscriber = () => void;
|
1770 |
|
1771 | /** Readable interface for subscribing. */
|
1772 | interface Readable<T> {
|
1773 | /**
|
1774 | * Subscribe on value changes.
|
1775 | * @param run subscription callback
|
1776 | * @param invalidate cleanup callback
|
1777 | */
|
1778 | subscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
|
1779 | }
|
1780 | interface SpringOpts {
|
1781 | stiffness?: number;
|
1782 | damping?: number;
|
1783 | precision?: number;
|
1784 | }
|
1785 |
|
1786 | interface SpringUpdateOpts {
|
1787 | /**
|
1788 | * @deprecated Only use this for the spring store; does nothing when set on the Spring class
|
1789 | */
|
1790 | hard?: any;
|
1791 | /**
|
1792 | * @deprecated Only use this for the spring store; does nothing when set on the Spring class
|
1793 | */
|
1794 | soft?: string | number | boolean;
|
1795 | /**
|
1796 | * Only use this for the Spring class; does nothing when set on the spring store
|
1797 | */
|
1798 | instant?: boolean;
|
1799 | /**
|
1800 | * Only use this for the Spring class; does nothing when set on the spring store
|
1801 | */
|
1802 | preserveMomentum?: number;
|
1803 | }
|
1804 |
|
1805 | type Updater<T> = (target_value: T, value: T) => T;
|
1806 |
|
1807 | interface TweenedOptions<T> {
|
1808 | delay?: number;
|
1809 | duration?: number | ((from: T, to: T) => number);
|
1810 | easing?: (t: number) => number;
|
1811 | interpolate?: (a: T, b: T) => (t: number) => T;
|
1812 | }
|
1813 | /**
|
1814 | * 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).
|
1815 | *
|
1816 | * ```svelte
|
1817 | * <script>
|
1818 | * import { prefersReducedMotion } from 'svelte/motion';
|
1819 | * import { fly } from 'svelte/transition';
|
1820 | *
|
1821 | * let visible = $state(false);
|
1822 | * </script>
|
1823 | *
|
1824 | * <button onclick={() => visible = !visible}>
|
1825 | * toggle
|
1826 | * </button>
|
1827 | *
|
1828 | * {#if visible}
|
1829 | * <p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
|
1830 | * flies in, unless the user prefers reduced motion
|
1831 | * </p>
|
1832 | * {/if}
|
1833 | * ```
|
1834 | * @since 5.7.0
|
1835 | */
|
1836 | export const prefersReducedMotion: MediaQuery;
|
1837 | /**
|
1838 | * 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.
|
1839 | *
|
1840 | * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead
|
1841 | * */
|
1842 | export function spring<T = any>(value?: T | undefined, opts?: SpringOpts | undefined): Spring<T>;
|
1843 | /**
|
1844 | * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
|
1845 | *
|
1846 | * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
|
1847 | * */
|
1848 | export function tweened<T>(value?: T | undefined, defaults?: TweenedOptions<T> | undefined): Tweened<T>;
|
1849 | /**
|
1850 | * A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
|
1851 | * move towards it over time, taking account of the `delay`, `duration` and `easing` options.
|
1852 | *
|
1853 | * ```svelte
|
1854 | * <script>
|
1855 | * import { Tween } from 'svelte/motion';
|
1856 | *
|
1857 | * const tween = new Tween(0);
|
1858 | * </script>
|
1859 | *
|
1860 | * <input type="range" bind:value={tween.target} />
|
1861 | * <input type="range" bind:value={tween.current} disabled />
|
1862 | * ```
|
1863 | * @since 5.8.0
|
1864 | */
|
1865 | export class Tween<T> {
|
1866 | /**
|
1867 | * Create a tween whose value is bound to the return value of `fn`. This must be called
|
1868 | * inside an effect root (for example, during component initialisation).
|
1869 | *
|
1870 | * ```svelte
|
1871 | * <script>
|
1872 | * import { Tween } from 'svelte/motion';
|
1873 | *
|
1874 | * let { number } = $props();
|
1875 | *
|
1876 | * const tween = Tween.of(() => number);
|
1877 | * </script>
|
1878 | * ```
|
1879 | *
|
1880 | */
|
1881 | static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
|
1882 |
|
1883 | constructor(value: T, options?: TweenedOptions<T>);
|
1884 | /**
|
1885 | * Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
|
1886 | *
|
1887 | * If `options` are provided, they will override the tween's defaults.
|
1888 | * */
|
1889 | set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
|
1890 | get current(): T;
|
1891 | set target(v: T);
|
1892 | get target(): T;
|
1893 | #private;
|
1894 | }
|
1895 |
|
1896 | export {};
|
1897 | }
|
1898 |
|
1899 | declare module 'svelte/reactivity' {
|
1900 | export class SvelteDate extends Date {
|
1901 |
|
1902 | constructor(...params: any[]);
|
1903 | #private;
|
1904 | }
|
1905 | export class SvelteSet<T> extends Set<T> {
|
1906 |
|
1907 | constructor(value?: Iterable<T> | null | undefined);
|
1908 |
|
1909 | add(value: T): this;
|
1910 | #private;
|
1911 | }
|
1912 | export class SvelteMap<K, V> extends Map<K, V> {
|
1913 |
|
1914 | constructor(value?: Iterable<readonly [K, V]> | null | undefined);
|
1915 |
|
1916 | set(key: K, value: V): this;
|
1917 | #private;
|
1918 | }
|
1919 | export class SvelteURL extends URL {
|
1920 | get searchParams(): SvelteURLSearchParams;
|
1921 | #private;
|
1922 | }
|
1923 | const REPLACE: unique symbol;
|
1924 | export class SvelteURLSearchParams extends URLSearchParams {
|
1925 |
|
1926 | [REPLACE](params: URLSearchParams): void;
|
1927 | #private;
|
1928 | }
|
1929 | /**
|
1930 | * Creates a media query and provides a `current` property that reflects whether or not it matches.
|
1931 | *
|
1932 | * 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.
|
1933 | * If you can use the media query in CSS to achieve the same effect, do that.
|
1934 | *
|
1935 | * ```svelte
|
1936 | * <script>
|
1937 | * import { MediaQuery } from 'svelte/reactivity';
|
1938 | *
|
1939 | * const large = new MediaQuery('min-width: 800px');
|
1940 | * </script>
|
1941 | *
|
1942 | * <h1>{large.current ? 'large screen' : 'small screen'}</h1>
|
1943 | * ```
|
1944 | * @extends {ReactiveValue<boolean>}
|
1945 | * @since 5.7.0
|
1946 | */
|
1947 | export class MediaQuery extends ReactiveValue<boolean> {
|
1948 | /**
|
1949 | * @param query A media query string
|
1950 | * @param fallback Fallback value for the server
|
1951 | */
|
1952 | constructor(query: string, fallback?: boolean | undefined);
|
1953 | }
|
1954 | /**
|
1955 | * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
|
1956 | * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
|
1957 | *
|
1958 | * If `start` returns a function, it will be called when the effect is destroyed.
|
1959 | *
|
1960 | * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
1961 | * are active, and the returned teardown function will only be called when all effects are destroyed.
|
1962 | *
|
1963 | * It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery):
|
1964 | *
|
1965 | * ```js
|
1966 | * import { createSubscriber } from 'svelte/reactivity';
|
1967 | * import { on } from 'svelte/events';
|
1968 | *
|
1969 | * export class MediaQuery {
|
1970 | * #query;
|
1971 | * #subscribe;
|
1972 | *
|
1973 | * constructor(query) {
|
1974 | * this.#query = window.matchMedia(`(${query})`);
|
1975 | *
|
1976 | * this.#subscribe = createSubscriber((update) => {
|
1977 | * // when the `change` event occurs, re-run any effects that read `this.current`
|
1978 | * const off = on(this.#query, 'change', update);
|
1979 | *
|
1980 | * // stop listening when all the effects are destroyed
|
1981 | * return () => off();
|
1982 | * });
|
1983 | * }
|
1984 | *
|
1985 | * get current() {
|
1986 | * this.#subscribe();
|
1987 | *
|
1988 | * // Return the current state of the query, whether or not we're in an effect
|
1989 | * return this.#query.matches;
|
1990 | * }
|
1991 | * }
|
1992 | * ```
|
1993 | * @since 5.7.0
|
1994 | */
|
1995 | export function createSubscriber(start: (update: () => void) => (() => void) | void): () => void;
|
1996 | class ReactiveValue<T> {
|
1997 |
|
1998 | constructor(fn: () => T, onsubscribe: (update: () => void) => void);
|
1999 | get current(): T;
|
2000 | #private;
|
2001 | }
|
2002 |
|
2003 | export {};
|
2004 | }
|
2005 |
|
2006 | declare module 'svelte/reactivity/window' {
|
2007 | /**
|
2008 | * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
|
2009 | * @since 5.11.0
|
2010 | */
|
2011 | export const scrollX: ReactiveValue<number | undefined>;
|
2012 | /**
|
2013 | * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
|
2014 | * @since 5.11.0
|
2015 | */
|
2016 | export const scrollY: ReactiveValue<number | undefined>;
|
2017 | /**
|
2018 | * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
|
2019 | * @since 5.11.0
|
2020 | */
|
2021 | export const innerWidth: ReactiveValue<number | undefined>;
|
2022 | /**
|
2023 | * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
|
2024 | * @since 5.11.0
|
2025 | */
|
2026 | export const innerHeight: ReactiveValue<number | undefined>;
|
2027 | /**
|
2028 | * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
|
2029 | * @since 5.11.0
|
2030 | */
|
2031 | export const outerWidth: ReactiveValue<number | undefined>;
|
2032 | /**
|
2033 | * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
|
2034 | * @since 5.11.0
|
2035 | */
|
2036 | export const outerHeight: ReactiveValue<number | undefined>;
|
2037 | /**
|
2038 | * `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
|
2039 | * @since 5.11.0
|
2040 | */
|
2041 | export const screenLeft: ReactiveValue<number | undefined>;
|
2042 | /**
|
2043 | * `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
|
2044 | * @since 5.11.0
|
2045 | */
|
2046 | export const screenTop: ReactiveValue<number | undefined>;
|
2047 | /**
|
2048 | * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
|
2049 | * @since 5.11.0
|
2050 | */
|
2051 | export const online: ReactiveValue<boolean | undefined>;
|
2052 | /**
|
2053 | * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
|
2054 | * Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
|
2055 | * on Firefox and Safari it won't.
|
2056 | * @since 5.11.0
|
2057 | */
|
2058 | export const devicePixelRatio: {
|
2059 | get current(): number | undefined;
|
2060 | };
|
2061 | class ReactiveValue<T> {
|
2062 |
|
2063 | constructor(fn: () => T, onsubscribe: (update: () => void) => void);
|
2064 | get current(): T;
|
2065 | #private;
|
2066 | }
|
2067 |
|
2068 | export {};
|
2069 | }
|
2070 |
|
2071 | declare module 'svelte/server' {
|
2072 | import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte';
|
2073 | /**
|
2074 | * Only available on the server and when compiling with the `server` option.
|
2075 | * 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.
|
2076 | */
|
2077 | export function render<
|
2078 | Comp extends SvelteComponent<any> | Component<any>,
|
2079 | Props extends ComponentProps<Comp> = ComponentProps<Comp>
|
2080 | >(
|
2081 | ...args: {} extends Props
|
2082 | ? [
|
2083 | component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
|
2084 | options?: { props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
|
2085 | ]
|
2086 | : [
|
2087 | component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
|
2088 | options: { props: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
|
2089 | ]
|
2090 | ): RenderOutput;
|
2091 | interface RenderOutput {
|
2092 | /** HTML that goes into the `<head>` */
|
2093 | head: string;
|
2094 | /** @deprecated use `body` instead */
|
2095 | html: string;
|
2096 | /** HTML that goes somewhere into the `<body>` */
|
2097 | body: string;
|
2098 | }
|
2099 |
|
2100 | export {};
|
2101 | }
|
2102 |
|
2103 | declare module 'svelte/store' {
|
2104 | /** Callback to inform of a value updates. */
|
2105 | export type Subscriber<T> = (value: T) => void;
|
2106 |
|
2107 | /** Unsubscribes from value updates. */
|
2108 | export type Unsubscriber = () => void;
|
2109 |
|
2110 | /** Callback to update a value. */
|
2111 | export type Updater<T> = (value: T) => T;
|
2112 |
|
2113 | /**
|
2114 | * Start and stop notification callbacks.
|
2115 | * This function is called when the first subscriber subscribes.
|
2116 | *
|
2117 | * @param set Function that sets the value of the store.
|
2118 | * @param update Function that sets the value of the store after passing the current value to the update function.
|
2119 | * @returns Optionally, a cleanup function that is called when the last remaining
|
2120 | * subscriber unsubscribes.
|
2121 | */
|
2122 | export type StartStopNotifier<T> = (
|
2123 | set: (value: T) => void,
|
2124 | update: (fn: Updater<T>) => void
|
2125 | ) => void | (() => void);
|
2126 |
|
2127 | /** Readable interface for subscribing. */
|
2128 | export interface Readable<T> {
|
2129 | /**
|
2130 | * Subscribe on value changes.
|
2131 | * @param run subscription callback
|
2132 | * @param invalidate cleanup callback
|
2133 | */
|
2134 | subscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
|
2135 | }
|
2136 |
|
2137 | /** Writable interface for both updating and subscribing. */
|
2138 | export interface Writable<T> extends Readable<T> {
|
2139 | /**
|
2140 | * Set value and inform subscribers.
|
2141 | * @param value to set
|
2142 | */
|
2143 | set(this: void, value: T): void;
|
2144 |
|
2145 | /**
|
2146 | * Update value using callback and inform subscribers.
|
2147 | * @param updater callback
|
2148 | */
|
2149 | update(this: void, updater: Updater<T>): void;
|
2150 | }
|
2151 | export function toStore<V>(get: () => V, set: (v: V) => void): Writable<V>;
|
2152 |
|
2153 | export function toStore<V>(get: () => V): Readable<V>;
|
2154 |
|
2155 | export function fromStore<V>(store: Writable<V>): {
|
2156 | current: V;
|
2157 | };
|
2158 |
|
2159 | export function fromStore<V>(store: Readable<V>): {
|
2160 | readonly current: V;
|
2161 | };
|
2162 | /**
|
2163 | * Creates a `Readable` store that allows reading by subscription.
|
2164 | *
|
2165 | * @param value initial value
|
2166 | * */
|
2167 | export function readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>;
|
2168 | /**
|
2169 | * Create a `Writable` store that allows both updating and reading by subscription.
|
2170 | *
|
2171 | * @param value initial value
|
2172 | * */
|
2173 | export function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>;
|
2174 | /**
|
2175 | * Derived value store by synchronizing one or more readable stores and
|
2176 | * applying an aggregation function over its input values.
|
2177 | *
|
2178 | * */
|
2179 | export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T>;
|
2180 | /**
|
2181 | * Derived value store by synchronizing one or more readable stores and
|
2182 | * applying an aggregation function over its input values.
|
2183 | *
|
2184 | * */
|
2185 | export function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T | undefined): Readable<T>;
|
2186 | /**
|
2187 | * Takes a store and returns a new one derived from the old one that is readable.
|
2188 | *
|
2189 | * @param store - store to make readonly
|
2190 | * */
|
2191 | export function readonly<T>(store: Readable<T>): Readable<T>;
|
2192 | /**
|
2193 | * Get the current value from a store by subscribing and immediately unsubscribing.
|
2194 | *
|
2195 | * */
|
2196 | export function get<T>(store: Readable<T>): T;
|
2197 | /** One or more `Readable`s. */
|
2198 | type Stores = Readable<any> | [Readable<any>, ...Array<Readable<any>>] | Array<Readable<any>>;
|
2199 |
|
2200 | /** One or more values from `Readable` stores. */
|
2201 | type StoresValues<T> =
|
2202 | T extends Readable<infer U> ? U : { [K in keyof T]: T[K] extends Readable<infer U> ? U : never };
|
2203 |
|
2204 | export {};
|
2205 | }
|
2206 |
|
2207 | declare module 'svelte/transition' {
|
2208 | export type EasingFunction = (t: number) => number;
|
2209 |
|
2210 | export interface TransitionConfig {
|
2211 | delay?: number;
|
2212 | duration?: number;
|
2213 | easing?: EasingFunction;
|
2214 | css?: (t: number, u: number) => string;
|
2215 | tick?: (t: number, u: number) => void;
|
2216 | }
|
2217 |
|
2218 | export interface BlurParams {
|
2219 | delay?: number;
|
2220 | duration?: number;
|
2221 | easing?: EasingFunction;
|
2222 | amount?: number | string;
|
2223 | opacity?: number;
|
2224 | }
|
2225 |
|
2226 | export interface FadeParams {
|
2227 | delay?: number;
|
2228 | duration?: number;
|
2229 | easing?: EasingFunction;
|
2230 | }
|
2231 |
|
2232 | export interface FlyParams {
|
2233 | delay?: number;
|
2234 | duration?: number;
|
2235 | easing?: EasingFunction;
|
2236 | x?: number | string;
|
2237 | y?: number | string;
|
2238 | opacity?: number;
|
2239 | }
|
2240 |
|
2241 | export interface SlideParams {
|
2242 | delay?: number;
|
2243 | duration?: number;
|
2244 | easing?: EasingFunction;
|
2245 | axis?: 'x' | 'y';
|
2246 | }
|
2247 |
|
2248 | export interface ScaleParams {
|
2249 | delay?: number;
|
2250 | duration?: number;
|
2251 | easing?: EasingFunction;
|
2252 | start?: number;
|
2253 | opacity?: number;
|
2254 | }
|
2255 |
|
2256 | export interface DrawParams {
|
2257 | delay?: number;
|
2258 | speed?: number;
|
2259 | duration?: number | ((len: number) => number);
|
2260 | easing?: EasingFunction;
|
2261 | }
|
2262 |
|
2263 | export interface CrossfadeParams {
|
2264 | delay?: number;
|
2265 | duration?: number | ((len: number) => number);
|
2266 | easing?: EasingFunction;
|
2267 | }
|
2268 | /**
|
2269 | * Animates a `blur` filter alongside an element's opacity.
|
2270 | *
|
2271 | * */
|
2272 | export function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfig;
|
2273 | /**
|
2274 | * 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.
|
2275 | *
|
2276 | * */
|
2277 | export function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfig;
|
2278 | /**
|
2279 | * 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.
|
2280 | *
|
2281 | * */
|
2282 | export function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig;
|
2283 | /**
|
2284 | * Slides an element in and out.
|
2285 | *
|
2286 | * */
|
2287 | export function slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfig;
|
2288 | /**
|
2289 | * 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.
|
2290 | *
|
2291 | * */
|
2292 | export function scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfig;
|
2293 | /**
|
2294 | * 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 `<path>` and `<polyline>`.
|
2295 | *
|
2296 | * */
|
2297 | export function draw(node: SVGElement & {
|
2298 | getTotalLength(): number;
|
2299 | }, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfig;
|
2300 | /**
|
2301 | * 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.
|
2302 | *
|
2303 | * */
|
2304 | export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
|
2305 | fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
|
2306 | }): [(node: any, params: CrossfadeParams & {
|
2307 | key: any;
|
2308 | }) => () => TransitionConfig, (node: any, params: CrossfadeParams & {
|
2309 | key: any;
|
2310 | }) => () => TransitionConfig];
|
2311 |
|
2312 | export {};
|
2313 | }
|
2314 |
|
2315 | declare module 'svelte/events' {
|
2316 | // Once https://github.com/microsoft/TypeScript/issues/59980 is fixed we can put these overloads into the JSDoc comments of the `on` function
|
2317 |
|
2318 | /**
|
2319 | * Attaches an event handler to the window and returns a function that removes the handler. Using this
|
2320 | * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
|
2321 | * (with attributes like `onclick`), which use event delegation for performance reasons
|
2322 | */
|
2323 | export function on<Type extends keyof WindowEventMap>(
|
2324 | window: Window,
|
2325 | type: Type,
|
2326 | handler: (this: Window, event: WindowEventMap[Type]) => any,
|
2327 | options?: AddEventListenerOptions | undefined
|
2328 | ): () => void;
|
2329 | /**
|
2330 | * Attaches an event handler to the document and returns a function that removes the handler. Using this
|
2331 | * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
|
2332 | * (with attributes like `onclick`), which use event delegation for performance reasons
|
2333 | */
|
2334 | export function on<Type extends keyof DocumentEventMap>(
|
2335 | document: Document,
|
2336 | type: Type,
|
2337 | handler: (this: Document, event: DocumentEventMap[Type]) => any,
|
2338 | options?: AddEventListenerOptions | undefined
|
2339 | ): () => void;
|
2340 | /**
|
2341 | * Attaches an event handler to an element and returns a function that removes the handler. Using this
|
2342 | * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
|
2343 | * (with attributes like `onclick`), which use event delegation for performance reasons
|
2344 | */
|
2345 | export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
|
2346 | element: Element,
|
2347 | type: Type,
|
2348 | handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
|
2349 | options?: AddEventListenerOptions | undefined
|
2350 | ): () => void;
|
2351 | /**
|
2352 | * Attaches an event handler to an element and returns a function that removes the handler. Using this
|
2353 | * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
|
2354 | * (with attributes like `onclick`), which use event delegation for performance reasons
|
2355 | */
|
2356 | export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
|
2357 | element: Element,
|
2358 | type: Type,
|
2359 | handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
|
2360 | options?: AddEventListenerOptions | undefined
|
2361 | ): () => void;
|
2362 | /**
|
2363 | * Attaches an event handler to an element and returns a function that removes the handler. Using this
|
2364 | * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
|
2365 | * (with attributes like `onclick`), which use event delegation for performance reasons
|
2366 | */
|
2367 | export function on(
|
2368 | element: EventTarget,
|
2369 | type: string,
|
2370 | handler: EventListener,
|
2371 | options?: AddEventListenerOptions | undefined
|
2372 | ): () => void;
|
2373 |
|
2374 | export {};
|
2375 | }
|
2376 |
|
2377 | declare module 'svelte/types/compiler/preprocess' {
|
2378 | /** @deprecated import this from 'svelte/preprocess' instead */
|
2379 | export type MarkupPreprocessor = MarkupPreprocessor_1;
|
2380 | /** @deprecated import this from 'svelte/preprocess' instead */
|
2381 | export type Preprocessor = Preprocessor_1;
|
2382 | /** @deprecated import this from 'svelte/preprocess' instead */
|
2383 | export type PreprocessorGroup = PreprocessorGroup_1;
|
2384 | /** @deprecated import this from 'svelte/preprocess' instead */
|
2385 | export type Processed = Processed_1;
|
2386 | /** @deprecated import this from 'svelte/preprocess' instead */
|
2387 | export type SveltePreprocessor<PreprocessorType extends keyof PreprocessorGroup_1, Options = any> = SveltePreprocessor_1<
|
2388 | PreprocessorType,
|
2389 | Options
|
2390 | >;
|
2391 | /**
|
2392 | * The result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged.
|
2393 | */
|
2394 | interface Processed_1 {
|
2395 | /**
|
2396 | * The new code
|
2397 | */
|
2398 | code: string;
|
2399 | /**
|
2400 | * A source map mapping back to the original code
|
2401 | */
|
2402 | map?: string | object; // we are opaque with the type here to avoid dependency on the remapping module for our public types.
|
2403 | /**
|
2404 | * A list of additional files to watch for changes
|
2405 | */
|
2406 | dependencies?: string[];
|
2407 | /**
|
2408 | * Only for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged.
|
2409 | */
|
2410 | attributes?: Record<string, string | boolean>;
|
2411 | toString?: () => string;
|
2412 | }
|
2413 |
|
2414 | /**
|
2415 | * A markup preprocessor that takes a string of code and returns a processed version.
|
2416 | */
|
2417 | type MarkupPreprocessor_1 = (options: {
|
2418 | /**
|
2419 | * The whole Svelte file content
|
2420 | */
|
2421 | content: string;
|
2422 | /**
|
2423 | * The filename of the Svelte file
|
2424 | */
|
2425 | filename?: string;
|
2426 | }) => Processed_1 | void | Promise<Processed_1 | void>;
|
2427 |
|
2428 | /**
|
2429 | * A script/style preprocessor that takes a string of code and returns a processed version.
|
2430 | */
|
2431 | type Preprocessor_1 = (options: {
|
2432 | /**
|
2433 | * The script/style tag content
|
2434 | */
|
2435 | content: string;
|
2436 | /**
|
2437 | * The attributes on the script/style tag
|
2438 | */
|
2439 | attributes: Record<string, string | boolean>;
|
2440 | /**
|
2441 | * The whole Svelte file content
|
2442 | */
|
2443 | markup: string;
|
2444 | /**
|
2445 | * The filename of the Svelte file
|
2446 | */
|
2447 | filename?: string;
|
2448 | }) => Processed_1 | void | Promise<Processed_1 | void>;
|
2449 |
|
2450 | /**
|
2451 | * A preprocessor group is a set of preprocessors that are applied to a Svelte file.
|
2452 | */
|
2453 | interface PreprocessorGroup_1 {
|
2454 | /** Name of the preprocessor. Will be a required option in the next major version */
|
2455 | name?: string;
|
2456 | markup?: MarkupPreprocessor_1;
|
2457 | style?: Preprocessor_1;
|
2458 | script?: Preprocessor_1;
|
2459 | }
|
2460 |
|
2461 | /**
|
2462 | * @description Utility type to extract the type of a preprocessor from a preprocessor group
|
2463 | * @deprecated Create this utility type yourself instead
|
2464 | */
|
2465 | interface SveltePreprocessor_1<
|
2466 | PreprocessorType extends keyof PreprocessorGroup_1,
|
2467 | Options = any
|
2468 | > {
|
2469 | (options?: Options): Required<Pick<PreprocessorGroup_1, PreprocessorType>>;
|
2470 | }
|
2471 |
|
2472 | export {};
|
2473 | }
|
2474 |
|
2475 | declare module 'svelte/types/compiler/interfaces' {
|
2476 | import type { Location } from 'locate-character';
|
2477 | /** @deprecated import this from 'svelte' instead */
|
2478 | export type CompileOptions = CompileOptions_1;
|
2479 | /** @deprecated import this from 'svelte' instead */
|
2480 | export type Warning = Warning_1;
|
2481 | interface Warning_1 extends ICompileDiagnostic {}
|
2482 |
|
2483 | type CssHashGetter = (args: {
|
2484 | name: string;
|
2485 | filename: string;
|
2486 | css: string;
|
2487 | hash: (input: string) => string;
|
2488 | }) => string;
|
2489 |
|
2490 | interface CompileOptions_1 extends ModuleCompileOptions {
|
2491 | /**
|
2492 | * Sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope).
|
2493 | * If unspecified, will be inferred from `filename`
|
2494 | */
|
2495 | name?: string;
|
2496 | /**
|
2497 | * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
|
2498 | *
|
2499 | * @default false
|
2500 | */
|
2501 | customElement?: boolean;
|
2502 | /**
|
2503 | * 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`.
|
2504 | *
|
2505 | * @default false
|
2506 | * @deprecated This will have no effect in runes mode
|
2507 | */
|
2508 | accessors?: boolean;
|
2509 | /**
|
2510 | * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`.
|
2511 | *
|
2512 | * @default 'html'
|
2513 | */
|
2514 | namespace?: Namespace;
|
2515 | /**
|
2516 | * If `true`, tells the compiler that you promise not to mutate any objects.
|
2517 | * This allows it to be less conservative about checking whether values have changed.
|
2518 | *
|
2519 | * @default false
|
2520 | * @deprecated This will have no effect in runes mode
|
2521 | */
|
2522 | immutable?: boolean;
|
2523 | /**
|
2524 | * - `'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.
|
2525 | * - `'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.
|
2526 | * This is always `'injected'` when compiling with `customElement` mode.
|
2527 | */
|
2528 | css?: 'injected' | 'external';
|
2529 | /**
|
2530 | * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
|
2531 | * It defaults to returning `svelte-${hash(css)}`.
|
2532 | *
|
2533 | * @default undefined
|
2534 | */
|
2535 | cssHash?: CssHashGetter;
|
2536 | /**
|
2537 | * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
|
2538 | *
|
2539 | * @default false
|
2540 | */
|
2541 | preserveComments?: boolean;
|
2542 | /**
|
2543 | * If `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.
|
2544 | *
|
2545 | * @default false
|
2546 | */
|
2547 | preserveWhitespace?: boolean;
|
2548 | /**
|
2549 | * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
|
2550 | * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
|
2551 | * Set to `undefined` (the default) to infer runes mode from the component code.
|
2552 | * Is always `true` for JS/TS modules compiled with Svelte.
|
2553 | * Will be `true` by default in Svelte 6.
|
2554 | * Note that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`,
|
2555 | * 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.
|
2556 | * @default undefined
|
2557 | */
|
2558 | runes?: boolean | undefined;
|
2559 | /**
|
2560 | * If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
|
2561 | *
|
2562 | * @default true
|
2563 | */
|
2564 | discloseVersion?: boolean;
|
2565 | /**
|
2566 | * @deprecated Use these only as a temporary solution before migrating your code
|
2567 | */
|
2568 | compatibility?: {
|
2569 | /**
|
2570 | * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —
|
2571 | * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`)
|
2572 | * or as an object with a `.render(...)` method when compiling for the server
|
2573 | * @default 5
|
2574 | */
|
2575 | componentApi?: 4 | 5;
|
2576 | };
|
2577 | /**
|
2578 | * An initial sourcemap that will be merged into the final output sourcemap.
|
2579 | * This is usually the preprocessor sourcemap.
|
2580 | *
|
2581 | * @default null
|
2582 | */
|
2583 | sourcemap?: object | string;
|
2584 | /**
|
2585 | * Used for your JavaScript sourcemap.
|
2586 | *
|
2587 | * @default null
|
2588 | */
|
2589 | outputFilename?: string;
|
2590 | /**
|
2591 | * Used for your CSS sourcemap.
|
2592 | *
|
2593 | * @default null
|
2594 | */
|
2595 | cssOutputFilename?: string;
|
2596 | /**
|
2597 | * If `true`, compiles components with hot reloading support.
|
2598 | *
|
2599 | * @default false
|
2600 | */
|
2601 | hmr?: boolean;
|
2602 | /**
|
2603 | * If `true`, returns the modern version of the AST.
|
2604 | * Will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.
|
2605 | *
|
2606 | * @default false
|
2607 | */
|
2608 | modernAst?: boolean;
|
2609 | }
|
2610 |
|
2611 | interface ModuleCompileOptions {
|
2612 | /**
|
2613 | * If `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development.
|
2614 | *
|
2615 | * @default false
|
2616 | */
|
2617 | dev?: boolean;
|
2618 | /**
|
2619 | * If `"client"`, Svelte emits code designed to run in the browser.
|
2620 | * If `"server"`, Svelte emits code suitable for server-side rendering.
|
2621 | * If `false`, nothing is generated. Useful for tooling that is only interested in warnings.
|
2622 | *
|
2623 | * @default 'client'
|
2624 | */
|
2625 | generate?: 'client' | 'server' | false;
|
2626 | /**
|
2627 | * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
|
2628 | */
|
2629 | filename?: string;
|
2630 | /**
|
2631 | * Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically.
|
2632 | * @default process.cwd() on node-like environments, undefined elsewhere
|
2633 | */
|
2634 | rootDir?: string;
|
2635 | /**
|
2636 | * A function that gets a `Warning` as an argument and returns a boolean.
|
2637 | * Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it.
|
2638 | */
|
2639 | warningFilter?: (warning: Warning_1) => boolean;
|
2640 | }
|
2641 | /**
|
2642 | * - `html` — the default, for e.g. `<div>` or `<span>`
|
2643 | * - `svg` — for e.g. `<svg>` or `<g>`
|
2644 | * - `mathml` — for e.g. `<math>` or `<mrow>`
|
2645 | */
|
2646 | type Namespace = 'html' | 'svg' | 'mathml';
|
2647 | type ICompileDiagnostic = {
|
2648 | code: string;
|
2649 | message: string;
|
2650 | stack?: string;
|
2651 | filename?: string;
|
2652 | start?: Location;
|
2653 | end?: Location;
|
2654 | position?: [number, number];
|
2655 | frame?: string;
|
2656 | };
|
2657 |
|
2658 | export {};
|
2659 | }declare module '*.svelte' {
|
2660 | // use prettier-ignore for a while because of https://github.com/sveltejs/language-tools/commit/026111228b5814a9109cc4d779d37fb02955fb8b
|
2661 | // prettier-ignore
|
2662 | import { SvelteComponent } from 'svelte'
|
2663 | import { LegacyComponentType } from 'svelte/legacy';
|
2664 | const Comp: LegacyComponentType;
|
2665 | type Comp = SvelteComponent;
|
2666 | export default Comp;
|
2667 | }
|
2668 |
|
2669 | /**
|
2670 | * Declares reactive state.
|
2671 | *
|
2672 | * Example:
|
2673 | * ```ts
|
2674 | * let count = $state(0);
|
2675 | * ```
|
2676 | *
|
2677 | * https://svelte.dev/docs/svelte/$state
|
2678 | *
|
2679 | * @param initial The initial value
|
2680 | */
|
2681 | declare function $state<T>(initial: T): T;
|
2682 | declare function $state<T>(): T | undefined;
|
2683 |
|
2684 | declare namespace $state {
|
2685 | type Primitive = string | number | boolean | null | undefined;
|
2686 |
|
2687 | type TypedArray =
|
2688 | | Int8Array
|
2689 | | Uint8Array
|
2690 | | Uint8ClampedArray
|
2691 | | Int16Array
|
2692 | | Uint16Array
|
2693 | | Int32Array
|
2694 | | Uint32Array
|
2695 | | Float32Array
|
2696 | | Float64Array
|
2697 | | BigInt64Array
|
2698 | | BigUint64Array;
|
2699 |
|
2700 | /** The things that `structuredClone` can handle — https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm */
|
2701 | export type Cloneable =
|
2702 | | ArrayBuffer
|
2703 | | DataView
|
2704 | | Date
|
2705 | | Error
|
2706 | | Map<any, any>
|
2707 | | RegExp
|
2708 | | Set<any>
|
2709 | | TypedArray
|
2710 | // web APIs
|
2711 | | Blob
|
2712 | | CryptoKey
|
2713 | | DOMException
|
2714 | | DOMMatrix
|
2715 | | DOMMatrixReadOnly
|
2716 | | DOMPoint
|
2717 | | DOMPointReadOnly
|
2718 | | DOMQuad
|
2719 | | DOMRect
|
2720 | | DOMRectReadOnly
|
2721 | | File
|
2722 | | FileList
|
2723 | | FileSystemDirectoryHandle
|
2724 | | FileSystemFileHandle
|
2725 | | FileSystemHandle
|
2726 | | ImageBitmap
|
2727 | | ImageData
|
2728 | | RTCCertificate
|
2729 | | VideoFrame;
|
2730 |
|
2731 | /** Turn `SvelteDate`, `SvelteMap` and `SvelteSet` into their non-reactive counterparts. (`URL` is uncloneable.) */
|
2732 | type NonReactive<T> = T extends Date
|
2733 | ? Date
|
2734 | : T extends Map<infer K, infer V>
|
2735 | ? Map<K, V>
|
2736 | : T extends Set<infer K>
|
2737 | ? Set<K>
|
2738 | : T;
|
2739 |
|
2740 | type Snapshot<T> = T extends Primitive
|
2741 | ? T
|
2742 | : T extends Cloneable
|
2743 | ? NonReactive<T>
|
2744 | : T extends { toJSON(): infer R }
|
2745 | ? R
|
2746 | : T extends Array<infer U>
|
2747 | ? Array<Snapshot<U>>
|
2748 | : T extends object
|
2749 | ? T extends { [key: string]: any }
|
2750 | ? { [K in keyof T]: Snapshot<T[K]> }
|
2751 | : never
|
2752 | : never;
|
2753 |
|
2754 | /**
|
2755 | * Declares state that is _not_ made deeply reactive — instead of mutating it,
|
2756 | * you must reassign it.
|
2757 | *
|
2758 | * Example:
|
2759 | * ```ts
|
2760 | * <script>
|
2761 | * let items = $state.raw([0]);
|
2762 | *
|
2763 | * const addItem = () => {
|
2764 | * items = [...items, items.length];
|
2765 | * };
|
2766 | * </script>
|
2767 | *
|
2768 | * <button on:click={addItem}>
|
2769 | * {items.join(', ')}
|
2770 | * </button>
|
2771 | * ```
|
2772 | *
|
2773 | * https://svelte.dev/docs/svelte/$state#$state.raw
|
2774 | *
|
2775 | * @param initial The initial value
|
2776 | */
|
2777 | export function raw<T>(initial: T): T;
|
2778 | export function raw<T>(): T | undefined;
|
2779 | /**
|
2780 | * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
|
2781 | *
|
2782 | * Example:
|
2783 | * ```ts
|
2784 | * <script>
|
2785 | * let counter = $state({ count: 0 });
|
2786 | *
|
2787 | * function onclick() {
|
2788 | * // Will log `{ count: ... }` rather than `Proxy { ... }`
|
2789 | * console.log($state.snapshot(counter));
|
2790 | * };
|
2791 | * </script>
|
2792 | * ```
|
2793 | *
|
2794 | * https://svelte.dev/docs/svelte/$state#$state.snapshot
|
2795 | *
|
2796 | * @param state The value to snapshot
|
2797 | */
|
2798 | export function snapshot<T>(state: T): Snapshot<T>;
|
2799 |
|
2800 | // prevent intellisense from being unhelpful
|
2801 | /** @deprecated */
|
2802 | export const apply: never;
|
2803 | /** @deprecated */
|
2804 | // @ts-ignore
|
2805 | export const arguments: never;
|
2806 | /** @deprecated */
|
2807 | export const bind: never;
|
2808 | /** @deprecated */
|
2809 | export const call: never;
|
2810 | /** @deprecated */
|
2811 | export const caller: never;
|
2812 | /** @deprecated */
|
2813 | export const length: never;
|
2814 | /** @deprecated */
|
2815 | export const name: never;
|
2816 | /** @deprecated */
|
2817 | export const prototype: never;
|
2818 | /** @deprecated */
|
2819 | export const toString: never;
|
2820 | }
|
2821 |
|
2822 | /**
|
2823 | * Declares derived state, i.e. one that depends on other state variables.
|
2824 | * The expression inside `$derived(...)` should be free of side-effects.
|
2825 | *
|
2826 | * Example:
|
2827 | * ```ts
|
2828 | * let double = $derived(count * 2);
|
2829 | * ```
|
2830 | *
|
2831 | * https://svelte.dev/docs/svelte/$derived
|
2832 | *
|
2833 | * @param expression The derived state expression
|
2834 | */
|
2835 | declare function $derived<T>(expression: T): T;
|
2836 |
|
2837 | declare namespace $derived {
|
2838 | /**
|
2839 | * Sometimes you need to create complex derivations that don't fit inside a short expression.
|
2840 | * In these cases, you can use `$derived.by` which accepts a function as its argument.
|
2841 | *
|
2842 | * Example:
|
2843 | * ```ts
|
2844 | * let total = $derived.by(() => {
|
2845 | * let result = 0;
|
2846 | * for (const n of numbers) {
|
2847 | * result += n;
|
2848 | * }
|
2849 | * return result;
|
2850 | * });
|
2851 | * ```
|
2852 | *
|
2853 | * https://svelte.dev/docs/svelte/$derived#$derived.by
|
2854 | */
|
2855 | export function by<T>(fn: () => T): T;
|
2856 |
|
2857 | // prevent intellisense from being unhelpful
|
2858 | /** @deprecated */
|
2859 | export const apply: never;
|
2860 | /** @deprecated */
|
2861 | // @ts-ignore
|
2862 | export const arguments: never;
|
2863 | /** @deprecated */
|
2864 | export const bind: never;
|
2865 | /** @deprecated */
|
2866 | export const call: never;
|
2867 | /** @deprecated */
|
2868 | export const caller: never;
|
2869 | /** @deprecated */
|
2870 | export const length: never;
|
2871 | /** @deprecated */
|
2872 | export const name: never;
|
2873 | /** @deprecated */
|
2874 | export const prototype: never;
|
2875 | /** @deprecated */
|
2876 | export const toString: never;
|
2877 | }
|
2878 |
|
2879 | /**
|
2880 | * Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values.
|
2881 | * The timing of the execution is after the DOM has been updated.
|
2882 | *
|
2883 | * Example:
|
2884 | * ```ts
|
2885 | * $effect(() => console.log('The count is now ' + count));
|
2886 | * ```
|
2887 | *
|
2888 | * 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.
|
2889 | *
|
2890 | * Does not run during server side rendering.
|
2891 | *
|
2892 | * https://svelte.dev/docs/svelte/$effect
|
2893 | * @param fn The function to execute
|
2894 | */
|
2895 | declare function $effect(fn: () => void | (() => void)): void;
|
2896 |
|
2897 | declare namespace $effect {
|
2898 | /**
|
2899 | * Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values.
|
2900 | * The timing of the execution is right before the DOM is updated.
|
2901 | *
|
2902 | * Example:
|
2903 | * ```ts
|
2904 | * $effect.pre(() => console.log('The count is now ' + count));
|
2905 | * ```
|
2906 | *
|
2907 | * 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.
|
2908 | *
|
2909 | * Does not run during server side rendering.
|
2910 | *
|
2911 | * https://svelte.dev/docs/svelte/$effect#$effect.pre
|
2912 | * @param fn The function to execute
|
2913 | */
|
2914 | export function pre(fn: () => void | (() => void)): void;
|
2915 |
|
2916 | /**
|
2917 | * 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.
|
2918 | *
|
2919 | * Example:
|
2920 | * ```svelte
|
2921 | * <script>
|
2922 | * console.log('in component setup:', $effect.tracking()); // false
|
2923 | *
|
2924 | * $effect(() => {
|
2925 | * console.log('in effect:', $effect.tracking()); // true
|
2926 | * });
|
2927 | * </script>
|
2928 | *
|
2929 | * <p>in template: {$effect.tracking()}</p> <!-- true -->
|
2930 | * ```
|
2931 | *
|
2932 | * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
|
2933 | *
|
2934 | * https://svelte.dev/docs/svelte/$effect#$effect.tracking
|
2935 | */
|
2936 | export function tracking(): boolean;
|
2937 |
|
2938 | /**
|
2939 | * The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
|
2940 | * nested effects that you want to manually control. This rune also allows for creation of effects outside of the component
|
2941 | * initialisation phase.
|
2942 | *
|
2943 | * Example:
|
2944 | * ```svelte
|
2945 | * <script>
|
2946 | * let count = $state(0);
|
2947 | *
|
2948 | * const cleanup = $effect.root(() => {
|
2949 | * $effect(() => {
|
2950 | * console.log(count);
|
2951 | * })
|
2952 | *
|
2953 | * return () => {
|
2954 | * console.log('effect root cleanup');
|
2955 | * }
|
2956 | * });
|
2957 | * </script>
|
2958 | *
|
2959 | * <button onclick={() => cleanup()}>cleanup</button>
|
2960 | * ```
|
2961 | *
|
2962 | * https://svelte.dev/docs/svelte/$effect#$effect.root
|
2963 | */
|
2964 | export function root(fn: () => void | (() => void)): () => void;
|
2965 |
|
2966 | // prevent intellisense from being unhelpful
|
2967 | /** @deprecated */
|
2968 | export const apply: never;
|
2969 | /** @deprecated */
|
2970 | // @ts-ignore
|
2971 | export const arguments: never;
|
2972 | /** @deprecated */
|
2973 | export const bind: never;
|
2974 | /** @deprecated */
|
2975 | export const call: never;
|
2976 | /** @deprecated */
|
2977 | export const caller: never;
|
2978 | /** @deprecated */
|
2979 | export const length: never;
|
2980 | /** @deprecated */
|
2981 | export const name: never;
|
2982 | /** @deprecated */
|
2983 | export const prototype: never;
|
2984 | /** @deprecated */
|
2985 | export const toString: never;
|
2986 | }
|
2987 |
|
2988 | /**
|
2989 | * Declares the props that a component accepts. Example:
|
2990 | *
|
2991 | * ```ts
|
2992 | * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
|
2993 | * ```
|
2994 | *
|
2995 | * https://svelte.dev/docs/svelte/$props
|
2996 | */
|
2997 | declare function $props(): any;
|
2998 |
|
2999 | declare namespace $props {
|
3000 | // prevent intellisense from being unhelpful
|
3001 | /** @deprecated */
|
3002 | export const apply: never;
|
3003 | /** @deprecated */
|
3004 | // @ts-ignore
|
3005 | export const arguments: never;
|
3006 | /** @deprecated */
|
3007 | export const bind: never;
|
3008 | /** @deprecated */
|
3009 | export const call: never;
|
3010 | /** @deprecated */
|
3011 | export const caller: never;
|
3012 | /** @deprecated */
|
3013 | export const length: never;
|
3014 | /** @deprecated */
|
3015 | export const name: never;
|
3016 | /** @deprecated */
|
3017 | export const prototype: never;
|
3018 | /** @deprecated */
|
3019 | export const toString: never;
|
3020 | }
|
3021 |
|
3022 | /**
|
3023 | * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
|
3024 | *
|
3025 | * ```ts
|
3026 | * let { propName = $bindable() }: { propName: boolean } = $props();
|
3027 | * ```
|
3028 | *
|
3029 | * https://svelte.dev/docs/svelte/$bindable
|
3030 | */
|
3031 | declare function $bindable<T>(fallback?: T): T;
|
3032 |
|
3033 | declare namespace $bindable {
|
3034 | // prevent intellisense from being unhelpful
|
3035 | /** @deprecated */
|
3036 | export const apply: never;
|
3037 | /** @deprecated */
|
3038 | // @ts-ignore
|
3039 | export const arguments: never;
|
3040 | /** @deprecated */
|
3041 | export const bind: never;
|
3042 | /** @deprecated */
|
3043 | export const call: never;
|
3044 | /** @deprecated */
|
3045 | export const caller: never;
|
3046 | /** @deprecated */
|
3047 | export const length: never;
|
3048 | /** @deprecated */
|
3049 | export const name: never;
|
3050 | /** @deprecated */
|
3051 | export const prototype: never;
|
3052 | /** @deprecated */
|
3053 | export const toString: never;
|
3054 | }
|
3055 |
|
3056 | /**
|
3057 | * Inspects one or more values whenever they, or the properties they contain, change. Example:
|
3058 | *
|
3059 | * ```ts
|
3060 | * $inspect(someValue, someOtherValue)
|
3061 | * ```
|
3062 | *
|
3063 | * `$inspect` returns a `with` function, which you can invoke with a callback function that
|
3064 | * will be called with the value and the event type (`'init'` or `'update'`) on every change.
|
3065 | * By default, the values will be logged to the console.
|
3066 | *
|
3067 | * ```ts
|
3068 | * $inspect(x).with(console.trace);
|
3069 | * $inspect(x, y).with(() => { debugger; });
|
3070 | * ```
|
3071 | *
|
3072 | * https://svelte.dev/docs/svelte/$inspect
|
3073 | */
|
3074 | declare function $inspect<T extends any[]>(
|
3075 | ...values: T
|
3076 | ): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };
|
3077 |
|
3078 | declare namespace $inspect {
|
3079 | /**
|
3080 | * Tracks which reactive state changes caused an effect to re-run. Must be the first
|
3081 | * statement of a function body. Example:
|
3082 | *
|
3083 | * ```svelte
|
3084 | * <script>
|
3085 | * let count = $state(0);
|
3086 | *
|
3087 | * $effect(() => {
|
3088 | * $inspect.trace('my effect');
|
3089 | *
|
3090 | * count;
|
3091 | * });
|
3092 | * </script>
|
3093 | */
|
3094 | export function trace(name: string): void;
|
3095 |
|
3096 | // prevent intellisense from being unhelpful
|
3097 | /** @deprecated */
|
3098 | export const apply: never;
|
3099 | /** @deprecated */
|
3100 | // @ts-ignore
|
3101 | export const arguments: never;
|
3102 | /** @deprecated */
|
3103 | export const bind: never;
|
3104 | /** @deprecated */
|
3105 | export const call: never;
|
3106 | /** @deprecated */
|
3107 | export const caller: never;
|
3108 | /** @deprecated */
|
3109 | export const length: never;
|
3110 | /** @deprecated */
|
3111 | export const name: never;
|
3112 | /** @deprecated */
|
3113 | export const prototype: never;
|
3114 | /** @deprecated */
|
3115 | export const toString: never;
|
3116 | }
|
3117 |
|
3118 | /**
|
3119 | * Retrieves the `this` reference of the custom element that contains this component. Example:
|
3120 | *
|
3121 | * ```svelte
|
3122 | * <svelte:options customElement="my-element" />
|
3123 | *
|
3124 | * <script>
|
3125 | * function greet(greeting) {
|
3126 | * $host().dispatchEvent(new CustomEvent('greeting', { detail: greeting }))
|
3127 | * }
|
3128 | * </script>
|
3129 | *
|
3130 | * <button onclick={() => greet('hello')}>say hello</button>
|
3131 | * ```
|
3132 | *
|
3133 | * Only available inside custom element components, and only on the client-side.
|
3134 | *
|
3135 | * https://svelte.dev/docs/svelte/$host
|
3136 | */
|
3137 | declare function $host<El extends HTMLElement = HTMLElement>(): El;
|
3138 |
|
3139 | declare namespace $host {
|
3140 | // prevent intellisense from being unhelpful
|
3141 | /** @deprecated */
|
3142 | export const apply: never;
|
3143 | /** @deprecated */
|
3144 | // @ts-ignore
|
3145 | export const arguments: never;
|
3146 | /** @deprecated */
|
3147 | export const bind: never;
|
3148 | /** @deprecated */
|
3149 | export const call: never;
|
3150 | /** @deprecated */
|
3151 | export const caller: never;
|
3152 | /** @deprecated */
|
3153 | export const length: never;
|
3154 | /** @deprecated */
|
3155 | export const name: never;
|
3156 | /** @deprecated */
|
3157 | export const prototype: never;
|
3158 | /** @deprecated */
|
3159 | export const toString: never;
|
3160 | }
|
3161 |
|
3162 | //# sourceMappingURL=index.d.ts.map
|
3163 |
|
\ | No newline at end of file |