Cuando trabajamos con Svelte, la etiqueta script no solo nos sirve para escribir código JavaScript dentro de nuestro componente, sino que también es el lugar donde declaramos las variables dinámicas que queremos mostrar en nuestro HTML y donde definimos las propiedades o props que el componente puede recibir desde el exterior.
Para empezar, podemos declarar una variable dentro del script, por ejemplo let momento = 'día', y luego mostrar su valor en el HTML usando interpolaciones. Esto se hace colocando la variable entre llaves {} directamente en el marcado. Así, si escribimos algo como:
<script>
let momento = 'tarde';
</script>
<p>Qué bonito {momento}</p>
El resultado será que en la página se mostrará Qué bonito tarde. Esta interpolación no se limita a variables simples, sino que podemos poner cualquier expresión JavaScript válida, como operaciones matemáticas o llamadas a funciones. Por ejemplo, {2 + 2} mostrará 4, y {new Date()} mostrará la fecha actual en formato de texto.
Es importante tener en cuenta que lo que se muestra es la representación en cadena de texto del valor. Por eso, si intentamos mostrar un objeto complejo, veremos algo como [object Object], lo que no suele ser útil. Pero con arrays o valores simples, la interpolación funciona perfectamente.
Ahora bien, cuando queremos que nuestro componente sea configurable desde fuera, entran en juego las props. En Svelte, para que una variable sea una propiedad que pueda recibir un valor externo, debemos exportarla con export let. Por ejemplo:
<script>
export let nombre;
</script>
<p>Hola {nombre}</p>
Con esto, el componente espera que desde fuera le pasemos un valor para nombre. Si no se le pasa nada, la variable estará indefinida, pero si le damos un valor, ese será el que se muestre.
Para entender cómo se pasan estas props, es útil ver cómo se instancia el componente desde JavaScript. En el archivo principal, normalmente main.js, importamos el componente y lo creamos con new, pasando un objeto con las opciones. Por ejemplo:
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
nombre: 'Dani'
}
});
Aquí indicamos que el componente App se debe montar dentro del body del documento y que la propiedad nombre tendrá el valor 'Dani'. Esto hace que dentro del componente, la variable nombre tenga ese valor y se muestre en la interpolación.
Este mecanismo es muy potente porque nos permite reutilizar componentes y configurarlos con diferentes datos sin modificar su código interno. Además, el parámetro target nos da flexibilidad para montar el componente en cualquier parte del DOM, lo que es especialmente útil si queremos integrar Svelte en proyectos existentes.
Aunque pasar props desde la instancia principal con new es común, lo más habitual es que los componentes se usen dentro de otros componentes, pasando props como atributos en el marcado, algo que veremos más adelante.
De esta forma, aprendemos a manejar datos dinámicos dentro de Svelte y a hacer que nuestros componentes sean configurables y reutilizables gracias a las variables exportadas como props y a la interpolación en el HTML. Esto nos abre muchas posibilidades para construir interfaces interactivas y modulares.