Directivas svelte:window, svelte:head, svelte:body

Otra de las cosas que he dejado para el final, y que ahora que hemos empezado a ver directivas de estas que empiezan por svelte: tiene sentido que cuente, son las directivas svelte:body, svelte:window y svelte:head, que podemos utilizar para dos propósitos.

El primero de los propósitos es para inyectar elementos. Por ejemplo si utilizo svelte:head, puedo utilizar el contenido de esta etiqueta para introducirle cosas que quiero que se inyecten en el DOM, de tal modo que lo que yo ponga aquí, cuando el componente se presente por pantalla será incluido automáticamente en el DOM. Lo habitual es aquí poner el título de la página o modificarlo, de tal modo que pueda ponerle title, y si le escribo un valor como hola, cuando le dé al botón guardar repintará este componente y provocará que se modifique el title porque se inyecta esta etiqueta title dentro de la sección head de la página.

Pero no menos importante, otra de las características que nos aportan estas directivas, es la posibilidad de inyectarle eventos usando el on:, cosa que en el caso del head, a lo mejor no es algo que vayamos a aprovechar mucho, pero desde luego si lo vamos a poder hacer con window. Por ejemplo, si queremos crear eventos que se produzcan al hacer scroll podríamos poner on:scroll y hacer que ese procesoe el evento cada vez que se haga scroll. Algo que hay que tener en cuenta a hacerlo bien para evitar problemas de rendimiento. Sin embargo, también podemos hacer esto con body, y así podemos inyectarle cosas en el body como eventos cuando se repinte este componente.

Además una de las ventajas que tiene Svelte es que los eventos que pongamos aquí se van a adjuntar automáticamente cuando el componente se manda a pintar, pero también Svelte se va a ocupar de limpiar lo que ya no necesita cuando el componente desaparezca. Es decir, que si yo pongo por ejemplo svelte on:contextmenu, lo que yo ponga acá como evento se va a ejecutar mientras el componente App se esté pintando. Pero si desaparece ese componente, porque por ejemplo hemos pulsado el botón cerrar y ya se repinta la app y no se incluye ese componente hijo en el cual he metido ese oncontextmenu, ya no se va a tener en cuenta y el evento se va a descartar automáticamente. De modo que futuras veces que dispares el evento por ejemplo con clic derecho, no se va a procesar automáticamente. Va a estar bien hecho en el sentido de que por lo menos hay algo de limpieza que ya te da Svelte de por sí.

En este caso, por ejemplo, voy a gestionarlo con una función, y como no voy a ponerle ninguna descendencia voy a cerrar el nodo directamente. La función que voy a fabricar se va a llamar por ejemplo... no, y va a ser un homenaje a esas páginas que pretendían bloquear el copiar y pegar hace unos años. Aunque todavía siguen quedando algunas de esas. Por ejemplo, si pongo alert(no puedes copiarme), ahora puedo inyectarle esta función al contextmenu, y cuando el componente App se pinte, que en este caso la verdad es que siempre, pues cuando haga clic con el botón derecho se va a disparar el alert() porque es lo que tiene puesta la función. Sin embargo, como no he puesto preventDefault, cuando le dé al botón OK, pues ocurre lo de siempre, que es que se muestra el menú contextual. Si quiero ser una mala persona y hacer páginas incompatibles con las buenas costumbres, podría poner un preventDefault, y de este modo cuando yo le dé clic derecho se mostrará siempre mi alert, pero nunca se desplegará el menú contextual.

Yo espero que no uséis esta función para este tipo de cosas pero para eventos como meter el ratón o sacar el ratón con un mouseEnter o mouseLeave, o como os contaba antes con el scroll, es un caso de uso bastante bueno de estas etiquetas: svelte:body, svelte:window, svelte:head, y también para pues modificar el título de la página sin utilizar cosas como window.title o cosas por el estilo.