Zum Inhalt springen

@astrojs/ preact

v3.5.0 GitHub npm Changelog

Diese Astro-Integration ermöglicht serverseitiges Rendering und clientseitige Hydratation deiner Preact-Komponenten.

Warum Preact?

Abschnitt betitelt Warum Preact?

Preact ist eine Bibliothek, mit der du interaktive UI-Komponenten für das Web erstellen kannst. Wenn du interaktive Funktionen auf deiner Website mithilfe von JavaScript erstellen möchtest, bevorzugst du möglicherweise die Verwendung des Komponentenformats anstelle der direkten Verwendung von Browser-APIs.

Preact ist auch eine gute Wahl, wenn du React bereits verwendet hast. Preact bietet dieselbe API wie React, jedoch in einem viel kleineren 3kB-Paket. Es unterstützt sogar das Rendern vieler React-Komponenten mithilfe der Konfigurationsoption compat (siehe unten).

Willst du mehr über Preact erfahren, bevor du diese Integration verwendest?
Du findest ein interaktives Tutorial, “Learn Preact”, auf der Preact-Webseite.

Installation

Abschnitt betitelt Installation

Astro verfügt über einen astro add-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.

Um @astrojs/preact zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.

Terminal-Fenster
npx astro add preact

Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.

Manuelle Installation

Abschnitt betitelt Manuelle Installation

Installiere zuerst das @astrojs/preact-Paket:

Terminal-Fenster
npm install @astrojs/preact

Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung “Cannot find package ‘preact’” (oder eine ähnliche Meldung) erhältst, musst du Preact manuell installieren:

Terminal-Fenster
npm install preact

Wende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


export default defineConfig({
  // ...
  integrations: [preact()],
});

Anwendung

Abschnitt betitelt Anwendung

Um deine ersten Preact-Komponenten in Astro zu verwenden, gehe zu unserer UI-Framework Dokumentation. Dort lernst du:

  • 📦 wie Framework-Komponenten geladen werden,
  • 💧 clientseitige Hydratationsoptionen, und
  • 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen

Konfiguration

Abschnitt betitelt Konfiguration

Die Astro-Preact-Integration verwaltet die Darstellung von Preact-Komponenten und verfügt über eigene Optionen. Ändere diese in der astro.config.mjs-Datei, wo die Einstellungen aller Integration deines Projekts zu finden sind.

Für die einfache Nutzung der Preact-Integration musst du sie nicht konfigurieren.

compat

Abschnitt betitelt compat

Du kannst preact/compat, die Kompatibilitätsebene von Preact zum Rendern von React-Komponenten, aktivieren, ohne größere Pakete von React installieren oder an die Webbrowser deiner Benutzer senden zu müssen.

Setze dafür in einem Optionsobjekt in deiner Preact-Integration compat auf true:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


export default defineConfig({
  integrations: [preact({ compat: true })],
});

Mit der Aktivierung der compat-Option kann die Preact-Integration sowohl React- als auch Preact-Komponenten in deinem Projekt rendern und erlaubt dir auch, React-Komponenten in deinen Preact-Komponenten zu importieren. Du kannst mehr dazu in “Switching to Preact (from React)” auf der Preact-Webseite lesen.

Wenn du React Komponenten-Bibliotheken verwendest, musst du die react und react-dom-Abhängigkeiten als preact/compat überschreiben. Nutze hierzu die overrides-Option in deinem package.json:

package.json
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

In der Dokumentation zu pnpm overrides und yarn resolutions kannst du herausfinden, wie dieses Feature im jeweiligen Package-Manager funktioniert.

devtools

Abschnitt betitelt devtools

Hinzugefügt in: @astrojs/preact@3.3.0

Du kannst die Preact devtools während des Programmierens verwenden, indem du ein Objekt mit devtools: true in die Konfiguration der preact()-Integration hinzufügst:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


export default defineConfig({
  // ...
  integrations: [preact({ devtools: true })],
});

Optionen

Abschnitt betitelt Optionen

Kombination mehrerer JSX-Frameworks

Abschnitt betitelt Kombination mehrerer JSX-Frameworks

Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig.

Verwende dazu die include (erforderlich) und exclude (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der include-Option für jedes Framework, das du nutzt, bereit. Zudem können auch Wildcards verwendet werden, um mehrere Dateipfade anzugeben.

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';


export default defineConfig({
  // Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen.
  // Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig.
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

Beispiele

Abschnitt betitelt Beispiele
  • Das Astro-Preact-Beispiel zeigt dir, wie man interaktive Preact-Komponenten in einem Astro-Projekt verwendet.
  • Das Astro-Nanostores-Beispiel zeigt dir, wie man Zustände zwischen verschiedenen Komponenten — und sogar verschiedenen Frameworks! — in einem Astro-Projekt teilen kann.

Weitere Integrationen

UI-Frameworks

SSR-Adapter

Sonstiges