Svelte kit principles
Sveltekit Principles
- structure
- routing
- error handling
- loading data
- binding
- library
- components
Structure
alles in wat in /src moet svelte kit nog dingen in gaan doen.
/src - alles wat svelte kit nog moet uitvoeren /static - alles waar svelte niks hoeft te doen/uit te voeren, afbeeldingen, etc. (niet in je library) /lib - library, components /lib/server - (alleen)server side code. mag niet in +page.server.js of +page.js (moet je data beschermen) /routes - verschillende paden/pagina's
.gitignore - patronen voor bestanden die niet naar git gestuurd worden. bijvoorbeeld - .env, node modules. .env - daar kunnen wachtwoorden in staan. data die beveiligd moet worden. .env.example - soortvan laten zien welke wachtwoorden/data je nodig hebt
package.json - alles wat nodig is om het project te runnen. svelte.config.js - configuratie bestand van svelte. hoe svelte draait en wat voor adapter. vite.config.js - tool om een project te runnen. "builder"
vite is een builder waar svelte in word gedraaid.
sveltekit documentatie doorlezen. voor package.json. moet je weten, belangrijk
Routing
/routes/ [dynamic]/ +page.server.js +page.svelte [static]/ +page.server.js +page.svelte
Error handling
routes/ +error.svelte
<script>
import { page } from `$app/stores
console.log($page.error)
</script>
Er gaat iets mis!!!
{$page.status} - {$page.error.message}
+layout.svelte - soort sjabloon, je kan layouts nesten
<header>
<h1>Dit is een sveltekit project</h1>
</header>
<main>
<slot/> "Er gaat iets mis!!!"
</main>
<footer>
<p>copyright, all rights reservered</p>
</footer>
Loading data
Framework projecten hebben een manier om data in te laden
+page.server.js = asynchroon (wat er zit wachttijd in) server side is "async" nodig
Kan uit .env kan vanuit JS naar +page.svelte
Binding
Framework projecten hebben een manier om data te binden.
<script>
let name = 'world'
$: shout = name + 'rocks!'
</script>
<input bind:value={name}> - hiermee kan je de tekst van de hele html veranderen waar je {name} gebruikt. kan in een tekstbox
<h1>Hello {name}</h1> = <h1> Hello world </p>
<p> hello {shout} </p> = <p> hello world rocks! </p>
Library
De meeste framework projecten hebben een bibliotheek functie
/lib/Header.svelte
<header>
<h1>dit is een svelte project</h1>
</header>
/lib/index.js
export {default as Header} from './Header.svelte'
export {default as Footer} from './Footer.svelte'
componenten in je library met hoofdletter beginnen want dan zie je dat het een component is
/layout.svelte
<script>
import {Header, Footer} from '$lib'
</script>
<Header />
<Footer />
Components
foto