Svelte - Comment créer des composants unitaires réutilisables ?

Dans cet article, nous allons voir comment créer des composants unitaires réutilisables à l’aide de Svelte, avec pour objectif d’avoir un widget permettant d’afficher les derniers articles de Korben.info, que nous pourrons ensuite intégrer sur n’importe quel site.

À propos de ESENS

ESENS accompagne ses clients dans leurs projets d’innovation technologique, et ses équipes tout au long de leur parcours professionnel à Paris, Bordeaux, Lyon, Toulouse, Rennes, Nantes, Caen et Lille. Intégrer ESENS, c’est s’offrir la possibilité d’évoluer dans les domaines que vous souhaitez, puisque la société répond aux besoins web, mobile, IoT, design et big data de ses clients, qu’ils soient des startups ou des leaders historiques de leur marché.

Mais la passion première d’ESENS, c’est l’innovation, et ils mettent tout en œuvre pour l’assouvir via les travaux de recherche de leur Lab et les développements de Produits internes de l’Agence.

Donc que vous soyez développeur.se front, back ou full stack, ingénieur.e en BI ou en Big Data, Tech Lead confirmé.e ou jeune diplômé.e, ESENS priorise avant tout l’esprit d’équipe et la motivation pour recruter ses collaborateurs.

Pour en savoir plus sur ESENS et nous rejoindre, rendez-vous sur esensconsulting.com ou sur bit.ly/ESENSrecrute !

Commençons maintenant par poser les bases de ce tuto Svelte :

Qu’est-ce qu’un Web Component ?

Les Web Components sont un ensemble de plusieurs technologies du Web qui permettent de créer des éléments personnalisés, réutilisables et unitaires. Cela signifie que leur code et leurs styles sont isolés pour chaque composant, et qu’ils peuvent donc être utilisés au sein de n’importe quelle page ou application Web.

Regardons un peu comment se compose un Web Component :

[ ](http://korben.info">Korben.info. Pour ce faire, nous allons utiliser le flux RSS gracieusement mis à disposition : https://korben.info/feed. Nous commencerons par créer un composant Svelte standard, et nous verrons ensuite comment faire en sorte que ce composant puisse être utilisé comme Web Component.

Il existe plusieurs méthodes pour créer un projet Svelte utilisant différents outils de compilation. Aujourd’hui, nous utiliserons le template par défaut recommandé par Svelte sveltejs/template, qui va initialiser notre projet avec une configuration rollup.js et un exemple de composant.

Commençons donc par récupérer et installer ce template, à l’aide de l’utilitaire degit :

npx degit sveltejs/template web-component-korben
cd web-component-korben
npm install

Ce qui nous génère un projet avec la structure suivante :