30.09

Sveltekit principes

Structure

Framework projecten hebben een vaste structuur.

app.html - de schil, hier worden je pages in geladen soort van src - alles wat Sveltekit dingen mee gaat doen src/routes - de routes / pages. src/lib - bibliotheek, hier zet je de componenten src/lib/server - mag alleen serverside code in staan. static - hier doet Sveltekit niks mee, is statisch .gitignore - patronen voor bestanden die niet naar git verstuurd worden, zoals de .env . ook zorgen dat je node modules er niet in staan, is kut met pull requests. .env - environment variables voor gevoelige data zoals API key, wachtwoord, enz .env.example - handreiking voor andere mensen die jouw projecten willen gebruiken, staat als het ware deze gegevens heb je nodig package.json - de packages die als dependency gelden voor dit project, alles wat nodig is om dit project te runnen. svelte.config.js - configuratie voor Svelte, hierin staat hoe Svelte draait, wat voor adapter er gebruikt word. vite.config.js - configuratie voor Vite, hoe het project gerund word, build tool

Routing

Framework projecten hebben een manier om routing af te handelen.

routes/
- [dynamic]/
  - +page.svelte
- static /
  - +page.svelte
- +page.svelte

Error handling

Error pagina’s maken

routes / +error.svelte - hierbij nog stukje svelte werkend Hierbij word je automatisch hier naar toe gestuurd als je een verkeerde URL hebt of er iets anders fout gaat

import page from '$app/stores'

$page.error = de status of foutmelding

{$page.status} {$page.error.message} = 404 not found

routes / +layout.svelte - Layouts kunnen genest worden.

Loading data

page.server.js - async verplicht omdat de data aan de serverside is, zit er wachttijd tussen oproepen en aanleveren van de data.

export - word gebruikt om data te importeren

import {public_api_url} from '$env/static/public'

Binding en reactivity

Het koppelen van variabele of de waarde daarvan aan een element.

<script>
let name = 'world'
$: shout = name + ' rocks'
</script>

<input bind:value={name} />
<h1>Hello {name}!</h1>
<p>{shout}</p>

Hier word een variabele gebind en gebruikt. ✨ reactiviteit ✨.

$: - zorgt dat het de geupdate naam gebruikt.

Library

lib - de library

Componenten in de library begin je met een hoofdletter, zo zie je in een keer dat het een component is.

Kan ook in layout gebruikt worden. en dynamisch gebruikt worden.

index.js in de library is en verzameling van componenten ??

Components

01.10

check-in met Declan

• Waar wil je op filteren?? :
  • Dingen waar je op wilt filteren kunnen geen vrije invoer zijn, geef voorgedefinieerde opties waar uit gekozen kan worden.
  • Zorg dat het duidelijk is wat er overal in gevoerd mag of kan worden.
• Waarom de H1 in component? waarom geen CSS class?
  • waarom geen slots?
• Denk bij componenten aan de verschillende versies die je nodig hebt, zo werkt dit bij vacature wel maar bij de over ons pagina minder goed ivm de image
  • —> landing-section

aria dingen en transities in svelte

documentatie in de issue!