@astrojs/ preact
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 InstallationAstro 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.
npx astro add preactpnpm astro add preactyarn astro add preactSollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.
Manuelle Installation
Abschnitt betitelt Manuelle InstallationInstalliere zuerst das @astrojs/preact-Paket:
npm install @astrojs/preactpnpm add @astrojs/preactyarn add @astrojs/preactDie 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:
npm install preactpnpm add preactyarn add preactWende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:
import { defineConfig } from 'astro/config';import preact from '@astrojs/preact';
export default defineConfig({ // ... integrations: [preact()],});Anwendung
Abschnitt betitelt AnwendungUm 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 KonfigurationDie 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.
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:
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:
{ "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:
import { defineConfig } from 'astro/config';import preact from '@astrojs/preact';
export default defineConfig({ // ... integrations: [preact({ devtools: true })],});Optionen
Abschnitt betitelt OptionenKombination mehrerer JSX-Frameworks
Abschnitt betitelt Kombination mehrerer JSX-FrameworksWenn 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.
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.
