Comment créer un composant Web à l'aide de Stencil.js

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.

Premiers pas avec Stencil.js

Pour démarrer avec Stencil.js, vous devez d'abord l'initialiser sur votre ordinateur.

Pour ce faire, exécutez la commande suivante dans votre terminal node.js :

pochoir d'initialisation npm

Après avoir exécuté la commande, une invite apparaîtra sur votre écran pour vous permettre de sélectionner le projet par lequel vous souhaitez commencer :

Pour continuer, choisissez l'option de composant, saisissez 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 premier-projet-pochoir
installation npm

Création d'un nouveau composant Web

Pour créer un nouveau composant Web dans Stencil.js, créez un chemin de dossier comme src/composants. Le dossier des composants contiendra un fichier TypeScript nommé d'après votre composant, comme Stencil.js utilise le langage TypeScript et JSX pour le développement de composants. Le dossier contiendra également un fichier CSS contenant le style de votre composant.

Par exemple, si vous souhaitez construire un composant appelé "my-button", créez un fichier appelé mon-bouton.tsx et un fichier CSS appelé mon-bouton.css. Dans le mon-bouton.tsx fichier, définissez votre composant à l'aide de l'API Stencil.js :

importer { Composant, h } depuis'@stencil/core';
@Composant({
 étiqueter: 'mon-bouton',
 StyleUrl: 'mon-bouton.css',
 ombre: vrai,
})
exporterclasseMonBouton{
 rendre() {
retour (
Cliquez sur moi</button>
 );
 }
}

Ce code importe le Composant et h fonctions de Stencil.js. Le Composant fonction définit le composant, tandis que la fonction h fonction crée son balisage en HTML.

Définissez votre composant à l'aide de la @Composant décorateur, qui prend un objet avec trois propriétés: étiqueter, styleUrl, et ombre.

Le étiqueter propriété contient le nom de balise du composant. Le styleUrl La propriété spécifie le fichier CSS pour styliser l'élément personnalisé. Enfin, le ombre La propriété 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 de rendu, vous créez un élément de bouton.

En plus de styleUrl propriété, vous pouvez utiliser deux propriétés supplémentaires pour styliser votre composant: style et styleUrls.

Le style La propriété définit les styles en ligne pour le composant. Il prend une valeur de chaîne qui représente les styles CSS pour le composant :

importer { Composant, h } depuis'@stencil/core';
@Composant({
 étiqueter: 'mon-bouton',
 style: `
 bouton {
 rembourrage: 1rem 0.5rem;
 border-radius: 12px ;
 famille de polices: cursive ;
 bordure: aucune ;
 couleur: #e2e2e2 ;
 Couleur de l'arrière plan: #333333;
 font-weight: gras ;
 }
`,
 ombre: vrai,
})
exporterclasseMonBouton{
 rendre() {
retour (
Cliquez sur moi</button>
 );
 }
}

Le styleUrls La propriété spécifie plusieurs fichiers CSS externes pour styliser le composant. Il prend un tableau de valeurs de chaîne représentant les chemins vers les fichiers CSS :

importer { Composant, h } depuis'@stencil/core';
@Composant({
 étiqueter: 'mon-bouton',
 styleUrl: ['mon-bouton.css', 'un autre bouton.css'],
 ombre: vrai,
})
exporterclasseMonBouton{
 rendre() {
retour (
Cliquez sur moi</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 :

html>
<htmldirecteur="ltr"langue="fr">
<diriger>
<métajeu de caractères="utf-8" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<lienhref=""rel="feuille de style">
<titre>Démarreur de composant de pochoirtitre>
<scénariotaper="module"src="/build/first-stencil-project.esm.js">scénario>
<scénarioaucun modulesrc="/build/first-stencil-project.js">scénario>
diriger>
<corps>
<mon-bouton>mon-bouton>
corps>
html>

Vous pouvez maintenant 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 de composants Web, et sa compatibilité avec tous les navigateurs modernes garantit que vos composants fonctionneront correctement sur différentes applications Web.

Alors que les composants Web deviennent de plus en plus populaires, Stencil.js est un framework que vous devriez considérer lors de la création d'éléments réutilisables pour le Web.