Svelte: componenti

Componenti e props

Con Svelte è possibile creare “componenti” in un file .svelte che possono essere inseriti un qualunque altro file .svelte, come se fossero normali elementi HTML, ed inoltre è possibile passare loro qualunque dato: https://svelte.dev/tutorial/declaring-props

Ad esempio: creo un banale componente Prova.svelte: esporto una variabile, e scrivo il valore della variabile in un div.

<script>
export let unaVariabile;
</script>

<div>{unaVariabile}</div>

Ora, inserisco questo componente in App.svelte, e con un bottone vado a modificare il valore all’interno del div: per farlo, mi basta modificare l’attributo “unaVariabile” del componente Prova

<script>
import Prova from './Prova.svelte';
let valore = 1;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Prova unaVariabile={valore}/>
	<Prova unaVariabile={valore*2}/>
	<button on:click={()=>{valore+=1}}>
            Incrementa il valore
	</button>
</main>

Store

In alcune situazioni si ha la necessita di memorizzare dati non in un componente, ma in una posizione che può essere raggiunta da qualunque parte della applicazione: a questo scopo si usano gli stores https://svelte.dev/tutorial/writable-stores

Uno store può essere writable o readable.

readable

Creo uno store readable in store.js:

import { readable } from 'svelte/store';

export const unaVariabile = readable(valoreIniziale, function start(set) {
	// viene chiamata quando arriva il primo subscriber
        // e usa il callback set()

	return function stop() {
            // funzione chiamata quando non c'è più nessun subscriber
	};
});

Un componente può accedere allo store importandolo:

<script>
	import { unaVariabile } from './stores.js';

        //
</script>

<h1>Fa qualcosa con {$unaVariabile}</h1>

Il nome della variabile importata deve essere uguale al nome della variabile esportata dallo store.
Questa variabile sarà un oggetto “readable”.
Per accedere al valore memorizzato si usa il simbolo $.
Il callback “set” si usa per aggiornare il valore di unaVariabile all’interno dello store.

writable

Uno store writable è simile al precedente, ma ha due metodi “set” e “update”, oltre a “subscribe”.
Con set si imposta un valore.
Con update si ha un callback con cui elaborare il valore da assegnare alla variabile dello store.
Con subscribe un componente si “iscrive” allo store e riceve gli aggiornamenti del valore.

Ad esempio, in un qualunque componente, anche non “subscriber”:

<script>
	import { count } from './stores.js';

	function reset() {
		count.set(0);
	}

        function increment() {
		count.update(n => n + 1);
	}
</script>

Invece un componente subscriber riceve i dati in questo modo:

<script>
	import { count } from './stores.js';

	let count_value;

	const unsubscribe = count.subscribe(value => {
		count_value = value;
	});
</script>