diff --git a/.changeset/afraid-turtles-invent.md b/.changeset/afraid-turtles-invent.md new file mode 100644 index 0000000000..9bd5e72559 --- /dev/null +++ b/.changeset/afraid-turtles-invent.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: export mount() options as the MountOptions type diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 3955f14dc2..84c318b754 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -309,4 +309,42 @@ export interface EventDispatcher> { ): boolean; } +/** + * Defines the options accepted by the `mount()` function. + */ +export type MountOptions = Record> = { + /** + * Target element where the component will be mounted. + */ + target: Document | Element | ShadowRoot; + /** + * Optional node inside `target` and when specified, it is used to render the component immediately before it. + */ + anchor?: Node; + /** + * Allows the specification of events. + */ + events?: Record any>; + /** + * Used to define context at the component level. + */ + context?: Map; + /** + * Used to control transition playback on initial render. The default value is `true` to run transitions. + */ + intro?: boolean; +} & ({} extends Props + ? { + /** + * Component properties. + */ + props?: Props; + } + : { + /** + * Component properties. + */ + props: Props; + }); + export * from './index-client.js'; diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 16e2eb0d4e..6e86968c7a 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -1,5 +1,5 @@ /** @import { ComponentContext, Effect, TemplateNode } from '#client' */ -/** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */ +/** @import { Component, ComponentType, SvelteComponent, MountOptions } from '../../index.js' */ import { DEV } from 'esm-env'; import { clear_text_content, @@ -65,21 +65,7 @@ export function set_text(text, value) { * @template {Record} Props * @template {Record} Exports * @param {ComponentType> | Component} component - * @param {{} extends Props ? { - * target: Document | Element | ShadowRoot; - * anchor?: Node; - * props?: Props; - * events?: Record any>; - * context?: Map; - * intro?: boolean; - * }: { - * target: Document | Element | ShadowRoot; - * props: Props; - * anchor?: Node; - * events?: Record any>; - * context?: Map; - * intro?: boolean; - * }} options + * @param {MountOptions} options * @returns {Exports} */ export function mount(component, options) { @@ -175,14 +161,7 @@ const document_listeners = new Map(); /** * @template {Record} Exports * @param {ComponentType> | Component} Component - * @param {{ - * target: Document | Element | ShadowRoot; - * anchor?: Node; - * props?: any; - * events?: any; - * context?: Map; - * intro?: boolean; - * }} options + * @param {MountOptions} options * @returns {Exports} */ function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) { diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 722872313a..d5f86482d3 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -305,6 +305,44 @@ declare module 'svelte' { : [type: Type, parameter: EventMap[Type], options?: DispatchOptions] ): boolean; } + + /** + * Defines the options accepted by the `mount()` function. + */ + export type MountOptions = Record> = { + /** + * Target element where the component will be mounted. + */ + target: Document | Element | ShadowRoot; + /** + * Optional node inside `target` and when specified, it is used to render the component immediately before it. + */ + anchor?: Node; + /** + * Allows the specification of events. + */ + events?: Record any>; + /** + * Used to define context at the component level. + */ + context?: Map; + /** + * Used to control transition playback on initial render. The default value is `true` to run transitions. + */ + intro?: boolean; + } & ({} extends Props + ? { + /** + * Component properties. + */ + props?: Props; + } + : { + /** + * Component properties. + */ + props: Props; + }); /** * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. * It must be called during the component's initialisation (but doesn't need to live *inside* the component; @@ -384,21 +422,7 @@ declare module 'svelte' { * Transitions will play during the initial render unless the `intro` option is set to `false`. * * */ - export function mount, Exports extends Record>(component: ComponentType> | Component, options: {} extends Props ? { - target: Document | Element | ShadowRoot; - anchor?: Node; - props?: Props; - events?: Record any>; - context?: Map; - intro?: boolean; - } : { - target: Document | Element | ShadowRoot; - props: Props; - anchor?: Node; - events?: Record any>; - context?: Map; - intro?: boolean; - }): Exports; + export function mount, Exports extends Record>(component: ComponentType> | Component, options: MountOptions): Exports; /** * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component *