Skip to content

feat: Define the MountOptions type #13674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/afraid-turtles-invent.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': minor
---

feat: export mount() options as the MountOptions type
38 changes: 38 additions & 0 deletions packages/svelte/src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -309,4 +309,42 @@ export interface EventDispatcher<EventMap extends Record<string, any>> {
): boolean;
}

/**
* Defines the options accepted by the `mount()` function.
*/
export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
/**
* 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<string, (e: any) => any>;
/**
* Used to define context at the component level.
*/
context?: Map<any, any>;
/**
* 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';
27 changes: 3 additions & 24 deletions packages/svelte/src/internal/client/render.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -65,21 +65,7 @@ export function set_text(text, value) {
* @template {Record<string, any>} Props
* @template {Record<string, any>} Exports
* @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
* @param {{} extends Props ? {
* target: Document | Element | ShadowRoot;
* anchor?: Node;
* props?: Props;
* events?: Record<string, (e: any) => any>;
* context?: Map<any, any>;
* intro?: boolean;
* }: {
* target: Document | Element | ShadowRoot;
* props: Props;
* anchor?: Node;
* events?: Record<string, (e: any) => any>;
* context?: Map<any, any>;
* intro?: boolean;
* }} options
* @param {MountOptions<Props>} options
* @returns {Exports}
*/
export function mount(component, options) {
Expand Down Expand Up @@ -175,14 +161,7 @@ const document_listeners = new Map();
/**
* @template {Record<string, any>} Exports
* @param {ComponentType<SvelteComponent<any>> | Component<any>} Component
* @param {{
* target: Document | Element | ShadowRoot;
* anchor?: Node;
* props?: any;
* events?: any;
* context?: Map<any, any>;
* intro?: boolean;
* }} options
* @param {MountOptions} options
* @returns {Exports}
*/
function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) {
Expand Down
54 changes: 39 additions & 15 deletions packages/svelte/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<Props extends Record<string, any> = Record<string, any>> = {
/**
* 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<string, (e: any) => any>;
/**
* Used to define context at the component level.
*/
context?: Map<any, any>;
/**
* 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;
Expand Down Expand Up @@ -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<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {
target: Document | Element | ShadowRoot;
anchor?: Node;
props?: Props;
events?: Record<string, (e: any) => any>;
context?: Map<any, any>;
intro?: boolean;
} : {
target: Document | Element | ShadowRoot;
props: Props;
anchor?: Node;
events?: Record<string, (e: any) => any>;
context?: Map<any, any>;
intro?: boolean;
}): Exports;
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;
/**
* Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
*
Expand Down