Conceptos y Uso de las Etiquetas Especiales (Special tags) y Directivas en Svelte
- 736Palabras
- 4Minutos
- 03 Jul, 2024
En Svelte, además de las etiquetas HTML y etiquetas de componentes comunes, existen algunas etiquetas especiales (Special tags) y directivas que proporcionan funciones y capacidades adicionales para manejar la cabecera, la carga dinámica de componentes, la escucha de eventos globales, entre otros. En este artículo, detallaremos las etiquetas especiales y directivas más comunes en Svelte y su uso.
<svelte:head>
La etiqueta <svelte:head> se utiliza para modificar dinámicamente la información del encabezado del documento en un componente, como el título (<title>) y las metaetiquetas (<meta>). En un componente Svelte solo puede haber una etiqueta <svelte:head>, y se usa comúnmente junto con los hooks del ciclo de vida de Svelte.
Ejemplo de Código
1<script>2 import { onMount } from "svelte";3
4 onMount(() => {5 document.querySelector("title").innerText = "Dynamic Title";6 });7</script>8
9<svelte:head>10 <title>Hello Svelte!</title>11 <meta12 name="description"13 content="This is a demo of using Svelte's special tags and directives."14 />15</svelte:head>En este ejemplo, la etiqueta <svelte:head> se utiliza para establecer el título y la descripción del documento. En el hook de ciclo de vida onMount, modificamos dinámicamente el título del documento.
<svelte:component>
La etiqueta <svelte:component> se utiliza para cargar y renderizar componentes Svelte dinámicamente. Permite cargar selectivamente diferentes componentes en tiempo de ejecución, permitiendo cambiar componentes dinámicamente.
Ejemplo de Código
1<script>2 import FirstComponent from "./FirstComponent.svelte";3 import SecondComponent from "./SecondComponent.svelte";4
5 let showFirst = true;6
7 function toggleComponent() {8 showFirst = !showFirst;9 }10</script>11
12<button on:click={toggleComponent}>Toggle Component</button>13
14<svelte:component this={showFirst ? FirstComponent : SecondComponent} />En este ejemplo, según el valor de showFirst, se renderiza dinámicamente FirstComponent o SecondComponent.
<svelte:window>
La etiqueta <svelte:window> se utiliza para escuchar y manejar eventos globales de la ventana en un componente, como eventos de resize, scroll, entre otros.
Ejemplo de Código
1<script>2 function handleResize() {3 console.log("Window resized!");4 }5</script>6
7<svelte:window on:resize={handleResize} />En este ejemplo, cuando el tamaño de la ventana cambia, se dispara la función handleResize.
<svelte:body>
La etiqueta <svelte:body> se utiliza para modificar dinámicamente la parte del cuerpo del documento (<body>) en un componente, pudiendo agregar estilos globales o JavaScript dinámicamente.
Ejemplo de Código
1<svelte:body>2 <script>3 console.log('This script will be inserted into the document body.');4 </script>5</svelte:body>En este ejemplo, el código dentro de la etiqueta <script> se inserta en el <body> del documento.
<svelte:self>
La etiqueta <svelte:self> se utiliza para referenciarse a sí mismo de manera recursiva dentro de un componente, permitiendo la creación de estructuras recursivas de componentes.
Ejemplo de Código
1<script>2 let count = 0;3
4 function increment() {5 count += 1;6 }7</script>8
9<button on:click={increment}>Increment</button>10
11{#if count < 5}12 <svelte:self />13{/if}14
15<p>Count: {count}</p>En este ejemplo, se referencia recursivamente a sí mismo, creando un contador simple que se detiene cuando el valor del contador es menor a 5.
Directivas: @html, @const, @debug
Además de las etiquetas especiales, Svelte también proporciona algunas directivas útiles para controlar el comportamiento de renderizado, optimizar el rendimiento, entre otros.
Directiva @html
La directiva @html se utiliza para renderizar una cadena de código HTML, permitiendo omitir el escape de HTML predeterminado de Svelte y insertar la cadena directamente como HTML en el documento.
Ejemplo de Código
1<script>2 let htmlContent = "<strong>Hello Svelte!</strong>";3</script>4
5{@html htmlContent}En este ejemplo, el contenido de htmlContent se inserta como HTML en el documento, mostrándose como “Hello Svelte!” en negrita.
Directiva @const
La directiva @const se utiliza para declarar constantes, ayudando a Svelte a optimizar en tiempo de compilación y reducir la carga de cálculo en tiempo de ejecución.
Ejemplo de Código
1<script>2 export let boxes;3</script>4
5{#each boxes as box}6 {@const area = box.width * box.height}7 {box.width} * {box.height} = {area}8{/each}En este ejemplo, @const define una constante local. {@const} solo se permite como hijo directo de {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <Component />, <svelte:fragment />.
Directiva @debug
La directiva @debug se utiliza para depurar y registrar valores de variables en la consola, comúnmente utilizada durante el desarrollo para depurar el código.
Ejemplo de Código
1<script>2 let user = {3 firstname: 'Ada',4 lastname: 'Lovelace'5 };6</script>7
8<!-- Compilado -->9{@debug user}10{@debug user1, user2, user3}11
12<!-- No compilado -->13{@debug user.firstname}14{@debug myArray[0]}15{@debug !isReady}16{@debug typeof user === 'object'}17
18<h1>Hello {user.firstname}!</h1>La etiqueta {@debug ...} proporciona una alternativa a console.log(...). Cuando cambian los valores de variables específicas, los registra y pausa la ejecución del código cuando se abren las herramientas de desarrollo.
{@debug ...} acepta una lista de nombres de variables separados por comas (no expresiones arbitrarias).
Conclusión
A través de este artículo, hemos aprendido los conceptos y el uso de las etiquetas especiales y directivas más comunes en Svelte. Estas etiquetas y directivas proporcionan más flexibilidad y funcionalidad a Svelte, permitiendo manejar mejor contenido dinámico, eventos globales, recursión de componentes, y optimizar el comportamiento de renderizado, entre otros escenarios.
