Componentes

• En Svelte una aplicación se compone de uno o más componentes
• Un componente es un bloque de código reutilizable e independiente que encapsula HTML, CSS y JS/TS relacionados dentro de un archivo con la extensión .svelte
• Las tres secciones, JS/TS, HTML y CSS, son opcionales
• Los nombres de los componentes se escriben con inicial mayúscula para diferenciarlos de los elementos HTML
• Por defecto, los estilos (style) solo aplican al componente y no de forma global
• También se puede usar la extensión .svelte.ts que funciona como cualquier otro archivo de TS, pero con la diferencia que se pueden usar runas

src/App.svelte

<script lang="ts">
	let name = "Jhon";
</script>

<h1>Hello {name.toUpperCase()}!</h1>

<style>
  h1 {
    color: red;
    font-size: 2em;
  }
</style>

App.svelte

<script lang="ts">
	function greet() {
		alert('Welcome to Svelte!');
	}
</script>

<button onclick={greet}>click me</button>

<style>
	button {
		font-size: 2em;
	}
</style>

Atributos dinámicos

• Podemos usar llaves { } dentro de los atributos para manipularlos
• Si el nombre del atributo es el mismo que del valor, se puede omitir uno

src/App.svelte

<script>
	let src = '/tutorial/image.gif';
	let name = "Jhon";
</script>

<!-- Normal -->
<img src={src} alt="{name} dances."/>

<!-- Shorthand -->
<img {src} alt="{name} dances."/>

Importar componentes

src/App.svelte

<script lang="ts">
	import Nested from "./Nested.svelte"
</script>

<p>This is a paragraph.</p>

<Nested />

Etiquetas HTML

• Normalmente el texto se agrega como texto sin formato, lo que significa que algunos caracteres especiales como < o > no significan nada
• Si el texto contienen etiquetas especiales, HTML, entonces se puede renderizar con la etiqueta especial {@html ...}
• Svelte no sanitiza el contenido, entonces es importante saber la procedencia del contenido, si es contenido personal, puede ser seguro, pero si son, por ejemplo, comentarios de usuarios, es necesario sanitizar el contenido, de lo contrario se corre el riesgo de exponer a los usuarios de la aplicación a *Cross-Site Scripting (XSS) *

<script>
	let some_string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html some_string}</p>