i18n(de): add svelte integration (withastro#7768)

* i18n(de): add svelte integration * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Because789 <hubiontheroad@yahoo.com> * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Because789 <hubiontheroad@yahoo.com> * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> * Update src/content/docs/de/guides/integrations-guide/svelte.mdx Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> --------- Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> Co-authored-by: Because789 <hubiontheroad@yahoo.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
wpplumber · May 9, 2024 · 1271b8d · 1271b8d
1 parent 40cd09f
commit 1271b8d
Showing 1 changed file with 158 additions and 0 deletions.
diff --git a/src/content/docs/de/guides/integrations-guide/svelte.mdx b/src/content/docs/de/guides/integrations-guide/svelte.mdx
@@ -0,0 +1,158 @@
+---
+type: integration
+title: '@astrojs/svelte'
+description: Lerne wie du die @astrojs/svelte Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen.
+githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
+category: renderer
+i18nReady: true
+---
+
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
+
+Diese **[Astro-Integration][astro-integration]** erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen [Svelte-Komponenten](https://svelte.dev). Sie unterstützt Svelte 3, 4 und 5 (experimentell).
+
+## 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/svelte` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+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/svelte`-Paket:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'svelte'" (oder eine ähnliche Meldung) erhältst, musst du Svelte manuell installieren:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest:
+
+```js title="astro.config.mjs" ins={2} ins="svelte()"
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+
+export default defineConfig({
+  // ...
+  integrations: [svelte()],
+});
+```
+
+## Erste Schritte
+
+Um deine ersten Svelte-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
+
+Diese Integration wird durch `@sveltejs/vite-plugin-svelte` ermöglicht. Um den Svelte-Compiler anzupassen, können Optionen für die Integration genutzt werden. Weitere Informationen findest du in der [`@sveltejs/vite-plugin-svelte`-Dokumentation](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md).
+
+### Standardoptionen
+
+Diese Integration nutzt die folgenden Standardoptionen für den Svelte-Compiler:
+
+```js
+const defaultOptions = {
+  emitCss: true,
+  compilerOptions: { dev: isDev, hydratable: true },
+  preprocess: vitePreprocess(),
+};
+```
+
+Die Einstellungen für `emitCss`, `compilerOptions.dev` und `compilerOptions.hydratable` sind notwendig, um Astro korrekt zu erzeugen, und dürfen nicht überschrieben werden.
+
+Wenn du eine eigene `preprocess`-Option verwendest, **wird** diese den Standard von [`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) überschreiben. Stelle sicher, dass du die notwendigen Preprocessor-Flags für dein Projekt aktivierst.
+
+Du kannst die Einstellungen der `svelte`-Integration entweder in der `astro.config.mjs`-Datei oder in der `svelte.config.js`-Datei ändern. Beides überschreibt die Standardeinstellung von `preprocess`:
+
+```js title="astro.config.mjs" "preprocess: []"
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+
+export default defineConfig({
+  integrations: [svelte({ preprocess: [] })],
+});
+```
+
+```js title="svelte.config.js"
+export default {
+  preprocess: [],
+};
+```
+
+## Intellisense für TypeScript
+
+<Since v="2.0.0" pkg="@astrojs/svelte" />
+
+Wenn du einen Preprocessor wie TypeScript oder SCSS für deine Svelte-Dateien benötigst, kannst du eine `svelte.config.js`-Datei erstellen, damit die Svelte-IDE-Erweiterung die Svelte-Dateien korrekt analysieren kann.
+
+```js title="svelte.config.js"
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+  preprocess: vitePreprocess(),
+};
+```
+
+Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du `astro add svelte` ausführst.
+
+[astro-integration]: /de/guides/integrations-guide/
+
+[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen