Nils Röhrig | JavaScript & Angular Days Berlin 2024

Full-Stack Development with

Svelte & SvelteKit (CF Edition)

What is Svelte?

Svelte Component Basics

Nils Röhrig | JavaScript & Angular Days Berlin 2024 Full-Stack Development with Svelte & SvelteKit (CF Edition)

	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;

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

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

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

	import { mount } from "svelte";
	import Component from "./Component.js";

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

	<script lang="ts">
	type CounterProps = {
	initialValue?: number;
	}

	let { initialValue = 0 } = $props();
	let value = $state(initialValue);

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

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

	<script>
	import Counter from './Counter.svelte'
	</script>

	<Counter initialValue={10} />

	<script>
	let condition = false
	</script>

	<p> <input type="checkbox" bind:checked={condition} /> </p>

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

	<script>
	let cards = [{ title: "A Card", content: "This is a card."},
	{
	title: "Another Card",
	content: "This is another card.",
	href: "http://somewhere-on-the-inter.net"
	}]
	</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}

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

	const handleSubmitButtonClick = () => console.log("submit button used")
	</script>

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

	<script>
	import { slide, fade, fly, scale } from 'svelte/transition';
	let showBoxes = $state(true);
	let duration = $state(2000);
	</script>


	<label>Transition duration: <input type="number" bind:value={duration} /></label>
	<label><input type="checkbox" bind:checked={showBoxes} /> Show Boxes</label>

	<div class="boxes">
	{#if showBoxes}
	<div class="box cyan" transition:slide={{duration}}></div>
	<div class="box magenta" in:fade={{duration}}></div>
	<div class="box yellow" out:fly={{y: 200, duration}}></div>
	<div class="box key" transition:scale={{duration}}></div>
	{/if}
	</div>

	<script>
	import { flip } from "svelte/animate";

	let fruits = $state([
	"banana",
	"apple",
	"strawberry"
	])

	const remove = (fruit) => (fruits = fruits.filter(f => f !== fruit));
	</script>

	<ul>
	{#each fruits as fruit (fruit)}
	<li>{fruit} <button onclick={() => remove(fruit)}>remove</button></li>
	{/each}
	</ul>

	# https://github.com/nilsroehrig/taskpal

	git checkout p1_exercise -b <new-branch-name>

	datasource db {
	provider = "sqlite"
	url = env("DATABASE_URL")
	}

	generator client {
	provider = "prisma-client-js"
	previewFeatures = ["driverAdapters"]
	}

	model User {
	id String @id @default(cuid())
	username String @unique
	passwordHash String
	}

	export function getUserByName(username: string) {
	return prisma.user.findFirst({
	where: {
	username
	}
	});
	}

	export function createUser(userInput: UserInput) {
	return prisma.user.create({
	data: {
	username: userInput.username,
	passwordHash: await hash(userInput.password)
	}
	});
	}

	export function GET() {
	const randomQuote = getRandomQuote();
	return new Response(randomQuote);
	}

	export async function POST({request}) {
	const { quote } = await request.json();
	const addedQuote = addRandomQuoteToPool(quote);
	return Response(JSON.stringify(addedQuote));
	}

	export function load ({ params, locals }) {
	const resource = db.getResourceById(params.id);

	if(!resource) {
	error(404);
	}

	if(!canAccessResource(resource, locals.user)) {
	error(403);
	}

	return {
	resource
	}
	}

	<script>
	import { enhance } from '$app/forms';

	const { form } = $props();
	</script>

	<form method="POST" use:enhance>
	{#if !form.success}
	An error occurred!
	{/if}
	<input type="email" name="email">
	<input type="password" name="password">
	<button>Submit</button>
	</form>

	export const actions = {
	default({ request }) {
	const formData = await request.formData();
	const success = validateCredentials(
	formData.get("email"),
	formData.get("password")
	)

	if(!success) {
	return fail(400, { success: false });
	}

	return { success: true };
	}
	}

	import { z } from 'zod';

	export const UserSchema = z.object({
	name: z.string(),
	age: z.number().optional(),
	dateOfBirth: z.coerce.date()
	});

	export type User = z.infer<typeof UserSchema>;

	// passes
	let user = UserSchema.parse({name: "Karl", dateOfBirth: new Date()});

	// throws
	let user = UserSchema.parse({name: 3537, dateOfBirth: new Date() });

	// throws
	let user = UserSchema.parse({name: "Marlene", dateOfBirth: "not-a-date" });

	import { zfd } from 'zod-form-data';

	const Credentials = zfd.formData({
	email: zfd.text(),
	password: zfd.text()
	});

	export const actions = {
	async login({request}) {
	const credentials = Credentials.parse(
	await request.formData()
	);

	const user = await loginWithCredentials(credentials);

	return {
	user
	}
	}
	}

	# https://github.com/nilsroehrig/taskpal

	git checkout p2_exercise -b <new-branch-name>

	export function handleError({error}) {
	// do error handling stuff

	return {
	message: "Error message",
	//... other data
	}
	}

	import { redirect } from '@sveltejs/kit';

	export function handle({event, resolve}) {
	if(event.url.pathname.startsWith("/api")
	&& !userIsAuthenticated()) {
	redirect(302, "/login")
	}
	return resolve(event)
	}

	# https://github.com/nilsroehrig/taskpal

	git checkout p3_exercise -b <new-branch-name>