Hot Module Replacement es Fácil

Hola. Bienvenido a JS Nation. Soy Bjorn. Quiero hablar sobre el reemplazo de tareas hoy. Entonces, el reemplazo de tareas es un gran tema. Espero que esta charla lo haga más fácil de entender para ti y más digerible.

Así que vamos a entrar directamente en ello. ¿Qué es el reemplazo de tareas? El reemplazo de tareas también se conoce como HTML. Te permite actualizar tu código sin tener que actualizar tu página. Así que cuando actualizas tus componentes o ajustas tus estilos, puedes ver inmediatamente los cambios en tu navegador. Te permite iterar mucho, mucho más rápido que tener que esperar a que termine el paquete.

Así que si has usado herramientas como Vite, Parcel, Webpack, por ejemplo, en este lado derecho aquí, este logo de Vite, y también en mi camiseta aquí, este logo de Vite, es donde soy parte del equipo. Así que tienen el reemplazo de tareas incorporado. Así que si los has usado, probablemente ya has experimentado algo como esto en la práctica. Así que vamos a pasar a cómo realmente funciona dentro de ellos. Así que hay diferentes maneras de entender HTML. Es un sistema bastante grande.

Así que hay como tres cosas que podemos mirar desde el punto de vista. Hay APIs de HTML, donde implementas cómo se realiza realmente el reemplazo de módulos. Está el flujo desde el servidor. Así que cuando editas el archivo, cómo reacciona el servidor a ello. También está el flujo desde el cliente. Así que el navegador intentará manejar los cambios desde el servidor. Así que estas tres cosas vamos a cubrir a continuación. Así que las APIs de HTML, puedes pensarlas como hooks. Así que en el ciclo de vida de HTML, a veces tendrías que aceptar cambios cuando llega un nuevo módulo. Así que este hook dice que puedes aceptar cambios. Puedes hacer el reemplazo.

Así que adjuntarías un callback para que hagas los cambios necesarios allí. Hay una eliminación si necesitas deshacerte de estados innecesarios. Por ejemplo, tienes un estado que ya no se usa antes de las actualizaciones, lo haces allí. Hay una poda si tienes un módulo que se ha eliminado. Por ejemplo, si eliminas una importación y no la necesitas, puedes eliminar el estado completamente. Y también hay invalidar. Esto es menos un hook, pero más como una acción. Pero lo tocaremos más adelante, donde si tienes cambios que de repente no van como se esperaba, puedes llamar a esto para reiniciar el bucle HTML nuevamente. Así que puedes mirar el gráfico en el lado derecho, puedes ver que cuando tienes un archivo, puedes configurar los callbacks de HTML aquí. Así que puedes usar los hooks por aquí con estas APIs. Y luego, cada vez que actualices el archivo, llamas a eliminar, y luego llamas a aceptar para hacer el reemplazo, y luego actualizamos nuevamente y realizamos lo mismo otra vez. Y luego eliminamos el archivo, eliminas, y finalmente llamas a podar. Así que este es más o menos el ciclo de vida para cada módulo.

Así que aceptar, puedes tener dos firmas, si estás usando práctica, puedes aceptar el módulo actual. Así que un nuevo módulo llega, lo aceptas y el reemplazo. También puedes aceptar cambios de los módulos importados. Tal vez esto es lo que te importa, puedes hacer los cambios allí. Y luego mutas cualquier estado que desees. Y este hook usualmente solo maneja un vplugin, así que si instalas un react-vue-svelte-vplugin, esto es básicamente lo que están haciendo bajo el hook. Es un poco más aislado porque los componentes están más aislados en los componentes de Vue-Svelte. Así que los cambios son más idiomáticos de lo que se muestra aquí, pero aproximadamente están usando este hook para hacer los cambios que necesitan. Y esta es la parte más importante de la API de HTML para pensar en aceptar. También hay eliminar y podar.

Así que aquí hay un ejemplo. Puedes usar eliminar para restablecer un estado global si no lo estás usando. También puedes eliminar el estado si el módulo no se usa en absoluto. Así que estas son algunas formas en que también puedes usar los callbacks de hook y también hay invalidar. Así que en este ejemplo aquí, intentas aceptar el callback, pero algo extraño no está funcionando. Así que vas a abandonar, y luego invalidar. Así que este es solo un caso de uso, puedes usar invalidar para.

Así que vamos a entrar directamente en cómo el servidor realmente maneja los cambios cuando editas el archivo. Así que también podemos echar un vistazo al gráfico en el lado derecho. Cuando editas un archivo, hay FileSystemWatcherDetectChanges, y luego hay RenulChanges. Y luego el siguiente paso es averiguar el módulo shader a un archivo. Como se menciona aquí, hay componentes de React, Vue, Svelte. Algunos de ellos tienen una porción de código JS, y luego tienen la versión CSS del código, como los componentes de Vue o Svelte. Así que múltiples módulos podrían estar relacionados con un archivo. Así que trato de encontrar los módulos justo en este paso. Y luego, una vez que tienes los módulos, los pasamos al hook HandleHotUpdate. Así que este es un hook del plugin Vite. Específicamente, pueden cambiar el array, pueden agregar más módulos, pueden eliminar más módulos dependiendo de las circunstancias. Y luego, después de eso, invalidamos el módulo recursivamente. Así que si el módulo en sí necesita ser actualizado, necesitamos decirle al padre que importe la nueva versión de nosotros mismos. Y para hacer eso, tenemos que invalidar al padre para que el código que importa al hijo se actualice. Y luego el padre, el padre tiene que hacer lo mismo otra vez para que se invalide recursivamente. Así es como sucede en este paso. Así que eliminas la caché para que la próxima vez que lo importe, hagas la retransmisión de nuevo. Y luego tenemos la propagación de HTML. Así que esta es la parte principal de HTML, que es probablemente la parte más mágica y la parte más compleja que tocaremos en la siguiente diapositiva más adelante. Así que la propagación de HTML, decidimos si qué módulos aceptados se encuentran. Así que estos módulos ejecutarán los hooks de HTML que has implementado anteriormente, o decidirá si tienes que recargar la página si hay algo inesperado sucediendo. No hay cambios que puedan ser aceptados. Y luego, por último, una vez que descubres eso, retransmitimos el tipo de HTML para hacer el manejo.

Así que vamos a entrar directamente en la propagación de HTML. Así que echemos un vistazo rápido al gráfico de la derecha. Puedes ver una aplicación muy simple donde tienes un HTML aquí mismo, importa en código JS, importa un componente después de JSX cuando piensas en ello como un componente de React o algo más. Acepta HTML.

Este es más un concepto que puedes intentar pensar al averiguar cómo funciona la propagación, pero no es realmente algo que se esté aplicando en las herramientas. Pero vamos a entrar directamente en algunos escenarios de cómo funciona la propagación. Así que digamos que un estilo o JS se actualiza. Así que tenemos que este se actualiza porque cuando se actualiza, no acepta HTML. Necesita buscar al padre para ver si alguien podría aceptar HTML. Así que obviamente, cuando subes justo aquí, puedes ver que FJSX, acepta HTML. Así que comenzamos justo aquí. Encontramos los módulos que pueden aceptar HTML. Así que los hooks que hemos agregado para este módulo, se ejecutan, y luego obtenemos los nuevos módulos cuando se actualiza. Así que este es un escenario. Otro escenario es cuando tienes main.js actualizado. Así que este, como puedes ver, está fuera del límite. Y cuando subimos, no hay módulos que puedan aceptar HTML. Así que recuerda que HTML solo puede suceder cuando se llama a la API import manner.hot.accept. Así que estos módulos no lo tienen por defecto. Así que cuando llega a la raíz, no hay nada más que aceptar, simplemente recurre a una recarga completa. Así que en este caso, hacemos una recarga completa para el escenario dos. Y luego otro escenario es qué pasa si tenemos la actualización del componente directamente. En este caso, podemos averiguar que ya acepta HTML por sí mismo. Así que en este caso, es un escenario muy similar al uno, está dentro del límite en este caso. Así que se actualiza dentro de sí mismo. Así que este se actualiza, el resto de los módulos en la parte superior se actualizarán en este caso. Y luego otro escenario, digamos este caso, que es un poco complejo, tienes dos padres aquí, uno va al archivo JSX y otro va al archivo JS. Así que en este caso, podrías pensar que este aceptaría cambios. Pero también tenemos que tener en cuenta el otro archivo JS que ni siquiera acepta cambios. Y luego, cuando sube aquí, a la raíz, no hay forma de que se adapte al nuevo código del archivo utils. Así que la forma más segura que podríamos asumir es hacer una recarga completa. Así que aunque hay uno que podría aceptar cambios, si hay al menos uno más que no puede aceptar cambios, tenemos que hacer una recarga completa. Así que estos son solo algunos casos donde Vite u otros proveedores intentan averiguar qué módulos necesitan ser ejecutados de sus hooks de la API de HTML o si se necesita una recarga completa de la página. Vamos también a pasar directamente al cliente.

Así que imagina si ya tenemos la información de si deberíamos hacer una recarga completa, o deberíamos hacer las actualizaciones, podemos pasarlo a través de una conexión WebSocket desde el servidor el cliente recibirá un mensaje justo aquí. Recibe una carga útil, podemos analizarla. Y el servidor podría decirnos que hagamos una recarga completa. En este caso, hacemos una ubicación de recarga para recargar la página. O podría devolver algunos módulos que necesitamos actualizar. Y luego simplemente averiguamos qué módulos tenemos que actualizar y llamamos a sus APIs de HTML para ello. Y para hacer eso, el cliente también configura las APIs de HTML.

Así que si miras el código aquí, básicamente esto es lo que inyecta bajo el capó para que realmente no lo veas. Pero no es realmente mágico. Inyecta algo de código que muta import meta.hot para que puedas llamar a import meta.hot para aceptar algo como esto. Así es como configura la API. Y luego también hay otra forma de comunicarse con el servidor. Así que si tienes código que no podría aceptar, llamas a invalidate. Como mencionaron anteriormente, si necesita ser invalidado, simplemente le dices al servidor que necesita invalidar en esta ruta específica.

Para que haga la propagación de HTML nuevamente, para ver si alguien más hace el módulo en su lugar, o en el peor de los casos, necesitamos hacer una recarga completa. Así que estas son las formas en que el cliente puede interactuar con el servidor. Así que un resumen de lo que se ha hablado hasta ahora, sabemos que las APIs de HTML se pueden usar con esperanza para el ciclo de vida de de-HTML. También podemos saber que el servidor observa el sistema de archivos. Activa la invalidación, la propagación, e informa al cliente de qué módulos necesitan actualizarse, o si necesita una recarga completa de la página. Y el cliente de HTML configura las APIs de HTML para su uso, y también para recibir instrucciones del servidor, si necesitamos hacer las actualizaciones o recargas, y luego ejecuta los hooks en consecuencia.