SvelteRuntime

API de composant impérative

Chaque application Svelte débute par créer un composant racine de manière impérative. Sur le client ce composant racine est monté sur un élément spécifique. Sur le serveur, vous souhaitez plutôt renvoyer une chaîne de caractères HTML à construire plus tard. Les fonctions suivantes vous aident à réaliser ces actions.

mount

Instancie un composant et le monte sur la cible fournie :

import { mount(alias) function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exports
import mountMounts 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.
reference } from 'svelte';
import App(alias) type App = SvelteComponent<Record<string, any>, any, any>
(alias) const App: LegacyComponentType
import App from './App.svelte';

const appconst app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any> = mount(alias) mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>, any>, options: MountOptions<...>): {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>
import mountMounts 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.
reference(App(alias) const App: LegacyComponentType
import App, {
	target(property) target: Document | Element | ShadowRootTarget element where the component will be mounted.
: documentvar document: Documentwindow.document returns a reference to the document contained in the window.
MDN Reference
.querySelector(method) ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
('#app'),
	props(property) props?: Record<string, any> | undefinedComponent properties.
: { some(property) some: string: 'property' }
});

Vous pouvez monter plusieurs composants par page, et vous pouvez également monter des composants depuis votre application, par exemple lorsque vous créez un composant d’infobulle et voulez l’attacher à l’élément survolé.

Notez les effets (dont les callbacks onMount et les fonctions d’action) ne seront pas exécutés lors de l’exécution de mount ce qui est au contraire le cas lors de l’exécution de new App(...) en Svelte 4. Si vous avez besoin de forcer l’exécution d’effets en attente (par exemple dans le contexte d’un test par exemple), vous pouvez le faire grâce à flushSync().

unmount

Démonte un composant précédemment créé avec [mount(#mount)] ou hydrate :

Si options.outro vaut true, les transitions seront jourée avant que le composant soit retiré du DOM :

import { mount(alias) function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): Exports
import mountMounts 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.
reference, unmount(alias) function unmount(component: Record<string, any>, options?: {
    outro?: boolean;
} | undefined): Promise<void>
import unmountUnmounts a component that was previously mounted using mount or hydrate.
Since 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.
Returns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// later...
unmount(app, { outro: true });reference } from 'svelte';
import App(alias) type App = SvelteComponent<Record<string, any>, any, any>
(alias) const App: LegacyComponentType
import App from './App.svelte';

const appconst app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any> = mount(alias) mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>, any>, options: MountOptions<...>): {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>
import mountMounts 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.
reference(App(alias) const App: LegacyComponentType
import App, { target(property) target: Document | Element | ShadowRootTarget element where the component will be mounted.
: documentvar document: Documentwindow.document returns a reference to the document contained in the window.
MDN Reference
.body(property) Document.body: HTMLElementThe Document.body property represents the  or  node of the current document, or null if no such element exists.
MDN Reference
 });

// plus tard...
unmount(alias) unmount(component: Record<string, any>, options?: {
    outro?: boolean;
} | undefined): Promise<void>
import unmountUnmounts a component that was previously mounted using mount or hydrate.
Since 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM.
Returns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// later...
unmount(app, { outro: true });reference(appconst app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>, { outro(property) outro?: boolean | undefined: true });

Renvoie une Promise qui résout après que les transitions se soient terminées si options.outro vaut true, ou immédiatement sinon.

render

Seulement disponible sur le serveur et lorsque vous compilez avec l’option server. Prend un composant en argument et renvoie un objet avec des propriétés body et head, qui vous pouvez utiliser pour remplir le HTML lorsque vous effectuez le rendu côté serveur de votre application :

import { render(alias) function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {
    props?: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
    idPrefix?: string;
    csp?: Csp;
    transformError?: (error: unknown) => unknown | Promise<unknown>;
}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {
    props: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
    idPrefix?: string;
    csp?: Csp;
    transformError?: (error: unknown) => unknown | Promise<unknown>;
}]): RenderOutput
import renderOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
reference } from 'svelte/server';
import App(alias) type App = SvelteComponent<Record<string, any>, any, any>
(alias) const App: LegacyComponentType
import App from './App.svelte';

const resultconst result: RenderOutput = render(alias) render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {
    props?: Omit<Record<string, any>, "$$slots" | "$$events"> | undefined;
    context?: Map<any, any>;
    idPrefix?: string;
    csp?: Csp;
    transformError?: ((error: unknown) => unknown | Promise<unknown>) | undefined;
} | undefined): RenderOutput
import renderOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
reference(App(alias) const App: LegacyComponentType
import App, {
	props(property) props?: Omit<Record<string, any>, "$$slots" | "$$events"> | undefined: { some(property) some: string: 'property' }
});
resultconst result: RenderOutput.body(property) SyncRenderOutput.body: stringHTML that goes somewhere into the <body>
; // HTML à mettre quelque part dans une balise `<body>`
resultconst result: RenderOutput.head(property) SyncRenderOutput.head: stringHTML that goes into the <head>
; // HTML à mettre quelque part dans une balise `<head>`

hydrate

Similaire à mount, mais va réutiliser tout HTML construit par le rendu côté serveur de Svelte (venant de la fonction [render(#render)]) au sein de l’élément cible, puis le rendre interactif :

import { hydrate(alias) function hydrate<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;
    props?: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
    transformError?: (error: unknown) => unknown;
} : {
    target: Document | Element | ShadowRoot;
    props: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
    transformError?: (error: unknown) => unknown;
}): Exports
import hydrateHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
reference } from 'svelte';
import App(alias) type App = SvelteComponent<Record<string, any>, any, any>
(alias) const App: LegacyComponentType
import App from './App.svelte';

const appconst app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any> = hydrate(alias) hydrate<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>> | Component<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>, any>, options: {
    ...;
}): {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>
import hydrateHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
reference(App(alias) const App: LegacyComponentType
import App, {
	target(property) target: Document | Element | ShadowRoot: documentvar document: Documentwindow.document returns a reference to the document contained in the window.
MDN Reference
.querySelector(method) ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
('#app'),
	props(property) props?: Record<string, any> | undefined: { some(property) some: string: 'property' }
});

Comme pour mount, les effets ne seront pas exécutées lors de l’exécution de hydrate — exécutez flushSync() immédiatement après si vous en avez besoin.

Modifier cette page sur Github llms.txt

précédent suivant

Méthodes de cycle de vie Données hydratables