From bd3596fcba2fff933cb2b0e418b60e3420e8f8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Fri, 18 Oct 2024 08:54:56 -0600 Subject: [PATCH 1/6] feat: Define the MountOptions type --- packages/svelte/types/index.d.ts | 44 ++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 722872313a4e..363c05ed2a29 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -379,26 +379,44 @@ declare module 'svelte' { }): Snippet; /** Anything except a function */ type NotFunction = T extends Function ? never : T; - /** - * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. - * Transitions will play during the initial render unless the `intro` option is set to `false`. - * - * */ - export function mount, Exports extends Record>(component: ComponentType> | Component, options: {} extends Props ? { + 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; - props?: Props; + /** + * 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; } : { - target: Document | Element | ShadowRoot; + /** + * Component properties. + */ props: Props; - anchor?: Node; - events?: Record any>; - context?: Map; - intro?: boolean; - }): Exports; + } + /** + * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. + * Transitions will play during the initial render unless the `intro` option is set to `false`. + * + * */ + export function mount, Exports extends Record>(component: ComponentType> | Component, options: MountOptions): Exports; /** * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component * From 5deb37e8428a9f014d3fede020fbe35c01928e55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Fri, 18 Oct 2024 10:31:34 -0600 Subject: [PATCH 2/6] Revert "feat: Define the MountOptions type" This reverts commit bd3596fcba2fff933cb2b0e418b60e3420e8f8a3. --- packages/svelte/types/index.d.ts | 44 ++++++++++---------------------- 1 file changed, 13 insertions(+), 31 deletions(-) diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 363c05ed2a29..722872313a4e 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -379,44 +379,26 @@ declare module 'svelte' { }): Snippet; /** Anything except a function */ type NotFunction = T extends Function ? never : T; - export type MountOptions = Record> = { - /** - * Target element where the component will be mounted. - */ + /** + * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. + * Transitions will play during the initial render unless the `intro` option is set to `false`. + * + * */ + export function mount, Exports extends Record>(component: ComponentType> | Component, options: {} extends Props ? { 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. - */ + props?: Props; 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. - */ + target: Document | Element | ShadowRoot; props: Props; - } - /** - * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. - * Transitions will play during the initial render unless the `intro` option is set to `false`. - * - * */ - export function mount, Exports extends Record>(component: ComponentType> | Component, options: MountOptions): Exports; + anchor?: Node; + events?: Record any>; + context?: Map; + intro?: boolean; + }): Exports; /** * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component * From 76996964bdd58a8ec7c7f2d9d0e43a7a08ea0b2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Fri, 18 Oct 2024 10:42:50 -0600 Subject: [PATCH 3/6] feat: Define the MountOptions type --- packages/svelte/src/index.d.ts | 36 +++++++++++++ packages/svelte/src/internal/client/render.js | 27 ++-------- packages/svelte/types/index.d.ts | 52 +++++++++++++------ 3 files changed, 76 insertions(+), 39 deletions(-) diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 3955f14dc245..736832a8df1d 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -309,4 +309,40 @@ 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 16e2eb0d4e84..6e86968c7aff 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 722872313a4e..f8330eaad45e 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -305,6 +305,42 @@ 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 +420,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 * From b11367eee6f34e55bacbe0d8532d488b0988204b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Fri, 18 Oct 2024 10:50:49 -0600 Subject: [PATCH 4/6] chore: Add changeset --- .changeset/afraid-turtles-invent.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/afraid-turtles-invent.md diff --git a/.changeset/afraid-turtles-invent.md b/.changeset/afraid-turtles-invent.md new file mode 100644 index 000000000000..9bd5e7255902 --- /dev/null +++ b/.changeset/afraid-turtles-invent.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: export mount() options as the MountOptions type From d6b21f4f6dd615a1fc20f056330772414c15b7b0 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 23 Oct 2024 09:07:42 +0100 Subject: [PATCH 5/6] lint --- packages/svelte/src/index.d.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 736832a8df1d..84c318b7547d 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -333,16 +333,18 @@ export type MountOptions = Record * 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; -}) +} & ({} extends Props + ? { + /** + * Component properties. + */ + props?: Props; + } + : { + /** + * Component properties. + */ + props: Props; + }); export * from './index-client.js'; From cdfa314ea162b6458081a6d2019df9253532a00b Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 23 Oct 2024 09:12:02 +0100 Subject: [PATCH 6/6] lint --- packages/svelte/types/index.d.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index f8330eaad45e..d5f86482d324 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -330,17 +330,19 @@ declare module 'svelte' { * 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; - }) + } & ({} 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;