00:00:00TanStack ha lanzado otro paquete nuevo en su misión de arreglar el mundo de JavaScript
00:00:03y esta vez se trata de los atajos de teclado. Si piensas que eso suena como algo
00:00:07sencillo que la IA probablemente podría escribir por ti hoy en día, piénsalo de nuevo. TanStack Hotkeys
00:00:11manejará los casos extremos que la IA suele omitir, como múltiples disposiciones de teclado, sistemas
00:00:16operativos, conflictos de atajos, conflictos de contexto y muchísimo más; incluso tiene funciones
00:00:20como secuencias y grabación de atajos, todo siendo type-safe y agnóstico al framework.
00:00:26Créeme, si necesitas atajos de teclado, usa este paquete o dile a tu agente de IA que lo haga. Es decir,
00:00:30es TanStack, así que tendrá una buena experiencia de desarrollo, así que dicho esto, vamos a sumergirnos
00:00:35y verlo en acción.
00:00:41Ahora empezaré yendo directo al código, ya que todo esto es bastante simple y estoy
00:00:45haciendo todo esto en una aplicación de React, así que uso el paquete TanStack React Hotkeys,
00:00:49aunque también tienen un paquete para JavaScript puro por ahora y pronto
00:00:52llegarán más para otros frameworks; actualmente está en fase alfa, así que podría haber algunos
00:00:56errores por aquí y allá, pero para mis casos de uso, ya los ha resuelto todos. Empezaremos
00:01:01con el caso de uso más básico, que es el hook useHotkey. Pueden ver aquí abajo que lo hemos importado
00:01:05del paquete y todo lo que necesitamos hacer es definir cuál es nuestro atajo y también
00:01:09una función que se ejecutará cuando presionemos ese atajo. En mi caso, lo configuré para que,
00:01:13cuando lo presionemos, abra una paleta de comandos; un ejemplo bastante común.
00:01:17También pueden ver que tenemos una notificación aquí abajo para que vean lo que he estado presionando
00:01:20y exactamente qué es lo que ha hecho. Como pueden ver, este hook es increíblemente simple, hace
00:01:24exactamente lo que dice que va a hacer, pero la magia con TanStack suele estar en la experiencia
00:01:28de desarrollo y la seguridad de tipos, y aquí obtenemos exactamente lo mismo. Primero empieza con
00:01:32nuestros atajos: en cualquier lugar donde los tengamos en este paquete, habrá seguridad de tipos, lo cual
00:01:37es bastante increíble. Conoce todas las teclas posibles que podemos presionar, así como sus combinaciones,
00:01:41así que podría cambiar esto a algo como "meta plus s", que es en realidad "command s" en macOS,
00:01:46quizás estoy configurando un nuevo atajo para guardar en mi aplicación; ven que reconoce que es una
00:01:50combinación válida, y si lo escribiera mal, arrojaría un error de tipo para avisarnos
00:01:54que este atajo no es válido. La otra cosa genial sobre la definición de atajos es que, por ahora,
00:01:58lo he configurado como "meta plus k", que es en realidad "command plus k" en macOS y ven que
00:02:02me funciona aquí porque estoy en macOS, pero esto significa que este atajo ya no
00:02:06va a funcionar en Windows o cualquier otra plataforma ya que la tecla meta no existe allí, así que lo
00:02:11que podemos hacer en su lugar es cambiar la tecla meta aquí por la tecla "modifier"
00:02:15y eso significa que automáticamente en macOS se establecerá en "command", pero en todas
00:02:19las demás plataformas será en realidad "control", así que inmediatamente tienes un atajo multiplataforma.
00:02:24Y finalmente, siguiendo con la forma en que definimos los atajos en este paquete,
00:02:27si no te gusta la definición por cadena, puedes usar una definición por objeto y este
00:02:31es el mismo atajo que acabamos de tener, o sea, "command k" o "control k"; ven que todo lo que
00:02:35necesitamos hacer es decir cuál es nuestra tecla no modificadora y poner "modifier" a true si esa es la que
00:02:38queremos, o las otras teclas modificadoras si las deseamos. Finalmente, dejando atrás la forma
00:02:42en que se define el atajo, lo siguiente en los argumentos del hook es la función real
00:02:46que se ejecuta cuando presionamos el atajo, y esta es increíblemente simple; obviamente
00:02:50puede ser lo que quieras dentro de ella, pero también tienes acceso al evento de teclado
00:02:54sin procesar si lo necesitas y también a algo de contexto, y en este caso el contexto simplemente
00:02:58te va a dar el atajo como una cadena de lo que se presionó o puedes obtener el atajo procesado,
00:03:02que vendrá como una definición de objeto como acabamos de ver; y por último para el
00:03:05hook useHotkey, hay muchísimas más funciones que quiero mostrarles, pero el tercer argumento
00:03:09que puedes usar aquí son algunas opciones para controlar cómo funciona el atajo; la mayoría son
00:03:13bastante autoexplicativas y las he dejado en sus valores predeterminados: tenemos cosas como "enabled"
00:03:17para control programático de si el atajo está activo o no, tenemos "eventType" para si
00:03:21quieres que se active al presionar la tecla o al soltarla. "requireReset" en realidad significa que, por ahora,
00:03:25si está en falso y mantengo presionado "command k", pueden ver que se está activando
00:03:29constantemente ese atajo; sin embargo, si pongo esto en verdadero, significa que tenemos que soltar
00:03:33el atajo primero para que se active de nuevo; pueden ver que lo estoy manteniendo presionado ahora y
00:03:37solo se activó una vez esta vez. Luego tenemos "ignoreInputs"; esto significa que si estoy dentro
00:03:41de un campo de entrada y presiono "command k", pueden ver que por ahora esto se ignora por completo,
00:03:45no está activando el atajo; sin embargo, podríamos poner esto en falso si realmente queremos que los
00:03:49atajos sigan funcionando dentro de nuestras entradas, y finalmente la última opción que revisaré
00:03:53aquí es el "target": esta opción en realidad te permite crear atajos con alcance limitado; lo que esto significa
00:03:57es básicamente que, por defecto, está configurado para todo el documento y eso significa que
00:04:00puedo presionar "command k" en cualquier parte de esta página y actualmente activa esa paleta de comandos.
00:04:04Sin embargo, puedo cambiar esto para que sea un elemento o una referencia de React y si cambio esto para
00:04:09que sea la referencia de la placa, por ejemplo, pueden ver que si hago clic en mi página y presiono "command k" ahora,
00:04:13no se activa; sin embargo, si me enfoco en mi elemento "command k" de aquí abajo, o sea la placa,
00:04:17pueden ver que puedo activarlo desde ahí dentro; así que ahora tenemos un atajo con alcance. Espero que
00:04:21ya puedan ver por qué me gusta tanto este paquete; siempre hay una gran atención al detalle,
00:04:25una excelente experiencia de desarrollo y total seguridad de tipos, y eso que solo les he mostrado
00:04:30un único hook, así que echemos un vistazo a algunos más. El siguiente es el hook useHotkeySequences, que
00:04:34nos permite tener secuencias de varias teclas para configurar cosas como navegación al estilo Vim,
00:04:38y este es bastante autoexplicativo, similar a los hooks useHotkey: todo lo que necesitamos hacer es
00:04:43definir cuál será la secuencia de teclas, luego nuestra función para lo que se ejecutará una vez
00:04:47que se ingrese esa secuencia; también podemos tener algunas opciones aquí, y noten que "timeout" es
00:04:51básicamente el tiempo que transcurre entre cada pulsación de tecla para que se siga registrando como parte
00:04:54de la secuencia; por el momento he configurado esta como "gg", que me llevará al principio
00:04:59de la lista, así que si voy aquí ahora y presiono "gg", ven que hace exactamente eso. También
00:05:04he configurado una aquí abajo para que si presiono "sub" me lleve al final y casualmente
00:05:09eso deletrea "subscribe", algo que definitivamente deberías hacer. Los siguientes son hooks aún más
00:05:12simples, siendo el primero useKeyHold: todo lo que necesitas es especificar qué tecla
00:05:16quieres rastrear y ahora esto va a ser un booleano de si esa tecla se mantiene presionada
00:05:20o no; pueden ver que estoy monitoreando algunas de ellas por aquí, así que si ahora mantengo presionado shift y
00:05:24alt, ven que está cambiando el estado en la página basado en ese booleano. También notarán
00:05:28aquí abajo que estoy listando las teclas que están actualmente presionadas en mi teclado y eso viene
00:05:32del segundo hook, que es useHeldKeys, el cual simplemente devuelve un array de
00:05:36las teclas que se mantienen presionadas; de nuevo, mantengo presionado "sub", pueden verlo aparecer en ese
00:05:40array, y luego el último hook que les quiero mostrar antes de pasar a algunas de las geniales
00:05:43funciones de utilidad es el hook useHotkeyRecorder; este realmente te permite crear interfaces de
00:05:47personalización de atajos de teclado y es simplemente un hook de ayuda muy agradable. Pueden ver que es muy
00:05:52sencillo de usar: tenemos el hook useHotkeyRecorder y obtenemos algunos valores de él como
00:05:56si está grabando actualmente, el atajo grabado en sí, la función para iniciar la grabación
00:06:00y una función para cancelar la grabación. Luego, dentro de las opciones del hook, también podemos
00:06:05registrar lo que queremos que suceda cuando un atajo se grabe con éxito; en mi caso,
00:06:09simplemente estoy estableciendo el atajo de la paleta como cualquier atajo que el usuario haya decidido. Una vez que
00:06:14conectamos todo esto a un botón, podemos obtener una interfaz similar a esta: por ahora "command K"
00:06:17abre mi paleta de comandos, pero si presiono grabar, eso ahora usa mi hook, así que está escuchando
00:06:21mi teclado; si presiono "command backspace", ven que ese es ahora mi nuevo atajo para abrir
00:06:26la paleta de comandos. Obviamente, probablemente guardarías eso en la base de datos para que realmente
00:06:29persista en la configuración del usuario; es simplemente un hook de ayuda super útil y junto con los
00:06:33otros que hemos visto, es super simple de usar e incluso tiene algunos valores predeterminados agradables,
00:06:37como el hecho de que si graban ese atajo en macOS y usan la tecla "command", automáticamente
00:06:42convertirá esto a la tecla "modifier", así que si se pasan a Windows o Linux será "control"
00:06:46en esos sistemas. Ahora, además de los hooks, hay algunas cosas más que quiero mostrarles sobre este
00:06:49paquete y la primera son las funciones que ayudan con el formato; ven que tenemos
00:06:53una función aquí llamada "formatForDisplay" y esa viene de TanStack Hotkeys; nos permite
00:06:57poner un atajo como "modifier" y "backspace" y eso lo va a convertir automáticamente a
00:07:02la plataforma del usuario y también a los iconos; en este caso está mostrando "command backspace".
00:07:06Si estuviera en Windows, esto se mostraría como "control backspace". Luego también tenemos la función
00:07:10"formatWithLabels", que básicamente hace exactamente lo mismo excepto que toma nuestra tecla
00:07:14modificadora y simplemente la convierte en la etiqueta correcta en lugar del icono; en este caso "command"
00:07:18"backspace", pero de nuevo en Windows sería "control backspace". Y finalmente, una de las
00:07:22razones por las que amo TanStack son las DevTools y este paquete no es diferente. Si abrimos
00:07:27las DevTools, podemos ver los atajos que están registrados en la página junto con las
00:07:30secuencias; podemos ver cosas sobre ese estado y cuántas veces se han activado,
00:07:33pueden ver si se está activando al presionar o soltar la tecla, podemos ver si está escuchando
00:07:37en el documento o en un elemento específico, y dentro de esto incluso pueden ver más detalles
00:07:41como las opciones que han sido configuradas para ese atajo o secuencia e incluso provocar
00:07:45un disparo manual; además, arriba pueden ver las teclas que están actualmente presionadas en
00:07:49la página, así que si no sabes cuál es una de las teclas cuando intentas configurarla, solo
00:07:52ven aquí, presiónala y ahora puedes ver el valor exacto. Sé que puede sonar
00:07:56un poco repetitivo, pero TanStack realmente entiende la experiencia de desarrollo y simplemente
00:08:00estoy muy feliz de que sigamos teniendo esto en el mundo de la programación con IA, así que recomiendo mucho
00:08:05que echen un vistazo a este paquete si es algo que necesitan y déjenme saber qué les parece en
00:08:08los comentarios de abajo, o ya que están ahí suscríbanse y como siempre, nos vemos en el próximo video.