Un petit guide des composants asynchrones dans Svelte 5

Je n'ai trouvé aucune solution efficace pour cela en ligne, alors j'ai pensé à la partager une fois que je l'ai fait fonctionner.

Le problème : les composants asynchrones

J'avais besoin d'une page de maintenance qui prendrait en charge l'intégralité du site lorsqu'elle était activée, mais la charger à chaque visite de page semblait inutile. Le composant ne doit se charger que lorsqu'il est réellement nécessaire.

La solution : combiner {#await} avec des importations dynamiques

Le bloc {#await} dans Svelte vous permet de gérer les promesses directement dans votre modèle. Associez cela à Dynamic import() pour un chargement paresseux et vous obtenez un moyen concis et clair de gérer les composants asynchrones.

Voici le code :

<script>
  // info.maintenance (boolean) && info.maintenance_ends (timestamp)
  export let info;
   const MaintenanceComponent = info?.maintenance 
    ? import("$lib/components/Maintenance.svelte")
    : null;
</script>

{#if MaintenanceComponent}
  {#await MaintenanceComponent then M}
    {@const Maintenance = M.default}
    <Maintenance time={info.maintenance_ends} />
  {:catch error}
    <p>Failed to load maintenance page: {error.message}</p>
  {/await}
{/if}

Que se passe-t-il ici ?

• Importation dynamique : J'ai utilisé import() pour charger le composant Maintenance.svelte de manière asynchrone. Cela garantit que le composant n'est chargé que lorsque le mode maintenance est activé.
• {#await} Bloc : Ce bloc me permet d'attendre l'import.
• {@const} : Svelte 5 introduit {@const} dans les blocs de modèles, ce qui vous permet d'extraire l'export par défaut (M.default) dans une variable locale.

Conseil de pro : Gardez les opérations asynchrones hors des runes $effect – elles ne fonctionnent pas bien ensemble, et TypeScript vous le fera savoir.

Bon piratage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!