Lit est l’un des frameworks JavaScript frontaux les plus intéressants pour la programmation réactive. Il a suscité beaucoup d’intérêt de la part des développeurs, mais reste relativement sous le radar par rapport aux autres frameworks réactifs. Lit est construit sur la norme des composants Web et donne la priorité à la vitesse et à un petit ensemble de fonctionnalités utiles.

Créer des composants Web avec Lite

Il existe plusieurs façons de démarrer un projet Lit. Pour ce didacticiel, nous utiliserons un modèle de démarrage. Vous aurez besoin d’une ligne de commande avec Git et Node.js (npm) installée.

Noter: Parce qu’il est basé sur des Web Components, Lit utilise le Shadow DOM pour gagner en réactivité.

Accédez à la ligne de commande et tapez git clone https://github.com/lit/lit-element-starter-js.git. Cette commande déploie un exemple de projet simple dans le lit-element-starter-js annuaire. cd dans ce répertoire et installez les dépendances avec npm install.

Maintenant, vous pouvez exécuter l’application avec npm run serve. Si vous visitez localhost:8000vous verrez l’application s’exécuter avec l’écran illustré à la figure 1. (Cliquez sur le bouton Compter bouton augmente le nombre.)

IDG

Réactivité dans le framework Lite

Ensuite, regardons comment Lit est agencé et comment il atteint la réactivité.

Le travail principal se déroule dans /dev/index.htmlcomme indiqué dans la liste 1.

Listing 1. Réactivité en Lit

 
   
   
   
   
   
   
 
 
   
     
This is child content
   
 

La principale chose à noter est que la page importe une bibliothèque Polyfill pour s’assurer que le navigateur comprendra les composants Web. Il importe également une bibliothèque pour faciliter le chargement des composants Web via npm. Enfin, il importe un module personnalisé, my-element.jsà partir du répertoire parent.

Ensuite, jetez un œil à my-element.js dans le Listing 2, qui contient tous les éléments fondamentaux d’un lit composant.

Listing 2. Éléments d’un composant basé sur Lit

import {LitElement, html, css} from 'lit';
/**
* An example element.
*
* @fires count-changed - Indicates when the count changes
* @slot - This element has a slot
* @csspart button - The button
*/
export class MyElement extends LitElement {
 static get styles() {
   return css`
     :host {
       display: block;
       border: solid 1px gray;
       padding: 16px;
       max-width: 800px;
     }
   `;
 }
 static get properties() {
   return {
     /**
      * The name to say "Hello" to.
      * @type {string}
      */
     name: {type: String},
     /**
      * The number of times the button has been clicked.
      * @type {number}
      */
     count: {type: Number},
   };
 }
 constructor() {
   super();
   this.name="World";
   this.count = 0;
 }
 
 render() {
   return html`
     
${this.sayHello(this.name)}!
     
       Click Count: ${this.count}
     
     
   `;
 }
 _onClick() {
   this.count++;
   this.dispatchEvent(new CustomEvent('count-changed'));
 }
 /**
  * Formats a greeting
  * @param name {string} The name to say "Hello" to
  * @returns {string} A greeting directed at `name`
  */
 sayHello(name) {
   return `Hello, ${name}`;
 }
}
window.customElements.define('my-element', MyElement);

La première chose à noter est que lit prolonge la LitElement classe de base. Vous pourriez également observer que le styles() et properties() sont toutes deux des méthodes getter statiques. Nous n’avons pas à nous soucier des signatures; nous les utilisons juste pour définir les caractéristiques de nos composants.

La styles() La méthode renvoie le CSS pour le composant, et properties() renvoie les propriétés. styles() utilise le css méthode de Lit pour définir le CSS à portée de composant dans un littéral de modèle. properties() expose les variables réactives du composant : name et count. Dans chaque cas, l’objet renvoyé définit le type de variable dans la propriété (par exemple, name: {type: “String”}).

Valeurs de propriété

Notez que les propriétés reçoivent des valeurs par défaut dans le constructeur. Ce sont des propriétés publiques, vous pouvez donc commenter la définition du nom, par exemple, puis dans /dev/index.htmlattribuez une valeur à la propriété name via son parent, comme indiqué dans le Listing 3.

Liste 3. Valeur de la propriété publique

   
     
This is child content
   
 

Le modèle de la liste 3 est courant parmi les frameworks réactifs, permettant le flux d’état unidirectionnel et descendant du parent vers l’enfant.

Rendu du composant

La prochaine étape est la render méthode, qui renvoie le balisage de la vue via la html() méthode et un littéral de modèle. La syntaxe utilisée dans la chaîne littérale est littéral balisé. Notez que cette méthode a un accès complet aux deux propriétés que nous avons vues précédemment (name et count), ainsi que les méthodes définies sur l’objet composant, qui sont définies ensuite.

Méthodes intégrées et personnalisées

Lit a deux types de méthodes : intégrée et personnalisée. La _onClick() La méthode est intégrée, ce qui signifie qu’elle a une signification particulière pour le framework. Lorsque Lit voit cette méthode, il définit le gestionnaire onclick pour le composant donné. Dans ce cas, il incrémente simplement la variable count.

La deuxième méthode est sayHello(name), qui est une méthode personnalisée appelée depuis le balisage de la vue. Notez que cette méthode a un accès complet aux variables qui peuvent être passées en arguments :

${this.sayHello(this.name)}!

Toutes les propriétés et méthodes sont accessibles via le this mot-clé; c’est-à-dire qu’ils sont membres de l’objet.

Enregistrement du composant

Enfin, le composant demande au navigateur de s’enregistrer en tant que composant Web.

Comme avec d’autres frameworks réactifs, Lit vous encourage à écrire du code à sens unique, où le modèle reflète simplement les changements d’état sans modifier directement l’état ou le DOM.

Emplacements et éléments enfants

La norme Web Components utilise fentes. Dans notre exemple, vous pouvez voir que le composant lui-même définit un et le parent qui passe dans un élément enfant (

This is child content

) qui sera placé dans la fente.

Afficher et masquer des éléments

Lit comprend une variété d’expressions utiles, comme la possibilité d’afficher et de masquer des éléments.

Par exemple, si vous vouliez afficher un élément lorsque le compteur dépassait 5, vous pourriez utiliser quelque chose comme ce qui est montré dans le Listing 4.

Listing 4. Afficher et masquer des éléments

return html`
     
${this.sayHello(this.name)}!
     
Not hidden
     
       Click Count: ${this.count}
     
     
   `;

Ajout de fonctionnalités dans Lit

Ajoutons maintenant quelques fonctionnalités à l’exemple. Que diriez-vous d’afficher des collections? Jetez un œil à la liste 5.

Listing 5. Itérer sur un tableau dans Lit

static get properties() {
   return {
     name: {type: String},
     count: {type: Number},
     hobbits: []
   };
 }
 constructor() {
   super();
   this.hobbits = ["Frodo","Sam","Merry","Pippin"];
 }
 render() {
   return html`
     
${this.sayHello(this.name)}!
     
Not hidden
     
       Click Count: ${this.count}
     
     

       ${this.hobbits.map((color) =>
         html`
${color}
`
       )}
     
     
   `;
 }

Le Listing 5 montre comment ajouter un hobbit propriété, initialisez-la avec les quatre hobbits les plus célèbres, puis parcourez-les en utilisant une carte dans la fonction de rendu. Vous remarquerez peut-être que React gère cette séquence de manière très similaire. Vous pouvez également extraire votre logique de bouclage dans une fonction que vous appelez depuis l’intérieur du modèle, comme décrit ici.

Noter: Lit fournit également une directive de répétition, que vous pouvez utiliser pour gérer efficacement les changements d’état de la liste dans certaines situations.

Faire des appels d’API Lit avec jusqu’à

Voyons maintenant comment effectuer un appel d’API à distance. Nous utiliserons l’API du Seigneur des Anneaux pour obtenir une liste de tous les hobbits connus. Vous devrez également récupérer un jeton d’authentification, qui est gratuit et rapide.

Lit a un until directive qui permet d’afficher un contenu alternatif en attendant la résolution d’une promesse. Tout d’abord, ajoutez cette importation à la tête de votre my-element.js: import {until} from 'lit/directives/until.js';.

Ensuite, ajoutez le remoteHobbits au constructeur : this.remoteHobbits = getRemoteHobbits();.

Troisièmement, ajoutez la sortie à la méthode de rendu comme ceci :

${until(this.remoteHobbits, html`Awaiting remote hobbits...`)}

Remarquez qu’ici nous utilisons until d’afficher un message de chargement en attendant la résolution de la promesse de remoteHobbits.

Jetez un œil à la définition de la promesse dans getRemoteHobbits()montré dans le Listing 6.

Listing 6. getRemoteHobbits

const getRemoteHobbits = async () => {
 const response = await fetch("https://the-one-api.dev/v2/character?race=Hobbit",
   {
     "headers": {
       "Authorization":"Bearer "
     }
   }
 );
 const json = await response.json();
 const hobbits = [];
 for (const h of json.docs){
   hobbits.push(html`
${(h.name)}
`);
 }
 return hobbits;
}

Le Listing 6 utilise un appel de récupération normal pour obtenir la liste des caractères, filtrée par race=Hobbit. Notez que vous devez fournir votre jeton d’API dans le Authorization entête.

Enfin, vous rassemblez la réponse JSON dans un ensemble d’éléments de liste et la renvoyez pour l’insérer dans le modèle HTML.

Maintenant, l’interface utilisateur affichera la collection de hobbits de l’API distante.

Vous pouvez trouver la source de cette démonstration dans mon dépôt GitHub.