svelte

Le paquet svelte expose les fonctions de cycle de vie et l'API de contexte.

onMountpermalink

ts
function onMount<T>(
  fn: () =>
    | NotFunction<T>
    | Promise<NotFunction<T>>
    | (() => any)
): void;

La fonction onMount permet de planifier l'exécution d'un callback dès que le composant a été monté dans le DOM. Elle doit être appelée pendant l'instantiation du composant (mais elle n'a pas besoin d'être définie à l'intérieur du composant ; elle peut être appelée depuis un module externe).

onMount n'est pas exécutée pas à l'intérieur d'un composant serveur.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('le composant est monté');
  });
</script>

Si une fonction est renvoyée par onMount, celle-ci sera appelée lorsque le composant sera démonté.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const interval = setInterval(() => {
      console.log('beep');
    }, 1000);

    return () => clearInterval(interval);
  });
</script>

Ce comportement ne fonctionne que si la fonction passée à onMount renvoie une valeur de manière synchrone. Les fonctions async renvoient toujours une Promise, ce qui implique qu'elles ne peuvent jamais renvoyer une fonction de manière synchrone.

beforeUpdatepermalink

ts
function beforeUpdate(fn: () => any): void;

Planifie l'exécution d'un callback immédiatement avant la mise à jour du composant, lorsqu'un changement d'état s'est produit.

La première exécution du callback se produit juste avant l'appel du onMount initial.

<script>
  import { beforeUpdate } from 'svelte';

  beforeUpdate(() => {
    console.log('le composant est sur le point de se mettre à jour');
  });
</script>

afterUpdatepermalink

ts
function afterUpdate(fn: () => any): void;

Planifie un callback à exécuter immédiatement après la mise à jour du composant.

La première exécution du callback se produit juste après l'appel du onMount initial.

<script>
  import { afterUpdate } from 'svelte';

  afterUpdate(() => {
    console.log("le composant vient d'être mis à jour");
  });
</script>

onDestroypermalink

ts
function onDestroy(fn: () => any): void;

Planifie un callback à exécuter immédiatement avant que le composant ne soit démonté.

Parmi les callbacks de onMount, beforeUpdate, afterUpdate et onDestroy, c'est le seul qui s'exécute dans un composant côté serveur.

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    console.log('le composant va être détruit');
  });
</script>

tickpermalink

ts
function tick(): Promise<void>;

Renvoie une promesse qui se résout une fois que tous les changements d'état en attente ont été appliqués, ou dans la micro-tâche suivante s'il n'y en a pas.

<script>
  import { beforeUpdate, tick } from 'svelte';

  beforeUpdate(async () => {
    console.log('le composant est sur le point de se mettre à jour');
    await tick();
    console.log('le composant vient de se mettre à jour');
  });
</script>

setContextpermalink

ts
function setContext<T>(key: any, context: T): T;

Associe un objet context arbitraire au composant courant et à la key spécifiée, puis retourne cet objet. Le contexte est alors accessible pour les enfants du composant (y compris le contenu de slot) avec getContext.

Comme les fonctions de cycle de vie, elle doit être appelée pendant l'instantiation du composant.

<script>
  import { setContext } from 'svelte';

  setContext('answer', 42);
</script>

Le contexte n'est pas intrinsèquement réactif. Si vous avez besoin de valeurs réactives dans le contexte, alors vous pouvez passer un store dans le contexte, store qui sera réactif.

getContextpermalink

ts
function getContext<T>(key: any): T;

Récupère le contexte qui appartient au composant parent le plus proche avec la key spécifiée. Doit être appelé pendant l'instantiation du composant.

<script>
  import { getContext } from 'svelte';

  const answer = getContext('answer');
</script>

hasContextpermalink

ts
function hasContext(key: any): boolean;

Vérifie si une clé donnée a été définie dans le contexte d'un composant parent. Doit être appelé pendant l'instantiation du composant.

<script>
  import { hasContext } from 'svelte';

  if (hasContext('answer')) {
    // faites quelque chose
  }
</script>

getAllContextspermalink

ts
function getAllContexts<
  T extends Map<any, any> = Map<any, any>
>(): T;

Récupère l'ensemble des contextes appartenant au composant parent le plus proche. Doit être appelé pendant l'instantiation du composant. Utile, par exemple, si vous créez un composant de manière programmatique et que vous voulez lui passer le contexte existant.

<script>
  import { getAllContexts } from 'svelte';

  const contexts = getAllContexts();
</script>

createEventDispatcherpermalink

ts
function createEventDispatcher<
  EventMap extends Record<string, any> = any
>(): EventDispatcher<EventMap>;

Crée un générateur d'événements qui peut être utilisé pour distribuer les [événements de composants] (/docs#template-syntaxe-component-directives-on-eventname). Les générateurs d'événements sont des fonctions qui peuvent prendre deux arguments : name et detail.

Les événements de composants créés avec createEventDispatcher créent un CustomEvent (en anglais). Ces événements ne suivent pas la chaîne de bubbling. L'argument detail correspond à la propriété CustomEvent.detail (en anglais) et peut contenir tout type de données.

<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
</script>

<button on:click="{() => dispatch('notify', 'detail value')}">Générer un événement</button>

Les événements envoyés par les composants enfants peuvent être écoutés par leur parent. Toutes les données fournies lors de l'envoi de l'événement sont disponibles dans la propriété detail de l'objet événement.

<script>
  function callbackFunction(event) {
    console.log(`Événement généré ! Détail: ${event.detail}`)
  }
</script>

<Child on:notify="{callbackFunction}"/>

Les événements peuvent être annulables en passant un troisième paramètre à la fonction dispatch. La fonction renvoie false si l'événement est annulé avec event.preventDefault(), sinon elle renvoie true.

<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function notify() {
    const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
    if (shouldContinue) {
      // personne n'a appelé preventDefault
    } else {
      // un listener a appelé preventDefault
    }
  }
</script>

Vous pouvez typer le générateur d'évènement pour définir quels évènements il peut recevoir. Cela rendra votre code plus solide à la fois dans le composant (les mauvais appels seront mis en valeur) et lorsque vous utiliserez le composant (les types d'évènements seront réduits). Voir cette section pour plus de détail.

Typespermalink

ComponentConstructorOptionspermalink

ts
interface ComponentConstructorOptions<
  Props extends Record<string, any> = Record<string, any>
> {…}

ts
target: Element | Document | ShadowRoot;

ts
anchor?: Element;

ts
props?: Props;

ts
context?: Map<any, any>;

ts
hydrate?: boolean;

ts
intro?: boolean;

ts
$$inline?: boolean;

ComponentEventspermalink

Type utile pour obtenir les évènements qu'un composant attend. Exemple :

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
    console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

ts
type ComponentEvents<Component extends SvelteComponent_1> =
  Component extends SvelteComponent<any, infer Events>
    ? Events
    : never;

ComponentPropspermalink

Type utile pour obtenir les props qu'un composant attend. Exemple :

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import Component from './Component.svelte';

  const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>

ts
type ComponentProps<Component extends SvelteComponent_1> =
  Component extends SvelteComponent<infer Props>
    ? Props
    : never;

ComponentTypepermalink

Type utile pour obtenir le type d'un composant Svelte. Pratique par exemple lorsqu'on utilise les composants dynamiques avec <svelte:component>.

Exemple:

<script lang="ts">
  import type { ComponentType, SvelteComponent } from 'svelte';
  import Component1 from './Component1.svelte';
  import Component2 from './Component2.svelte';

  const component: ComponentType = someLogic() ? Component1 : Component2;
  const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

ts
type ComponentType<
  Component extends SvelteComponent = SvelteComponent
> = (new (
  options: ComponentConstructorOptions<
    Component extends SvelteComponent<infer Props>
      ? Props
      : Record<string, any>
  >
) => Component) & {
  /** La version "web component" du composant. Seulement présent si compilé avec l'option `customElement` */
  element?: typeof HTMLElement;
};

SvelteComponentpermalink

Classe de base pour les composants Svelte avec quelques améliorations mineures. Utilisé lorsque dev=true.

Peut être utilisé pour créer des composants Svelte fortement typés.

Exemple :permalink

Vous avez une librairie de composants sur npm appelée component-library, depuis laquelle vous exportez un composant appelé MyComponent. Pour les personnes qui utilisent Svelte avec Typescript, vous voulez fournir du typage. Vous créez donc un index.d.ts :

ts
import { SvelteComponent } from "svelte";
export class MyComponent extends SvelteComponent<{foo: string}> {}

Typer ceci permet aux IDEs comme VS Code qui ont l'extension Svelte de fournir de l'Intellisense, et vous pouvez alors utiliser le composant de cette manière dans un fichier Svelte avec Typescript :

<script lang="ts">
  import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />

ts
class SvelteComponent<
  Props extends Record<string, any> = any,
  Events extends Record<string, any> = any,
  Slots extends Record<string, any> = any
> extends SvelteComponent_1<Props, Events> {…}

ts
[prop: string]: any;

ts
constructor(options: ComponentConstructorOptions<Props>);

ts
$capture_state(): void;

ts
$inject_state(): void;

SvelteComponentTypedpermalink

Utilisez plutôt SvelteComponent. Voir la PR plus d'informations : https://github.com/sveltejs/svelte/pull/8512

ts
class SvelteComponentTyped<
  Props extends Record<string, any> = any,
  Events extends Record<string, any> = any,
  Slots extends Record<string, any> = any
> extends SvelteComponent<Props, Events, Slots> {}