Neues aus der Svelte-Welt

Nils Röhrig | Loql

  1. Kerneigenschaften von Svelte

  2. Runen

  3. Event Listeners

  4. Snippets & Render-Tags

  5. Quiz-App Sveltenstein

Was ist Svelte?

Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It’s a love letter to web development.

- Svelte Website

  1. Svelte ist ein UI-Komponenten-Framework.
  2. Svelte hat einen compiler.
  3. Svelte ist „ein Liebesbrief an die Webentwicklung”.

Svelte als Framework

Logo
Register
Home
E-Mail
Submit

etc. pp...

Komponente

Komponente

Komponente

Svelte als Framework

Svelte als Compiler

<h1>Simple Component</h1>

Component.svelte

Svelte als Compiler

Svelte als Compiler

<h1>Simple Component</h1>

Svelte als Compiler

<h1>Simple Component</h1>

Svelte als Compiler

import { SvelteComponent, detach, element, init,
         insert, noop, safe_not_equal } from "svelte/internal";

function create_fragment(ctx) {
  let h1;

  return {
    c() {
      h1 = element("h1");
      h1.textContent = "Simple Component";
    },
    m(target, anchor) {
      insert(target, h1, anchor);
    },
    p: noop,
    i: noop,
    o: noop,
    d(detaching) {
      if (detaching) detach(h1);
    },
  };
}

class SimpleComponent extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default SimpleComponent;

Svelte als Compiler

import * as $ from "svelte/internal/client";

var root = $.template(`<h1>Simple Component</h1>`);

export default function Component($$anchor) {
  var h1 = root();
  $.append($$anchor, h1);
}

Component.js

Svelte als Compiler

<h1>Simple Component</h1>
import { mount } from "svelte";
import Component from "./Component.js";

mount(Component, {
  target: document.querySelector("#root")
});

main.js

Svelte als Liebesbrief

Svelte als Liebesbrief

<!-- DECLARATIVE MARKUP -->
<h1>Hello enterJS folks!</h1>
<p>{"Any expression works here!"}</p>

Component.svelte

<h1>Simple Component</h1>
<script>
  // STATE & BEHAVIOR
</script>

<!-- DECLARATIVE MARKUP -->
<h1>Hello enterJS folks!</h1>
<p>{"Any expression works here!"}</p>

<style>
  /* PRESENTATION */
</style>

Component.svelte

Svelte als Liebesbrief

Logikblöcke

in Svelte

& Direktiven

& Directives

{#if condition}
	<p>The condition is true!</p>
{:else}
	<p>The condition is false!</p>
{/if}

{#each list as item}
	<p>Item: {item}</p>
{/each}

Logikblöcke

in Svelte

& Direktiven

& Directives

Direktiven

in Svelte

Direktiven

in Svelte

& Directives

<script>
	let name = $state("world");
</script>

<h1>Hello {name}!</h1>
Enter your name: <input bind:value={name} />

Direktiven

in Svelte

Runen in Svelte

Runes are symbols that you use in .svelte and .svelte.js / .svelte.ts files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are keywords.

- Svelte Documentation

  1. Runen sind Schlüsselwörter und Teil der Svelte-Syntax
  2. Spezifische Anweisungen an den Svelte-Compiler
  3. Benutzbar innerhalb und außerhalb von Svelte-Komponenten
  • Die $state-Rune
  • Die $derived-Rune
  • Die $effect-Rune
  • Die $props-Rune

Runen in Svelte

Die $state-Rune

Die $state-Rune

<script>
	let name = $state("world");
</script>

<h1>Hello {name}!</h1>
Enter your name: <input bind:value={name} />

Die $state-Rune

<script>
	let name = $state("world");
	let anotherName = "reactivity";
</script>

<!-- This text will change when input is changed -->
<h1>Hello {name}!</h1>
Enter your name: <input bind:value={name} />

<!-- This text won't change when input is changed -->
<h1>Hello {anotherName}!</h1>
Enter another name: <input bind:value={anotherName} />

Die $derived-Rune

Die $derived-Rune

<script>
	let price = $state(1);
	let quantity = $state(0);

	let total = $derived(price * quantity);
</script>


Quantity: <input bind:value={quantity} type="number" />
Price: <input bind:value={price} type="number" />
Total: <output>{total}</output>

Die $effect-Rune

The $effect Rune

<script>
	let quantity = $state(0);

	$effect(() => {    	
        console.log(`You've entered ${quantity}.`);
	});
</script>

Quantity: <input bind:value={quantity} type="number" />

Avoid overusing $effect! When you do too much work in effects, code often becomes difficult to understand and maintain.

- Svelte Documentation

Die $props-Rune

Die $props-Rune

<!-- App.svelte -->
<script>
	import Card from './Card.svelte';
</script>

<Card 
	title="Card Title" 
    body="Card Body." 
    footer="Card Footer."
/>
<!-- Card.svelte -->
<script>
	let { 
    	title, 
    	body, 
    	footer, 
    	...undeclaredProps 
    } = $props();
</script>

<article {...undeclaredProps}>
	<header>{title}</header>
	<div>{body}</div>
	<footer>{footer}</footer>
</article>

Universelle Reaktivität in Svelte 

<script>
	let counter = $state(0);

	const inc = () => counter++;
	const dec = () => counter--;
</script>

<button onclick={dec}>-</button>
<output>{counter}</output>
<button onclick={inc}>+</button>

Universelle Reaktivität in Svelte 

<!-- Svelte 5 -->
<script>
	function getCounter() {
    	let count = $state(0);

    	const inc = () => count++;
    	const dec = () => count--;

    	return {
        	get count() { return count },
        	inc,
        	dec
    	}
	}

	let counter = getCounter();
</script>

<button onclick={counter.dec}>-</button>
<output>{counter.count}</output>
<button onclick={counter.inc}>+</button>

Universelle Reaktivität in Svelte 

<!-- App.svelte -->
<script>
	import { getCounter } from './counter.svelte.js'

	let counter = getCounter();
</script>

<button onclick={counter.dec}>-</button>
<output>{counter.value}</output>
<button onclick={counter.inc}>+</button>
// counter.svelte.js
export function getCounter() {
	let counter = $state(0);

	const inc = () => counter++;
	const dec = () => counter--;

	return {
    	get value() { return counter },
    	inc,
    	dec
	}
}

Universelle Reaktivität in Svelte 

<!-- App.svelte -->
<script>
	import { Counter } from './counter.svelte.js';

	let counter = new Counter();
</script>

<button onclick={() => counter.dec()}>-</button>
<output>{counter.value}</output>
<button onclick={() => counter.inc()}>+</button>
// counter.svelte.js
export class Counter {
	value = $state(0);

	inc() { this.value++; }
	dec() { this.value--; }
}

Universelle Reaktivität in Svelte 

<!-- App.svelte -->
<script>
	import { Counter } from './counter.svelte.js';

	let counter = new Counter();
</script>

<button onclick={() => counter.dec()}>-</button>
<output>{counter.value}</output>
<button onclick={() => counter.inc()}>+</button>
// counter.svelte.js
export class Counter {
	#value = $state(0);

	get value() { return this.#value }
    
	inc() { this.#value++; }
	dec() { this.#value--; }
}

Universelle Reaktivität in Svelte

Event Listeners in Svelte

Event Listeners in Svelte 

<script>
	function onsubmit(event) {
    	event.preventDefault();
    	const formData = new FormData(event.target);
    	console.log(formData.get("name"));
	}

	const handleClick = () => console.log("submitted")
</script>

<form {onsubmit}>
	<input name="name" />
	<button onclick={handleClick}>Submit</button>
</form>

Event Listeners in Svelte 

<!-- App.svelte -->
<script>
	import Input from './Input.svelte'
</script>

<Input oninput={() => console.log("input")} />
<!-- Input.svelte -->
<script>
	let {...restProps} = $props();
</script>

<input {...restProps} />

Snippets & Render-Tags

Snippets & Render-Tags

<script>
	let cards = [{ /*...*/ }, /* ... */];
</script>

{#snippet cardSnippet(title, content)}
	<article class="card">
    	<header>{title}</header>
    	<p>{content}</p>
	</article>
{/snippet}

{#each cards as card}
	{#if card.href}
    	<a href={card.href}>
			{@render cardSnippet(card.title, card.content)}
		</a>
	{:else}
    	{@render cardSnippet(card.title, card.content)}
	{/if}
{/each}

Snippets & Render-Tags

<!-- CardList.svelte -->
<script>
	let cards = [{ /*...*/ }, /* ... */];

	let { titleSnippet, bodySnippet } = $props();
</script>

{#each cards as card}
	<article>
		<header>{@render titleSnippet(card.title)}</header>
		{@render bodySnippet(card.body)}
	</article>
{/each}
<!-- App.svelte -->
<script>
	import CardList from './CardList.svelte';
</script>

{#snippet titleSnippet(title)}
	<strong>{title}</strong>
{/snippet}

{#snippet bodySnippet(bodyCopy)}
	<div>{bodyCopy}</div>
{/snippet}

<CardList {titleSnippet} {bodySnippet} />

Quiz-App Sveltenstein

Vielen Dank!

 

Bluesky:

LinkedIn:

E-Mail:

Code:

nilsroehrig

nr@nroehrig.de

@nilsroehrig.dev

GitHub