La manière traditionnelle d'écrire des composants Web n'est pas très conviviale SSR (Server Side Rendering). Dans cet article, je vous montre comment créer des composants Web réactifs qui fonctionnent avec SSR et avec n'importe quel framework JavaScript (Vue, React, Svelte, Solid, Brisa) ou Vanilla JS.

• Introduction
• Écrire un composant Web avec Brisa
• Création du composant Web
• Chargement du composant Web dans un projet Vanilla JS
• SSR du Composant Web
• Parlez-m'en plus sur Brisa... S'il vous plaît...
• Remarque pour les créateurs de bibliothèques de composants Web
• Exemple
• Conclusion

Introduction

Nous allons utiliser le compilateur de composants Web Brisa. Brisa est un framework Web qui, en plus d'être similaire à d'autres frameworks comme Next.js ou Nuxt.js, vous permet également de créer des composants Web réactifs qui fonctionnent avec des signaux de réactivité, avec JSX et avec SSR.

Pour ce faire, il vous suffit de connaître la syntaxe de Brisa lors de l'écriture des composants Web. Brisa n'est pas encore public car il se trouve actuellement à 95,48 % de la feuille de route v0.1, mais nous estimons que dans 1 mois, il sera prêt à être lancé et que tout le monde pourra y accéder. Cependant, même s'il n'est pas du tout public, vous pouvez déjà l'utiliser pour créer vos propres bibliothèques de composants Web.

Écrire un composant Web avec Brisa

A titre d'exemple, nous allons écrire un Composant Web d'un compteur, comme toujours, l'exemple classique.

contre-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa utilise le nom des fichiers pour connaître le sélecteur, ici le sélecteur serait contre-wc.

CONSEIL : Bien que Brisa ne soit pas encore public, vous pouvez utiliser des types TypeScript pour vous guider sur la façon d'écrire des composants Web.

Dans l'exemple ci-dessus, l'état est utilisé pour créer un signal, puis en utilisant le .value, vous le rendez réactif à l'intérieur du JSX. Les accessoires sont également des signaux spéciaux, car comme ils sont en lecture seule, le .value n'est pas utilisé pour le rendre plus facile à utiliser et pour définir plus facilement les valeurs par défaut, cela se fait via des optimisations au moment de la construction, similaires à React pour agir comme s'ils utilisaient des signaux mais l'inverse.

Le littéral du modèle CSS lui permet de réagir aux changements réactifs dans ce cas de la propriété color. Ce modèle CSS littéral en dehors de cet exemple est très utile pour créer facilement des animations réactives. Il est important de se rappeler que les composants Web fonctionnent avec Shadow DOM, donc le CSS n'affecte pas le reste de la page.

Construire le composant Web

Pour créer le composant Web, vous devez exécuter la commande suivante :

brisa build -w counter-wc.tsx

Cette commande générera 2 fichiers :

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

Ces fichiers ne sont pas le composant Web, c'est uniquement la fonction de rendu du composant Web optimisée au moment de la construction pour être aussi légère que possible (les octets qui sortent sont sans gzip).

Alors, comment charger le composant Web ?

Chargement du composant Web dans un projet Vanilla JS

Pour ce faire, vous devez ajouter l'importmap dans le HTML avec brisa/client puis importer le fichier counter-wc.client.js :

Ici, seule la partie rendu serait portée dans chaque fichier de composant Web, alors qu'ils utiliseraient tous le même wrapper Brisa défini dans l'importmap, qui est responsable de la création du composant Web avec les signaux et le shadow DOM.

SSR du Composant Web

La SSR d'un composant Web peut désormais être effectuée grâce au Declarative Shadow DOM. Le fichier counter-wc.server.js a déjà été compilé avec ce comportement, il vous suffit donc de l'importer sur votre serveur, de le restituer au format HTML et de l'adapter à la structure de votre serveur.

Voici un exemple avec Bun.js ou Node.js sans utiliser JSX :

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

Ensuite, exécutez bun run ssr.js et vous verrez le HTML avec le composant Web rendu à l'aide du Declarative Shadow DOM.

Parlez-m'en plus sur Brisa... S'il vous plaît...

L'intégration de ces bibliothèques de composants Web avec Brisa se fait via un fichier de configuration :

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

De cette manière, les types SSR et TypeScript sont automatiquement intégrés à votre projet. Et vous pouvez utiliser le composant Web dans n'importe quel composant serveur ou dans un autre composant Web.

Si vous souhaitez en savoir plus, je vous invite à vous inscrire à la newsletter Brisa pour recevoir les dernières nouvelles et mises à jour sur Brisa. Nous estimons que d'ici fin septembre, il sera prêt à être lancé.

Remarque destinée aux créateurs de bibliothèques de composants Web

Nous vous encourageons à essayer Brisa pour créer vos propres bibliothèques de composants Web. Si vous mettez le badge "made with Brisa", nous mettrons un lien vers votre bibliothèque sur la page Brisa.

Exemple

Si vous souhaitez voir le dépôt GitHub de l'exemple de compteur que nous avons expliqué dans cet article, vous pouvez y jeter un oeil et l'utiliser comme référence pour vos propres créations :

• https://github.com/aralroca/counter-wc

Conclusion

Dans cet article, nous avons vu comment créer des composants Web réactifs qui fonctionnent avec SSR et avec n'importe quel framework JavaScript ou Vanilla JS. Nous avons utilisé Brisa pour créer le composant Web et nous avons vu comment le charger dans un projet Vanilla JS et comment faire du SSR avec.

J'espère que vous avez apprécié cet article et que vous avez appris quelque chose de nouveau. Si vous avez des questions, n'hésitez pas à me les poser dans les commentaires ci-dessous. Je serai heureux de vous aider.

Bon codage et profitez du reste de l'été ! ??