[[oktatas:web:svelte|< Svelte]]

====== Svelte ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Kezdés =====

Webhely:
  * https://svelte.dev/

Ebben a leírásban a SvelteKit keretrendszert használjuk, ami most lett 1.0. Webhelye:

  * https://kit.svelte.dev/
===== Projekt kezdése =====

<code>
npm create svelte@latest app01
cd app01
npm install
npm run dev
</code>

Amikor elkészítjük a projektet, nem telepíti a függőségeket. Azt külön paranccsal szükséges telepíteni.

A create parancs kimenete a következőhöz hasonló lehet:

<code>
npm create svelte app01

create-svelte version 2.0.1

Welcome to SvelteKit!

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd app01
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat
</code>


===== Beépített szerver indítása =====

  npm run dev

A <nowiki>--open</nowiki> kapcsoló hatására megnyílik új ablakban.



<code>
npm run dev -- --open

> app01@0.0.1 dev
> vite dev --open


Forced re-optimization of dependencies

  VITE v4.0.3  ready in 540 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
18:04:38 [vite-plugin-svelte] ssr compile done.
package	files	  time	   avg
app01  	    3	38.9ms	13.0ms
</code>



===== Főoldal szerkesztése =====


Szerkesszük a főoldlat:
  editor src/routes/+page.svelte

===== Routing =====

A SvelteKit egy fájlrendszer alapú útválasztót használ.

Készítsünk egy /about útvonalat is. Ehhez hozzunk létre a routes könyvtárban egy about könyvtárat. Abban egy +page.svelete nevű fájlt. 

Részlet a projekt könyvtárszerkezetéből:
<code>
app01/
  |-src/
     |-routes/
        |-about/
        |  `-+page.svelte
        |-+page.svelte
</code>

Amikor létrehozunk egy src/routes/about könyvtárat, akkor létrejön egy /about útvonal.

Készítsünk menüt. A két fájl tartalma:

<code html src/routes/+page.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>

<h1>Főoldal</h1>
</code>


<code html src/routes/about/+page.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>

<h1>Névjegy</h1>
</code>


===== Layout =====

Készítsünk egy +layout.svelte fájlt a routes könyvtárban. Tegyük bele a navigációs részt valamelyik oldalról. Az oldalakról törölhetjük. 

<code html src/routes/+layout.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>
</code>

<code html src/routes/+page.svelte>
<h1>Főoldal</h1>
</code>


<code html src/routes/about/+page.svelte>
<h1>Névjegy</h1>
</code>


Jelenleg működik a navigáció, de az oldaltartalmak nem jelennek meg. 

Most tegyünkegy "slot" taget a +layout.svelte fájlba:

<code html src/routes/+layout.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>

<slot><slot>
</code>


A slot helyére beépül page oldal. Ellenőrizzük a böngészőben.


Akár lábrészt is rakhatunk a slot elemek alá:

<code html src/routes/+layout.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>

<slot></slot>

<footer>
    Nagy János, 2022-12-25
</footer>
</code>


===== Komponensek =====


Készítsünk az src könyvtárban egy components könyvtárat.
Ebben készítsünk egy Nav.svelte és egy Footer.svelte fájlt. Mozgassuk át a +layout.svelte tartalmát a két fájlba. Értelemszerűen a navigációt a Nav.svelte, a lábrészt a Footer.svelte fájlba. 

Részlet a projekt könyvtárfájából:
<code>
app01/
  |-src/
     |-components/
     |  |-Footer.svelte
     |  `-Nav.svelte
     |-routes/
        |-about/
        |  `-+page.svelte
        |-+layout.svelte
        |-+page.svelte
</code>


<code html src/components/Footer.svelte>
<footer>
    Nagy János, 2022-12-25
</footer>
</code>

<code html src/components/Footer.svelte>
<nav>
    <a href="/">Főoldal</a>
    <a href="/about">Névjegy</a>
</nav>
</code>

A +layout.svelte fájlban tegyünk egy Nav és egy Footer elemet. A components könyvtárból importálni kell a két elemet.

A  +layout.svelte tartalma:

<code html src/routes/+layout.svelte>
<script>
import Footer from "../components/Footer.svelte";
import Nav from "../components/Nav.svelte";
</script>

<Nav />

<slot></slot>

<Footer />
</code>