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