Le but de cette série de blogs est d'approfondir la bibliothèque Lit et d'acquérir une compréhension complète de ses caractéristiques uniques et de la manière dont elle se distingue des autres bibliothèques et frameworks du marché.

La série est divisée en trois parties, couvrant des sujets tels que
1. Comment fonctionne lit-html ?
2. Comment Lit Element effectue-t-il des mises à jour par lots sur le DOM ?
3. Une comparaison et un benchmarking de Lit avec d'autres frameworks et bibliothèques, ainsi que ses cas d'utilisation potentiels.

Dans ce blog particulier, nous nous concentrerons sur l'exploration du lit-html et de son fonctionnement interne. Mais avant de plonger dans lit-html, commençons par avoir un aperçu de la bibliothèque Lit elle-même.

C'est quoi Lit ?

Lit est une bibliothèque de composants Web légère avec un faible encombrement d'environ 5 Ko.

Il est spécialement conçu pour un développement efficace et rapide de composants d'interface utilisateur à l'aide de spécifications de composants Web, et il améliore encore les performances en introduisant des mises à jour par lots dans le DOM.

En effet, selon un benchmark public réalisé parhttps://krausest.github.io/js-framework-benchmark/index.html, Lit Element a démontré des performances plus rapides par rapport à React.

Pour en savoir plus sur Lit Element, vous pouvez visiter leur site officiel àhttps://lit.dev/. Cependant, l'objectif de cette série est de comprendre comment Lit Element fonctionne et comment il est mis en œuvre.

Lit Element est construit au-dessus de lit-html, qui est une bibliothèque de modèles utilisée pour créer des modèles, et une logique de mise à jour DOM par lots. Lit Element étend lit-html en fournissant des fonctionnalités supplémentaires pour les mises à jour par lots.

Création du modèle lit-html :

Le lit-html est une bibliothèque de modèles JavaScript qui permet la création de modèles à l'aide de littéraux balisés JavaScript et de fonctions de balises, en exploitant les fonctionnalités JavaScript natives et les composants Web.

Contrairement à JSX ou à d'autres bibliothèques de modèles, lit-html ne nécessite pas d'étape de construction pour convertir les modèles ou la syntaxe spécifiques au framework en modèles ou en syntaxe compatibles avec le navigateur, car il utilise directement les fonctionnalités JavaScript natives.

Créons un modèle à l'aide de la bibliothèque lit-html :

Dans cet exemple, nous importons deux fonctions de la bibliothèque lit-html :
1. html, qui est une fonction de balise.
2. render, qui est utilisé pour restituer le modèle au DOM.

Ensuite, nous définissons une fonction appelée myTemplatequi prend un argument name.

Le modèle est défini à l'aide de la htmlfonction de balise, entourée de graduations arrière (``) et contient un extrait de code HTML <div>Hello, ${name}</div>.

est ${name}un espace réservé qui peut être remplacé dynamiquement par une valeur lors de l'exécution en fonction de l'argument passé à la fonction myTemplate.

La htmlfonction tag renvoie un TemplateResultobjet, qui représente le modèle qui peut être rendu au DOM.

Dans les sections à venir, nous explorerons la fonction de balise JavaScript et comment la fonction de balise html est implémentée dans la bibliothèque lit-html.

Dans la dernière ligne de code, nous invoquons la renderméthode, qui rend le modèle.
La renderméthode accepte deux arguments :
a) TemplateResultobjet qui représente le modèle à rendre.
b) Référence à l'élément DOM où le modèle sera rendu.

Fonction tag en JavaScript :

Remarque : Si vous êtes déjà familiarisé avec les fonctions de balise, vous pouvez ignorer cette section.

La fonction de balise en JavaScript est un type spécial de fonction qui peut être utilisé pour traiter les littéraux de modèle, qui sont des chaînes entourées de back ticks (``).

La fonction de balise est appelée immédiatement avant l'évaluation du littéral de modèle et reçoit le littéral de modèle et ses valeurs interpolées en tant qu'arguments distincts.

Par exemple, considérez le code suivant :

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

un. Un tableau de parties statiques du modèle littéral : literalString.
Dans notre exemple, la valeur du literalStringparamètre est['Hello, ', '', raw: Array(2)]

b. Un ou plusieurs arguments correspondant au nombre d'expressions dans le littéral balisé : values. Dans notre exemple, nous utilisons l'opérateur de propagation ( ...) pour le représenter sous forme de tableau. Sa valeur est ['Whatfix'], qui contient les valeurs des expressions utilisées dans le modèle littéral.

Une plongée profonde dans la méthode html :

Voici une implémentation de la htmlfonction tag du lit-htmlréférentiel —https://github.com/lit/lit. (J'ai apporté quelques améliorations au code en supprimant les parties inutiles pour le rendre plus compréhensible).

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

Il forme ensuite un objet, appelé TemplateResult, avec trois paramètres et le renvoie.

Les trois paramètres de TemplateResultincluent _$litType$, des chaînes et des valeurs[].

un. Le paramètre __$litType$ contient le type.
b. Le paramètre strings contient un tableau des parties statiques des littéraux.
c. Le paramètre values[] contient les valeurs des parties dynamiques du littéral.

Dans notre exemple précédent (Modèle — A), myTemplate("whatfix”)la méthode renverra :

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

Une plongée profonde dans la méthode de rendu :

La méthode de rendu dans lit-html est responsable du rendu du composant dans l'interface utilisateur.
Il accepte trois arguments :

un. value — Une TemplateResultvaleur générée par la fonction de balise html, comme indiqué dans la section précédente.

b. conteneur — Une référence à l'élément DOM où le modèle sera rendu.

c. options — Dans un but de simplification, cet argument peut être ignoré pour mieux comprendre le processus.

Nous pouvons visuellement comprendre le fonctionnement de la méthode de rendu dans notre exemple en utilisant un organigramme.

Ensuite, traitons notre exemple de composant, le modèle A, en utilisant l'organigramme susmentionné. Comme nous avons déjà généré un TemplateResultobjet à l'aide de la fonction de balise html, comme indiqué dans la section précédente, nous pouvons maintenant poursuivre le processus de rendu.

L' TemplateResultobjet de notre composant d'exemple, Template A, adoptera la structure suivante :

L'étape suivante consiste à générer l' <template>élément à partir de l' TemplateResultobjet.
Dans notre exemple de composant, le modèle A, qui comprend une partie dynamique représentée par {name}, nous générons un nombre aléatoire à neuf chiffres et l'ajoutons en tant que nœud de commentaire à la place de {name}.
En conséquence, l' <template>élément apparaîtra comme suit :