Créez des composants Web réactifs avec SSR

La manière traditionnelle d'écrire des composants Web n'est pas très conviviale pour le 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.

• Présentation
• Écrire un composant Web avec Brisa
• Construire le 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 Brisa Web Component Compiler. 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.

Logo Brisa

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 (
    <div>
      <button onClick={() => count.value++}>+</button>
      {count.value}
      <button onClick={() => count.value--}>-</button>
    </div>
  );
}

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 seulement la fonction de rendu du composant Web optimisé au moment de la construction pour être aussi léger que possible (les octets qui sortent sont sans gzip).

Alors, comment charge-t-on 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 :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brisa Web Component Example</title>
    <script type="importmap">
      {
        "imports": {
          "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
        }
      }
    </script>
    <script type="module" src="https://unpkg.com/counter-wc@latest"></script>
  </head>
  <body>
    <counter-wc start="15"></counter-wc>
  </body>
</html>

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 se faire 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 au framework 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 = `
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brisa Web Component Example</title>
    <script type="importmap">
    {
        "imports": {
            "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
        }
    }
    </script>
    <script type="module" src="https://unpkg.com/counter-wc@latest"></script>
    </head>
    <body>
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    </body>
</html>
`;

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é.

Note for Web Component library creators

We encourage you to try Brisa to create your own Web Component libraries. If you put the "made with Brisa" badge, we will put a link to your library on the Brisa page.

<a href="https://brisa.build" target="_blank" rel="noopener noreferrer">
  <img
    width="150"
    height="42"
    src="https://aralroca.com/images/blog-images/brisa_badge.svg"
    alt="Made with Brisa"
  />
</a>

Example

If you want to see the GitHub repository of the example of the counter that we have explained in this article, you can take a look and use it as a reference for your own creations:

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

Conclusion

In this post, we have seen how to build reactive Web Components that work with SSR and with any JavaScript framework or Vanilla JS. We have used Brisa to build the Web Component and we have seen how to load it in a Vanilla JS project and how to do SSR with it.

I hope you have enjoyed this post and that you have learned something new. If you have any questions, do not hesitate to ask me in the comments below. I will be happy to help you.

Happy coding and enjoy the rest of the summer! ??

Enjoy the rest of the summer!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!