Skip to main content
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 { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): 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.


mount } from 'svelte';
import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const 
const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>
app = 
mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>
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.


mount(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRoot
Target element where the component will be mounted.


target: var document: Document
MDN Reference


document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
Returns the first element that is a descendant of node that matches selectors.


MDN Reference


querySelector('#app'),
	props?: Record<string, any> | undefined
Component properties.


props: { some: stringsome: '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 { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): 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.


mount, 
function unmount(component: Record<string, any>, options?: {
    outro?: boolean;
} | undefined): Promise<void>
Unmounts 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 });
unmount } from 'svelte';
import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const 
const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>
app = 
mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>
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.


mount(const App: LegacyComponentTypeApp, { target: Document | Element | ShadowRoot
Target element where the component will be mounted.


target: var document: Document
MDN Reference


document.Document.body: HTMLElement
Specifies the beginning and end of the document body.


MDN Reference


body });

// plus tard...

function unmount(component: Record<string, any>, options?: {
    outro?: boolean;
} | undefined): Promise<void>
Unmounts 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 });
unmount(
const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>
app, { outro?: boolean | undefinedoutro: 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 { 
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>;
}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {
    props: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
}]): RenderOutput
Only 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.


render } from 'svelte/server';
import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const const result: RenderOutputresult = 
render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {
    ...;
} | undefined): RenderOutput
Only 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.


render(const App: LegacyComponentTypeApp, {
	props?: Omit<Record<string, any>, "$$slots" | "$$events"> | undefinedprops: { some: stringsome: 'property' }
});
const result: RenderOutputresult.RenderOutput.body: string
HTML that goes somewhere into the &#x3C;body>


body; // HTML à mettre quelque part dans une balise `<body>`
const result: RenderOutputresult.RenderOutput.head: string
HTML that goes into the &#x3C;head>


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 { 
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;
} : {
    target: Document | Element | ShadowRoot;
    props: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: 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


hydrate } from 'svelte';
import 
type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentType
App from './App.svelte';

const 
const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>
app = 
hydrate<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: {
    ...;
}): {
    ...;
} & Record<...>
Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component


hydrate(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRoottarget: var document: Document
MDN Reference


document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
Returns the first element that is a descendant of node that matches selectors.


MDN Reference


querySelector('#app'),
	props?: Record<string, any> | undefinedprops: { some: stringsome: '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

précédent suivant
Méthodes de cycle de vie