Las 'actions' de Svelte, que no deben confundirse con Sveltekit's form actions, son una API extremadamente poderosa para svelte. En esencia, las acciones son funciones que permiten interactuar directamente con los elementos DOM actuando como funciones de JavaScript. Esto las hace perfectos para integrarse con otras bibliotecas. Uno de mis uso son los efectos de 'parallax' en una imagen. Cubriré cómo logro este efecto usando 'actions'. El repositorio se encuentra aquí.
Installar una libreria externa
En la mayoría de los casos, cualquier biblioteca de js simple debe funcionar de forma inmediata. Usaré ukiyo-js para manejar el efecto de 'parallax', pero puedes usar cualquier otra biblioteca de tu agrado.
Haciendo la 'action'
Para comenzar a usar la biblioteca, necesitamos crear nuestra acción. Por lo general, en un proyecto de Sveltekit, se coloca dentro del directorio lib.
Crearé un archivo llamado ukiyo.ts y luego seguiré las instrucciones de uso dentro de la libreria generalmente en el readme.md.
Lo que debemos tener en cuenta es que las acciones toman como primer parámetro un nodo, aka HTMLElement, que queremos que tenga nuestra acción. Luego, la libreria que queremos usar apunta a ese elemento DOM dentro de su 'constructor', pero puede variar según la biblioteca. Podemos pasar fácilmente opciones y otros argumentos que podamos llegar a necesitar.
Si te has dado cuenta, también tenemos que encargarnos de la limpieza. Para hacerlo, devolvemos una función de 'destroy' en nuestra función. Nuevamente, al leer sobre la librería que estemos usndo, vemos que hay un método de limpieza, en este caso destroy(). Y eso es todo para crear nuestra 'action'.
Usando nuestra 'action'
We have pretty much done all that was needed, now we just put in into action. In any svelte file we import our action and then add the use plus our action to any component.
Prácticamente hemos hecho todo lo que se necesitaba, ahora solo lo ponemos en acción. En cualquier archivo svelte, importamos nuestra acción y luego agregamos 'use' más nuestra acción a cualquier elemento del DOM.
Y eso es todo. Podemos importarlo prácticamente en cualquier lugar y usarlo libremente.
