Pintar variables y usarlas en atributos en Svelte

Antes de empezar es importante saber que los componentes en Svelte tienen una parte en Javascript y otra HTML, en esta sección vamos a ver cómo comunicar ambas partes para pintar variables Javascript en el HTML. Te recomiendo Crear un componente en Svelte para que estés familiarizado con cada una de las partes.

Una vez que entiendas estos conceptos puedes continuar con el Sistema de templating de Svelte para aprender todo lo que puede ofrecer Svelte respecto a lo que se puede hacer en el HTML de los componentes.

Pintar variables

Vamos con la parte de pintar variables, muy sencillo, simplemente ponemos en el HTML el nombre de la variable entre llaves, ejemplo:

<script>
  let year = 2023;
</script>

<p>Year: {2023}</p>

Lo que pongas dentro de las dos llaves en realidad es una expresión Javascript, por lo que puedes hacer sumas, restas y todo tipo de operaciones aritméticas, lógicas o lo que se te ocurra, ejemplos:

<script>
  let year = 2023;
</script>

<p>Year: {2023}</p>
<p>Next year: {2023 + 1}</p>

<script>
  let userRole = "admin";
</script>

<p>Admin: {userRole === 'admin'}</p>

Aunque, esto no recomiendo hacerlo mucho, ya que estás mezclando lógica y cálculo de datos con su representación. En estos casos recomiendo crear más variables para referenciarlas en el HTML, queda todo más claro. Si necesitas que una variable dependa de otra para que se actualice mírate La reactividad de Svelte 🚧.

Usar variables en atributos de las etiquetas

Otra cosa que se puede hacer con las variables es usarlas para definir un atributo o clase de las etiquetas HTML, por ejemplo:

<script>
  let heightSVG = "300px";
  let className = "my-circle";
</script>

<svg height={heightSVG} class={className}>
  <circle cx="50%" cy="50%" r="100"></circle>
</svg>

Ojo al detalle, cuando se insertan estas variables dentro de clases o atributos no hace falta poner las dobles comillas.

También es importante saber que cuando la variable tiene el mismo nombre que el atributo no hace falta poner el nombre del atributo, ejemplo:

<script>
  let height = "300px";
  let className = "my-circle";
</script>

<svg {height} class={className}>
  <circle cx="50%" cy="50%" r="100"></circle>
</svg>

Lo bueno es que poniendo las comillas, Svelte deja concatenar valores con variables. Esto creo que se entiende mejor con un ejemplo:

<script>
  let height = "300px";
  let className = "my-circle";
</script>

<svg height={height} class="icon {className}">
  <circle cx="50%" cy="50%" r="100"></circle>
</svg>

En este caso la clase resultante será icon my-circle.

Si la variable es boolean y la referencias en un atributo de una etiqueta del HTML, si su valor es false el atributo no se añade. Esto por ejemplo viene muy bien cuando queremos usarla para el típico atributo disabled de los botones:

<script>
  let canDeleteTask = false;
</script>

<button disabled={canDeleteTask}>Delete task</button>

Por cierto, Svelte coge los valores como truthy o falsy, por lo que las variables que uses no tienen por qué ser true o false específicamente.

Y recuerda que dentro de las llaves puedes hacer operaciones en Javascript, por lo que por ejemplo puedes negar las variables booleans:

<script>
  let isTaskDone = true;
</script>

<button disabled={!isTaskDone}>Delete task</button>

Spread operator para usar objeto con variables

Esto del spread es realmente una sintaxis alternativa a lo que hemos visto en este artículo. En lugar de meter todas las variables en el HTML lo que puedes hacer es crear un objeto con los campos que quieras y usar el spread operator de Javascript para meter todas de golpe en el HTML:

<script>
  let type = "range";
  let min = 0;
  let max = 5;
  let value = 1;
  let step = 0.1;

  let inputAttributes = {type, min, max, value, step};
</script>


<input {...inputAttributes} />

Esto por ejemplo es especialmente útil cuando creas componentes y quieres pasar todos los props a la vez al componente hijo:

<script>
  import "../components/Card.svelte"; 

  let title = "Hello";
  let subtitle = "World";
  let type = "primary";
  
  let cardProps = {title, subtitle. type};
</script>


<Card {...cardProps} />