From f7e159e8dcd1b500deb6981e1baec6cae54e37e7 Mon Sep 17 00:00:00 2001 From: Timon Jurschitsch Date: Thu, 2 May 2024 10:23:10 +0200 Subject: [PATCH] i18n(de): add solid integration guide --- .../de/guides/integrations-guide/solid-js.mdx | 179 ++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 src/content/docs/de/guides/integrations-guide/solid-js.mdx diff --git a/src/content/docs/de/guides/integrations-guide/solid-js.mdx b/src/content/docs/de/guides/integrations-guide/solid-js.mdx new file mode 100644 index 0000000000000..d672f35020c58 --- /dev/null +++ b/src/content/docs/de/guides/integrations-guide/solid-js.mdx @@ -0,0 +1,179 @@ +--- +type: integration +title: '@astrojs/solid-js' +description: Lerne wie du die @astrojs/solid-js Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen. +githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/' +category: renderer +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + +Diese **[Astro-Integration][astro-integration]** erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen [SolidJS](https://www.solidjs.com/)-Komponenten. + +## 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](#manuelle-installation). + +Um `@astrojs/solid-js` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus. + + + + ```sh + npx astro add solid + ``` + + + ```sh + pnpm astro add solid + ``` + + + ```sh + yarn astro add solid + ``` + + + +Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation. + +### Manuelle Installation + +Installiere zuerst das `@astrojs/solid-js`-Paket: + + + + ```sh + npm install @astrojs/solid-js + ``` + + + ```sh + pnpm add @astrojs/solid-js + ``` + + + ```sh + yarn add @astrojs/solid-js + ``` + + + +Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'solid-js'" (oder eine ähnliche Meldung) erhältst, musst du SolidJS manuell installieren: + + + + ```sh + npm install solid-js + ``` + + + ```sh + pnpm add solid-js + ``` + + + ```sh + yarn add solid-js + ``` + + + +Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest: + +```js title="astro.config.mjs" ins={2} ins="solid()" +import { defineConfig } from 'astro/config'; +import solid from '@astrojs/solid-js'; + +export default defineConfig({ + // ... + integrations: [solid()], +}); +``` + +## Erste Schritte + +Um deine ersten SolidJS-Komponenten in Astro zu verwenden, gehe zu unserer [UI-Framework Dokumentation][astro-ui-frameworks]. Dort lernst du: + +* 📦 wie Framework-Komponenten geladen werden, +* 💧 clientseitige Hydratationsoptionen, und +* 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen + +## Optionen + +### 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. Platzhalter können verwendet werden, um mehrere Dateipfade anzugeben. + +```js title="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/*'], + }), + ], +}); +``` + +## Anwendung + +Du kannst SolidJS-Komponenten wie jede andere [UI-Framework-Komponenten](/de/guides/framework-components/) verwenden. + +### Suspense-Grenzen + +Um Solid Resources und Lazy-Komponenten ohne übermäßige Konfiguration zu unterstützen, werden reine Server- und Hydratation-Komponenten automatisch in Suspense-Grenzen auf der höchsten Ebene eingeschlossen und auf dem Server mithilfe von [`renderToStringAsync`][solid-render-to-string-async ]-Funktion dargestellt. Daher musst du asynchrone Komponenten nicht in Suspense-Grenzen umwickeln. + +Zum Beispiel kannst du Solids [`createResource`][solid-create-resource] verwenden, um asnychron Daten von einem Server zu holen. Diese Daten werden im initialen, server-gerenderten HTML von Astro inkludiert sein: + +```tsx +// CharacterName.tsx +function CharacterName() { + const [name] = createResource(() => + fetch('https://swapi.dev/api/people/1') + .then((result) => result.json()) + .then((data) => data.name) + ); + + return ( + <> +

Name:

+ {/* Luke Skywalker */} +
{name()}
+ + ); +} +``` + +Ebenso werden Solids [Lazy-Komponenten][solid-lazy-components] aufgelöst und deren HTML wird in der ursprünglichen server-gerenderten Seite enthalten sein. + +Nicht-hydratisierende [client:only Komponenten][astro-client-only] werden nicht automatisch in Suspense-Grenzen umwickelt. + +Du kannst gerne weitere Suspense-Grenzen nach Belieben hinzufügen. + +[astro-integration]: /de/guides/integrations-guide/ + +[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen + +[astro-client-only]: /de/reference/directives-reference/#clientonly + +[solid-render-to-string-async]: https://www.solidjs.com/docs/latest/api#rendertostringasync + +[solid-create-resource]: https://www.solidjs.com/docs/latest/api#createresource + +[solid-lazy-components]: https://www.solidjs.com/docs/latest/api#lazy