Svelt Cheatsheet

Svelte - Cybernetisch Enhanced Web Apps

Svelte ist ein radikaler neuer Ansatz, um Benutzeroberflächen zu bauen. Während traditionelle Frameworks wie React und Vue den Großteil ihrer Arbeit im Browser tun, verschiebt Svelte, die in einen Kompilierungsschritt arbeiten, der passiert, wenn Sie Ihre App erstellen. < p>

📋 Kopieren Sie alle Befehle 📄 PDF generieren

Inhaltsverzeichnis

• [Installation](#installation
• (#project-creation_)
• [Projektstruktur](#project-structure_
• [Komponente Syntax](LINK_3__
• [Reaktivität](LINK_4__
• [Props](LINK_5__
• [Logic and Templating](#logic-and-templating
• Ereignisse
• (#bindings)
• Lifecycle Functions
• Stores
• (#transitions-and-animations)
• (SvelteKit)(LINK_12_)
• [Bestellung](LINK_13__
• Test
• Beste Praktiken

Installation

Voraussetzungen

```bash

Node.js version requirements

node --version # Should be 16 or later

Check npm version

npm --version

Update npm if needed

npm install -g npm@latest ```_

Projekt Svelte erstellen

```bash

Create new SvelteKit project (recommended)

npm create svelte@latest my-app

Create a basic Svelte project (without SvelteKit)

npm create vite@latest my-app -- --template svelte

Navigate to project

cd my-app

Install dependencies

npm install

Start development server

npm run dev ```_

Manuelle Installation (Vite)

```bash

Create project directory

mkdir my-svelte-project cd my-svelte-project

Initialize package.json

npm init -y

Install Vite and Svelte plugin

npm install --save-dev vite @sveltejs/vite-plugin-svelte

Install Svelte

npm install svelte

Create vite.config.js

// vite.config.js import { defineConfig } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({ plugins: [svelte()] }); ```_

Paket.json Scripts

json { "scripts": { "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json" } }_

Projekterstellung

SvelteKit Projektaufbau

```bash

Interactive setup

npm create svelte@latest my-app

Select options:

- Skeleton project (basic setup)

- Demo app (with examples)

- Library project

Add TypeScript

Add ESLint

Add Prettier

Add Playwright for browser testing

Add Vitest for unit testing

```_

Entwicklungskommandos

```bash

Start development server

npm run dev

Start with specific port

npm run dev -- --port 3000

Start with specific host

npm run dev -- --host 0.0.0.0

Start with open browser

npm run dev -- --open ```_

Befehle erstellen

```bash

Build for production

npm run build

Preview production build

npm run preview

Check for issues

npm run check ```_

Projektstruktur

SvelteKit Projektstruktur

bash my-sveltekit-app/ ├── src/ │ ├── lib/ # Library code (components, utils) │ │ ├── components/ # Reusable components │ │ └── utils/ # Utility functions │ ├── routes/ # File-based routing │ │ ├── +page.svelte # Homepage │ │ ├── about/ # /about route │ │ │ └── +page.svelte │ │ └── blog/ │ │ ├── +page.svelte # /blog index │ │ └── [slug]/ │ │ └── +page.svelte │ ├── app.html # HTML template │ └── app.d.ts # TypeScript declarations ├── static/ # Static assets ├── tests/ # Test files ├── package.json ├── svelte.config.js # SvelteKit configuration └── tsconfig.json_

Vit Projektstruktur

bash my-vite-svelte-app/ ├── public/ # Static assets ├── src/ │ ├── assets/ # Assets │ ├── lib/ # Svelte components │ └── main.js # App entry point ├── index.html # HTML template ├── package.json └── vite.config.js_

Komponenten-Syntax

Hauptkomponenten

```svelte

Hello, {name}!

This is a Svelte component.

```_

Komponenten mit Props

```svelte

Hello, {name}!

{message}

```_

Komponenten mit Logik

```svelte

Counter

Count: {count}

- + Reset

```_

Reaktivität

Reaktive Zuordnungen

```svelte

Clicked {count} {count === 1 ? 'time' : 'times'} ```_

Reaktive Erklärungen

```svelte

{count} * 2 = {doubled}

{doubled} * 2 = {quadrupled}

Increment ```_

Reaktive Aussagen

```svelte

Count: {count} ```_

Aktualisieren von Arrays und Objekten

```svelte

Numbers: {numbers.join(', ')}

Add Number

User: {user.name}, {user.age}

Change Name ```_

Propeller

Erklärungsanträge

```svelte

{heading}

Welcome, {name} ({age})

{#if tags.length > 0}

Tags: {tags.join(', ')}

{/if} ```_

Passende Befehle

```svelte

```_

Type Checking mit TypeScript

```svelte

{name} is {age} years old.

onSave({ name, age })}> Save ```_

Logik und Templatierung

Bedingtes Rendering

```svelte

{#if loggedIn}

Welcome back, {user.name}!

{:else}

Please log in.

{/if}

{#if user.role === 'admin'}

Admin controls

{:else if user.role === 'editor'}

Editor controls

{:else}

User controls

{/if} ```_

Looping

```svelte

{#each cats as cat (cat.id)}
• {cat.name}
{/each}

{#each cats as cat, i}
• {i + 1}: {cat.name}
{/each}

{#each cats as cat}

{cat.name}

{:else}

No cats found.

{/each} ```_

Await Blocks

```svelte

{#await promise}

Loading posts...

{:then posts}

{#each posts as post}
• {post.title}
{/each}

{:catch error}

Error: {error.message}

{/await} ```_

HTML Rendering

```svelte

{@html htmlContent}

{@debug count, user} ```_

Veranstaltungen

DOM Veranstaltungen

```svelte

Click me

console.log('Clicked!')}>Inline ```_

Event Modifiers

```svelte

Inner

Once

```_

Veranstaltungen

```svelte

Notify Parent

```_

Veranstaltung zum Thema

```svelte

Click me ```_

Bindings

Wertebindungen

```svelte

Option 1

Option 2

```_

Gruppenbindungen

```svelte

{#each flavors as flavor} {flavor}

One scoop Two scoops ```_

Komponentenbindungen

```svelte

Value: {text}

```_

Andere Bindings

```svelte

Dimensions: {width} x {height}

```_

Lebenszyklusfunktionen

Auf der Suche

```svelte

```_

vorUpdate und AfterUpdate

```svelte

count++}>Count: {count} ```_

Auf den Wunschzettel

```svelte

```_

Tick

```svelte

{text}

Update ```_

Geschäfte

Schreibbare Stores

```javascript // stores.js import { writable } from 'svelte/store';

export const count = writable(0);

export const user = writable({ name: 'Guest', loggedIn: false }); ```_

```svelte

Count: {$count}

Increment

{#if $user.loggedIn}

Welcome, {$user.name}!

{:else} Login {/if} ```_

Lesbare Stores

```javascript // stores.js import { readable } from 'svelte/store';

export const time = readable(new Date(), (set) => { const interval = setInterval(() => { set(new Date()); }, 1000);

return () => clearInterval(interval); }); ```_

```svelte

Current time: {formattedTime}

```_

Abgeleitete Geschäfte

```javascript // stores.js import { derived } from 'svelte/store'; import { time } from './stores.js';

export const elapsed = derived( time, \(time => Math.round((\)time - new Date()) / 1000) ); ```_

```svelte

Elapsed time: {$elapsed}s

```_

Individuelle Geschäfte

```javascript // stores.js import { writable } from 'svelte/store';

function createCount() { const { subscribe, set, update } = writable(0);

return { subscribe, increment: () => update(n => n + 1), decrement: () => update(n => n - 1), reset: () => set(0) }; }

export const count = createCount(); ```_

Transitionen und Animationen

Übergang

```svelte

Toggle visibility

{#if visible}

Fades in and out

Flies in and out

Slides in and out

Scales in and out

{/if} ```_

Animationen

```svelte

Shuffle

{#each list as item (item)}

{item}

{/each} ```_

Bewegung

```svelte

```_

SvelteKit

Routing

```bash

File-based routing

src/routes/ ├── +page.svelte # Homepage ├── about/+page.svelte # /about ├── blog/[slug]/+page.svelte # /blog/[slug] └── +layout.svelte # Root layout ```_

Daten laden

```svelte

{post.title}

{@html post.content}

export async function load({ params }) { const res = await fetch(https://api.example.com/posts/${params.slug}); const post = await res.json();

return { post }; } ```_

API Routen

```javascript // src/routes/api/posts/+server.js export async function GET() { const posts = await getPostsFromDB(); return new Response(JSON.stringify(posts)); }

export async function POST({ request }) { const data = await request.json(); const newPost = await createPost(data); return new Response(JSON.stringify(newPost), { status: 201 }); } ```_

Layouts

```svelte

```_

Bereitstellung

Statische Website (Adapter Static)

```javascript // svelte.config.js import adapter from '@sveltejs/adapter-static';

export default { kit: { adapter: adapter({ pages: 'build', assets: 'build', fallback: 'index.html' }) } }; ```_

Vervollständigung

```javascript // svelte.config.js import adapter from '@sveltejs/adapter-vercel';

export default { kit: { adapter: adapter() } }; ```_

Netting

```javascript // svelte.config.js import adapter from '@sveltejs/adapter-netlify';

export default { kit: { adapter: adapter() } }; ```_

Node.js Server

```javascript // svelte.config.js import adapter from '@sveltejs/adapter-node';

export default { kit: { adapter: adapter() } }; ```_

Prüfung

!

```bash

Install Vitest

npm install --save-dev vitest @testing-library/svelte ```_

```javascript // tests/Counter.test.js import { render, fireEvent } from '@testing-library/svelte'; import Counter from '../src/lib/components/Counter.svelte';

it('increments counter', async () => { const { getByText } = render(Counter); const button = getByText('Increment');

await fireEvent.click(button);

expect(getByText('Count: 1')).toBeInTheDocument(); }); ```_

Spiel

```bash

Install Playwright

npm install --save-dev @playwright/test ```_

```javascript // tests/e2e/home.spec.js import { test, expect } from '@playwright/test';

test('homepage has correct title', async ({ page }) => { await page.goto('/'); await expect(page).toHaveTitle(/My App/); }); ```_

Best Practices

• **Component Organization*: Halten Sie Komponenten klein und fokussiert. Verwenden Sie ein lib/components Verzeichnis für wiederverwendbare Komponenten.
• Reaktivität: Verwenden Sie reaktive Aussagen ($:) für berechnete Werte. Vermeiden Sie komplexe Logik in Vorlagen.
• Stores: Ladengeschäfte für das globale Staatsmanagement verwenden. Erstellen Sie benutzerdefinierte Speicher für komplexe Logik.
• Props: Verwenden Sie Propeller für die Weitergabe von Daten an Kinderkomponenten. Verwenden Sie export let, um Props zu erklären.
• **Veranstaltungen*: Verwenden Sie Komponentenereignisse für die Kommunikation von Kind zu Eltern. Verwenden createEventDispatcher_.
• Lifecycle: Verwenden Sie onMount für das Abrufen von Daten und die Interaktion mit dem DOM. Verwenden Sie Reinigungsfunktionen, um Speicherlecks zu verhindern.
• **SvelteKit*: Verwenden Sie SvelteKit für neue Projekte, um Routing, Datenbelastung und serverseitige Rendering aus dem Feld zu erhalten.

--

Zusammenfassung

Svelte ist ein leistungsstarker und effizienter Rahmen für den Aufbau von Webanwendungen. Sein Compile-Time-Ansatz führt zu kleineren Bündeln und schnellerer Leistung. Zu den wichtigsten Merkmalen gehören:

• Reaktivität: Einfaches und leistungsstarkes Reaktivitätssystem
• **Komponenten-basiert*: Anwendungen mit wiederverwendbaren Komponenten erstellen
• **Scoped Styles*: CSS ist standardmäßig auf Komponenten ausgelegt
• Stores: Eingebaute staatliche Managementlösung
• **Transitionen und Animationen*: Reiche Reihe von Werkzeugen für die Schaffung von Flüssigkeit UIs
• **SvelteKit*: Ein vollwertiger Rahmen für den Bau von Svelte Apps

Durch die Nutzung der einzigartigen Funktionen von Svelte können Sie schnelle, moderne und beständige Webanwendungen mit einem großen Entwicklererlebnis aufbauen.

<= <= <= <================================================================================= Funktion copyToClipboard() {\cHFFFF} const commands = document.querySelectorAll('code'); alle Befehle = ''; Befehle. Für jede(cmd) => alle Befehle += cmd.textContent + '\n'); navigator.clipboard.writeText (allCommands); Alarm ('Alle Befehle, die in die Zwischenablage kopiert werden!'); }

Funktion generierenPDF() { Fenster.print(); }