Die traditionelle Art, Webkomponenten zu schreiben, ist nicht sehr SSR-freundlich (Server Side Rendering). In diesem Beitrag zeige ich Ihnen, wie Sie reaktive Webkomponenten erstellen können, die mit SSR und jedem JavaScript-Framework (Vue, React, Svelte, Solid, Brisa) oder Vanilla JS funktionieren.

• Einführung
• Eine Webkomponente mit Brisa schreiben
• Erstellen der Webkomponente
• Laden der Webkomponente in ein Vanilla JS-Projekt
• SSR der Webkomponente
• Erzähl mir mehr über Brisa... Bitte...
• Hinweis für Ersteller von Webkomponentenbibliotheken
• Beispiel
• Abschluss

Einführung

Wir werden den Brisa Web Component Compiler verwenden. Brisa ist ein Web-Framework, das nicht nur anderen Frameworks wie Next.js oder Nuxt.js ähnelt, sondern Ihnen auch die Erstellung reaktiver Webkomponenten ermöglicht, die mit Signalen für Reaktivität, mit JSX und mit SSR arbeiten.

Dazu müssen Sie beim Schreiben von Webkomponenten lediglich die Syntax von Brisa kennen. Brisa ist noch nicht öffentlich, da es derzeit 95,48 % der v0.1-Routemap ausmacht, aber wir schätzen, dass es in einem Monat startbereit sein wird und jeder darauf zugreifen kann. Auch wenn es überhaupt nicht öffentlich ist, können Sie es bereits zum Erstellen Ihrer eigenen Webkomponenten-Bibliotheken verwenden.

Mit Brisa eine Webkomponente schreiben

Als Beispiel werden wir eine Webkomponente eines Zählers schreiben, wie immer das klassische Beispiel.

counter-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 verwendet den Namen der Dateien, um den Selektor zu kennen, hier wäre der Selektor counter-wc.

TIPP: Obwohl Brisa noch nicht öffentlich ist, können Sie TypeScript-Typen verwenden, um Sie beim Schreiben von Webkomponenten zu unterstützen.

Im obigen Beispiel wird der Status verwendet, um ein Signal zu erstellen und es dann mithilfe des .value innerhalb des JSX reaktiv zu machen. Bei den Requisiten handelt es sich ebenfalls um besondere Signale, da sie schreibgeschützt sind und der .value nicht verwendet wird, um die Verwendung zu vereinfachen und Standardwerte einfacher zu definieren. Dies erfolgt durch Optimierungen zur Erstellungszeit, ähnlich wie bei React, um als zu agieren wenn sie Signale verwenden würden, aber umgekehrt.

Das CSS-Vorlagenliteral ermöglicht es, auf reaktive Änderungen in diesem Fall der Farbeigenschaft zu reagieren. Dieses CSS-Vorlagenliteral außerhalb dieses Beispiels ist sehr nützlich, um auf einfache Weise reaktive Animationen zu erstellen. Es ist wichtig zu bedenken, dass Webkomponenten mit Shadow DOM funktionieren, sodass das CSS keine Auswirkungen auf den Rest der Seite hat.

Erstellen der Webkomponente

Um die Webkomponente zu erstellen, müssen Sie den folgenden Befehl ausführen:

brisa build -w counter-wc.tsx

Dieser Befehl generiert 2 Dateien:

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

Diese Dateien sind nicht die Webkomponente, sondern nur die Rendering-Funktion der Webkomponente, die zur Build-Zeit optimiert wurde, um so leicht wie möglich zu sein (die ausgegebenen Bytes sind ohne gzip).

Wie laden wir also die Webkomponente?

Laden der Webkomponente in ein Vanilla JS-Projekt

Dazu müssen Sie die Importmap im HTML mit brisa/client hinzufügen und dann die Datei counter-wc.client.js importieren:

Hier würde nur der Rendering-Teil in jede Webkomponentendatei portiert, während alle denselben in der Importmap definierten Brisa-Wrapper verwenden würden, der für die Erstellung der Webkomponente mit den Signalen und dem Schatten-DOM verantwortlich ist.

SSR der Webkomponente

SSR einer Webkomponente kann jetzt dank Declarative Shadow DOM durchgeführt werden. Die Datei counter-wc.server.js wurde bereits mit diesem Verhalten kompiliert, sodass Sie sie nur auf Ihren Server importieren und im HTML rendern und an Ihr Server-Framework anpassen müssen.

Hier ist ein Beispiel mit Bun.js oder Node.js ohne Verwendung von 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);

Führen Sie dann bun run ssr.js aus und Sie sehen den HTML-Code mit der gerenderten Webkomponente unter Verwendung des Declarative Shadow DOM.

Erzähl mir mehr über Brisa... Bitte...

Die Integration dieser Webkomponentenbibliotheken mit Brisa erfolgt über eine Konfigurationsdatei:

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;

Auf diese Weise werden SSR- und TypeScript-Typen automatisch in Ihr Projekt integriert. Und Sie können die Webkomponente in jeder Serverkomponente oder innerhalb einer anderen Webkomponente verwenden.

Wenn Sie mehr erfahren möchten, lade ich Sie ein, den Brisa-Newsletter zu abonnieren, um die neuesten Nachrichten und Updates zu Brisa zu erhalten. Wir gehen davon aus, dass es bis Ende September startbereit sein wird.

Hinweis für Ersteller von Webkomponentenbibliotheken

Wir empfehlen Ihnen, Brisa auszuprobieren, um Ihre eigenen Webkomponentenbibliotheken zu erstellen. Wenn Sie das Abzeichen „made with Brisa“ anbringen, platzieren wir einen Link zu Ihrer Bibliothek auf der Brisa-Seite.

Beispiel

Wenn Sie das GitHub-Repository des Beispiels des Zählers sehen möchten, das wir in diesem Artikel erklärt haben, können Sie einen Blick darauf werfen und es als Referenz für Ihre eigenen Kreationen verwenden:

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

Abschluss

In diesem Beitrag haben wir gesehen, wie man reaktive Webkomponenten erstellt, die mit SSR und jedem JavaScript-Framework oder Vanilla JS funktionieren. Wir haben Brisa zum Erstellen der Webkomponente verwendet und gesehen, wie man sie in ein Vanilla JS-Projekt lädt und wie man damit SSR durchführt.

Ich hoffe, Ihnen hat dieser Beitrag gefallen und Sie haben etwas Neues gelernt. Wenn Sie Fragen haben, zögern Sie nicht, mir diese in den Kommentaren unten zu stellen. Ich helfe Ihnen gerne weiter.

Viel Spaß beim Codieren und genieße den Rest des Sommers! ??