Les composants web sont un ensemble de technologies qui vous permettent de créer des éléments réutilisables et de les réutiliser dans différentes applications web.
Stencil.js est un compilateur qui génère des composants web compatibles avec tous les navigateurs modernes. Il fournit des outils et des API pour vous aider à créer des composants web rapides, efficaces et évolutifs.
Démarrer avec Stencil.js
Pour commencer à utiliser Stencil.js, vous devez d’abord l’initialiser sur votre ordinateur.
Pour ce faire, exécutez la commande suivante dans votre terminal node.js :
npm init stencil
Après avoir exécuté la commande, une invite apparaîtra sur votre écran pour vous permettre de sélectionner le projet avec lequel vous voulez commencer :
Pour continuer, choisissez l’option composant, entrez le nom de votre projet et confirmez votre sélection :
Ensuite, allez dans le répertoire de votre projet et installez vos dépendances en exécutant ces commandes :
cd first-stencil-project
npm install
Création d’un nouveau composant Web
Pour créer un nouveau composant Web dans Stencil.js, créez un chemin d’accès au dossier comme suit src/composants. Le dossier components contiendra un fichier TypeScript nommé d’après votre composant, car Stencil.js utilise le langage TypeScript et JSX pour le développement de composants. Le dossier contiendra également un fichier CSS qui contient le style de votre composant.
Par exemple, si vous souhaitez créer un composant appelé « mon-bouton », créez un fichier appelé mon-bouton.tsx et un fichier CSS appelé mon-bouton.css. Dans le fichier my-button.tsx définissez votre composant à l’aide de l’API Stencil.js :
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Ce code importe l’API Composant et h fonctions de Stencil.js. Les fonctions Composant définit le composant, tandis que la fonction h La fonction « HTML » crée son balisage à l’aide du langage HTML.
Définissez votre composant à l’aide de la fonction @Composant qui prend un objet avec trois propriétés : balise, styleUrlet ombre.
Le tag contient le nom de la balise du composant. La propriété styleUrl spécifie le fichier CSS permettant de styliser l’élément personnalisé. Enfin, la propriété shadow est une valeur booléenne qui indique si le composant utilisera Shadow DOM pour encapsuler les styles et le comportement de l’élément personnalisé. Dans la méthode render, vous créez un élément bouton.
En plus de la propriété styleUrl vous pouvez utiliser deux autres propriétés pour donner du style à votre composant : style et styleUrls.
Le style définit les styles en ligne du composant. Elle prend une valeur de type chaîne qui représente les styles CSS du composant :
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-button',
style: `
button {
padding: 1rem 0.5rem;
border-radius: 12px;
font-family: cursive;
border: none;
color: #e2e2e2;
background-color: #333333;
font-weight: bold;
}
`,
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
La propriété styleUrls spécifie plusieurs fichiers CSS externes pour styliser le composant. Elle contient un tableau de chaînes de caractères représentant les chemins d’accès aux fichiers CSS :
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-button',
styleUrls: ['my-button.css', 'another-button.css'],
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Rendu du composant Web
Une fois que vous avez créé votre composant Web, vous pouvez le rendre dans un fichier HTML en ajoutant une balise d’élément personnalisée. Voici comment vous pouvez inclure le composant my-button :
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<title>Stencil Component Starter</title>
<script type="module" src="/build/first-stencil-project.esm.js"></script>
<script nomodule src="/build/first-stencil-project.js"></script>
</head>
<body>
<my-button></my-button>
</body>
</html>
Vous pouvez désormais créer des composants Web à l’aide de Stencil.js
Stencil.js est un outil puissant pour créer des composants web rapides, efficaces et évolutifs. Son API et ses outils facilitent la création et la gestion des composants Web, et sa compatibilité avec tous les navigateurs modernes garantit le bon fonctionnement de vos composants dans différentes applications Web.
Les composants web devenant de plus en plus populaires, Stencil.js est un framework que vous devriez considérer pour construire des éléments réutilisables pour le web.