Svelte

Svelte on ohjelmistokehys web-sovellusten kehittämiseen JavaScriptin, HTML:n ja CSS:n avulla. Sille on ominaista muun muassa nopeus ja vakiokoodin () ja erikoissyntaksin vähyys. Nopeus on seurausta erityisesti siitä, että Svelte kääntää sovelluskoodin natiiviksi JavaScriptiksi ja pyrkii näin tekemään vähemmän työtä ajon aikana.Home. Svelte. Viitattu 3.11.2022 Muita vastaavia kehyksiä ovat muun muassa React ja Vue. Svelte tukee suoraan myös TypeScriptiä ja SCSS:ää, jotka käännetään JavaScriptiksi ja CSS:ksi esiprosessointivaiheessa. == Esimerkit == === SvelteKit-demo === SvelteKit- kehyksen sisältämän demosovelluksen tiedostorakenne näyttää seuraavalta: $ tree --filelimit 20 ├── node_modules [116 entries exceeds filelimit, not opening dir] ├── package.json ├── package-lock.json ├── README.md ├── src │ ├── app.html │ ├── lib │ │ └── images │ │ ├── github.svg │ │ ├── svelte- logo.svg │ │ ├── svelte-welcome.png │ │ └── svelte-welcome.webp │ └── routes │ ├── about │ │ ├── +page.js │ │ └── +page.svelte │ ├── Counter.svelte │ ├── Header.svelte │ ├── +layout.svelte │ ├── +page.js │ ├── +page.svelte │ ├── styles.css │ └── sverdle │ ├── how-to-play │ │ ├── +page.js │ │ └── +page.svelte │ ├── +page.server.js │ ├── +page.svelte │ └── words.server.js ├── static │ ├── favicon.png │ └── robots.txt ├── svelte.config.js └── vite.config.js Tämä demosovellus sisältää laskurikomponentin tiedostossa `Counter.svelte`, joka näyttää oleellisilta osin seuraavalta: (count -= 1)} aria-label="Decrease by one"> **{Math.floor($displayed_count + 1)}** **{Math.floor($displayed_count)}** (count += 1)} aria-label="Increase by one"> == Käyttö == Svelten käyttö onnistuu esim. SvelteKit-työkalun avulla `npm create svelte@latest nimi`. Tämä edellyttää Node.js-ajoympäristöä ja npm- pakettienhallintaohjelmaa. `npm install` asentaa sovelluksen riippuvuudet ja `npm run dev` käynnistää paikallisen kehityspalvelimen. `npm run build` tuottaa lopullisen sovelluksen konfiguraatiotiedostojen mukaan ja tämä voidaan jakaa halutulla alustalla Node-palvelimella.Introduction. Svelte. Viitattu 3.11.2022 Osana tätä rakennusprosessia Svelte kääntää tiedostonsa optimoiduksi, natiiviksi JavaScriptiksi (luokaksi).Basics. Tutorial. Svelte. Viitattu 3.11.2022 == Rakenne == === Komponentit === Svelte-sovellukset koostuvat komponenteista, jotka ovat itsenäisiä joukkoja JavaScript-, HTML-, CSS-kieltä ja Svelte-syntaksia. Komponentit määritellään omiin tiedostoihinsa. JavaScript tulee `script`-merkkien väliin ja CSS `style`-merkkien väliin – loput komponentista on Svelten laajennettua HTML-tyyppistä merkintäkieltä. JavaScriptiä voidaan sekoittaa suoraan merkintäkieleen kaarisulkeissa, kuten ` # Hello, {name}" ` tai ``. Samalla tavalla esim. `style`-direktiivi helpottaa CSS-tyylien lisäämistä suoraan elementteihin tyylillä ` ... `. Toisessa tiedostossa esim. `Komponentti.svelte` määritelty komponentti saadaan käyttöön `import`-lauseella, minkä jälkeen sitä voidaan käyttää HTML- elementin tavoin ``. Kun muuttujan (tai lauseen) tulee olla reaktiivinen toisen muuttujan arvon muutokseen, merkitään haluttu lause nimellä `$`, kuten `$: x = teeJotain(y);`. Vain muuttujaan sijoittaminen tekee muuttujasta reaktiivisen, eli JavaScript-objektin mutaatio muulla tavalla ei päivitä sovelluksen tilaa. Komponentteja määritellessä käytetään `slot`-elementtiä tyylillä `` kertomaan Sveltelle, mihin komponentin alikomponentit/elementit, kuten `****`injektoidaan. Jos mitään injektoitavaa ei anneta``, Svelte käyttää komponenttiin määriteltyä oletuselementtiä `...`. Jos komponentissa on taas useita slotteja, niille annetaan nimet `` ja injektoitava elementti ohjataan sinne attribuutilla `****`. Logiikan lisääminen suoraan komponentin rakenteeseen onnistuu * ehtolauseilla `{#if ...} ... {:else if ...} ... {:else} ... {/if}` tai `{#key arvo} ... {/key}` * toistolauseella `{#each xs as x (x.id)} ... {/each}` ja * asynkroniselle tulokselle (`Promise`) syntaksilla `{#await x} ... {:then y} ... {:catch e} ... {/await}` tai lyhyemmin `{#await x then y} ... {/await}`. Erityisiin sisäänrakennettuihin Svelte-elementteihin kuuluvat ``, ``, ``, ``, ``, ``, `` (kääntäjän asetukset) ja ``. === Komponenttien tiedonkulku === Kun alikomponentti tuodaan uuteen komponenttiin, tämän näkymään siirtyvät samalla komponentista jaetut muuttujat eli ns. propsit (), kuten `export let muuttuja = "oletusarvo";`. Myös slotit hyväksyvät propseja, mutta nämä tulee tuoda näkyviin injektoinnin yhteydessä `let`-direktiivillä, kuten `...`. Tällöin arvo siirtyy siis toiseen suuntaan ylhäältä alas. Komponenttien kesken voidaan jakaa tietoa myös ilman props- mekanismia kontekstien avulla. Kun komponentti kutsuu `setContext`-funktiota, kyseinen konteksti (mikä tahansa objekti) on saatavissa alikomponenteissa `getContext`-kutsulla. Kolmas tapa jakaa tietoa saman komponentin instanssien kesken on käyttää ns. moduulikontekstia: kaikki `