00:00:00A TanStack lançou mais um novo pacote em sua missão de consertar o mundo do JavaScript
00:00:03e desta vez eles estão consertando as teclas de atalho. Se você acha que isso parece
00:00:07simples e que uma IA provavelmente poderia escrever para você hoje em dia, pense bem. O TanStack Hotkeys
00:00:11lidará com os casos de borda que a IA costuma ignorar, como múltiplos layouts de teclado, múltiplos sistemas
00:00:16operacionais, conflitos de atalhos, conflitos de escopo e muito, muito mais, e tem até recursos
00:00:20como sequências de teclas e gravação de atalhos, tudo sendo type-safe e agnóstico a frameworks.
00:00:26Acredite em mim, se precisar de atalhos, use este pacote ou diga ao seu agente de IA para usar. Quero dizer,
00:00:30é da TanStack, então terá uma ótima experiência de desenvolvimento, então, dito isso, vamos mergulhar
00:00:35e vê-lo em ação.
00:00:41Agora, vou começar indo direto para o código, pois tudo isso é bem simples e estou
00:00:45fazendo tudo em uma aplicação React, então estou usando o pacote TanStack React Hotkeys,
00:00:49mas eles também têm um pacote para JavaScript puro no momento e haverá
00:00:52outros para frameworks em breve, mas ele está atualmente em alfa, então pode haver alguns
00:00:56bugs aqui e ali, mas para os meus casos de uso, ele já resolveu todos. Começaremos
00:01:01com o caso de uso mais básico, que é o hook useHotkey. Vocês podem ver aqui embaixo que importamos
00:01:05isso do pacote e tudo o que precisamos fazer é definir qual é o nosso atalho e também
00:01:09uma função que será executada quando pressionarmos esse atalho. No meu caso, configurei para que,
00:01:13quando pressionarmos o atalho, ele abra uma paleta de comandos, um exemplo bem comum.
00:01:17Vocês também podem ver que temos um toast aqui embaixo para que possam ver o que estive pressionando
00:01:20e exatamente o que ele fez. Como podem ver, esse hook é incrivelmente simples, ele faz
00:01:24exatamente o que diz que vai fazer, mas a mágica da TanStack geralmente está na experiência
00:01:28do desenvolvedor e na segurança de tipos, e temos exatamente a mesma coisa aqui. Primeiro, começa com
00:01:32nossos atalhos; em qualquer lugar onde os tivermos neste pacote, será type-safe, o que
00:01:37é bem insano. Ele conhece todas as teclas possíveis que podemos pressionar, bem como suas combinações,
00:01:41então eu poderia mudar isso para algo como "meta plus s", que na verdade é "command s" no macOS,
00:01:46então talvez eu esteja configurando um novo atalho para salvar na minha aplicação; veja que ele sabe que é uma
00:01:50combinação válida e, se eu digitasse errado, ele lançaria um erro de tipo avisando
00:01:54que este atalho não é válido. Outra coisa legal sobre a definição de atalhos é que, no momento,
00:01:58eu o defini como "meta plus k", que na verdade é "command plus k" no macOS e você vê que isso
00:02:02está funcionando para mim aqui porque estou no macOS, mas significa que este atalho não vai mais
00:02:06funcionar no Windows ou em qualquer outra plataforma, já que a tecla meta não existe por lá, então o que
00:02:11podemos fazer em vez disso é trocar a tecla meta aqui pela tecla "modifier"
00:02:15e isso significa que, automaticamente no macOS, ela será definida como "command", mas em todas
00:02:19as outras plataformas, será "control", então você tem imediatamente um atalho multiplataforma.
00:02:24E, finalmente, ainda falando sobre a forma como definimos os atalhos neste pacote,
00:02:27se você não gosta da definição por string, pode usar uma definição por objeto, e este
00:02:31é o exato mesmo atalho que acabamos de ter, "command k" ou "control k"; veja que tudo o que precisamos
00:02:35fazer é dizer qual é a nossa tecla não modificadora e definir "modifier" como true se for essa a que
00:02:38queremos, ou as outras teclas modificadoras se as quisermos. Por fim, avançando da forma
00:02:42como o atalho é definido, o próximo argumento do hook é a função real
00:02:46que roda quando pressionamos o atalho, e esta é incrivelmente simples, obviamente
00:02:50pode ser o que você quiser aqui dentro, mas você também tem acesso ao evento
00:02:54de teclado bruto se precisar, e também a algum contexto, e neste caso o contexto simplesmente
00:02:58vai te dar o atalho como uma string do que foi pressionado, ou você pode obter o "parsed hotkey",
00:03:02que virá como uma definição de objeto como acabamos de ver, e por último para o
00:03:05hook useHotkey, ele diz que há muito mais recursos que quero mostrar, mas o terceiro argumento
00:03:09que você pode usar aqui são algumas opções para controlar como o atalho funciona. A maioria delas é
00:03:13bem autoexplicativa e eu as deixei nos padrões; temos coisas como "enabled"
00:03:17para controle programático se o atalho está ativado ou não, temos "eventType" para se
00:03:21você quer que ele ative no "key down" ou "key up". "requireReset" na verdade significa que, no momento,
00:03:25se estiver definido como falso e eu segurar "command k", você pode ver que ele está constantemente
00:03:29reacionando esse atalho; no entanto, se eu definir isso como verdadeiro, significa que temos que soltar
00:03:33o atalho primeiro para que ele ative novamente, então veja que estou segurando agora e
00:03:37ele só ativou uma vez. Depois temos "ignoreInputs", isso significa que se eu estiver dentro
00:03:41de um input e fizer "command k", você pode ver que no momento isso é completamente ignorado,
00:03:45não está ativando o atalho; no entanto, poderíamos definir isso como falso se realmente quisermos que os atalhos
00:03:49ainda funcionem dentro dos nossos inputs e, por fim, a última opção que vou passar
00:03:53aqui é o "target", que na verdade permite criar atalhos com escopo. O que isso significa
00:03:57é, essencialmente, que no momento por padrão ele está definido para o documento inteiro e isso significa que eu
00:04:00posso pressionar "command k" em qualquer lugar desta página e ele ativará aquela paleta de comandos;
00:04:04no entanto, posso mudar isso para ser um elemento ou uma ref do React, e se eu mudar isso
00:04:09para ser a "badgeRef", por exemplo, você pode ver que se eu clicar na minha página e fizer "command k",
00:04:13ele não ativa, mas se eu focar no meu elemento "command k" aqui embaixo, na badge,
00:04:17você vê que eu posso ativá-lo de dentro daqui, então agora temos um atalho com escopo. Espero que
00:04:21vocês já consigam ver por que eu gosto tanto deste pacote, há sempre uma atenção tão boa aos detalhes,
00:04:25uma ótima experiência de desenvolvimento e segurança de tipos completa, e eu só mostrei um
00:04:30único hook, então vamos dar uma olhada em mais alguns. O próximo é o hook useHotkeySequences, que
00:04:34nos permite ter sequências de múltiplas teclas, para que possamos configurar coisas como navegação estilo Vim,
00:04:38e este é bem autoexplicativo, similar aos hooks useHotkey; tudo o que precisamos fazer é
00:04:43definir qual será a sequência de teclas, depois nossa função para o que vai rodar quando
00:04:47essa sequência for inserida, e também podemos ter algumas opções aqui, e note que "timeout" é
00:04:51essencialmente o tempo permitido entre cada pressão de tecla para que ainda seja registrado como parte
00:04:54da sequência; no momento eu defini este como "gg", que vai me levar para o topo
00:04:59da lista, então se eu for aqui agora e pressionar "gg", veja que ele faz exatamente isso. Eu também
00:05:04configurei um aqui embaixo para que, se eu pressionar "sub", ele me leve para o final, e coincidentemente
00:05:09isso forma a palavra "subscribe" (inscreva-se), algo que você definitivamente deveria fazer. A seguir, alguns
00:05:12hooks ainda mais simples: o primeiro é o hook useKeyHold, onde você só precisa especificar qual tecla
00:05:16quer monitorar, e agora isso será um booleano indicando se essa tecla está sendo segurada
00:05:20ou não. Vocês podem ver que estou monitorando algumas aqui, então se eu segurar "shift" e
00:05:24 "alt", vejam que o estado na página muda com base nesse booleano. Vocês também notarão
00:05:28que aqui embaixo estou listando as teclas que estão atualmente pressionadas no meu teclado e isso vem
00:05:32do segundo hook, que é o useHeldKeys, que simplesmente retorna um array das
00:05:36teclas que estão sendo seguradas; novamente, se eu segurar "sub", vocês veem que aparece naquele
00:05:40array, e então o último hook que quero mostrar antes de passarmos para algumas das funções
00:05:43utilitárias legais é o hook useHotkeyRecorder. Ele realmente permite criar interfaces de customização
00:05:47de atalhos de teclado e é apenas um hook de ajuda muito bom. Veja que ele é bem
00:05:52simples de usar; temos o hook useHotkeyRecorder, do qual obtemos valores como
00:05:56se está gravando no momento, o próprio atalho gravado, a função para iniciar a gravação
00:06:00e uma função para cancelar a gravação. Depois, dentro das opções do hook, podemos
00:06:05também registrar o que queremos que aconteça quando um atalho for gravado com sucesso. No meu caso,
00:06:09estou simplesmente definindo o atalho da paleta para ser qualquer atalho que o usuário decidiu. Quando conectamos
00:06:14tudo isso a um botão, podemos ter uma interface similar a esta: no momento, "command K"
00:06:17abre minha paleta de comandos, mas se eu pressionar gravar, isso agora está usando meu hook, então está ouvindo
00:06:21o meu teclado; se eu fizer "command backspace", vejam que agora esse é o meu novo atalho para abrir
00:06:26a paleta de comandos. Obviamente, você provavelmente salvaria isso no banco de dados para que fosse
00:06:29persistido nas configurações do usuário; é apenas um hook de ajuda super legal e, junto com os
00:06:33outros que vimos, é super simples de usar e até tem alguns padrões legais,
00:06:37como o fato de que se gravarem esse atalho no macOS e usarem a tecla command, ele irá
00:06:42converter automaticamente para a tecla "modifier", então se mudarem para Windows ou Linux, será control
00:06:46por lá. Agora, além dos hooks, há mais algumas coisas que quero mostrar sobre este
00:06:49pacote, e a primeira são as funções que ajudam na formatação. Vejam que temos
00:06:53uma função aqui chamada "formatForDisplay", que vem do tanstack-hotkeys; ela nos permite
00:06:57inserir um atalho como "modifier" e "backspace" e vai convertê-lo automaticamente para
00:07:02a plataforma do usuário e também para os ícones; neste caso, está mostrando "command backspace".
00:07:06Se eu estivesse no Windows, isso apareceria como "control backspace". Também temos a função
00:07:10"formatWithLabels", que essencialmente faz a mesma coisa, exceto que pega nossa tecla
00:07:14modificadora e apenas a converte no rótulo correto em vez do ícone, então neste caso "command
00:07:18backspace", mas novamente, no Windows isso seria "control backspace". E finalmente, uma das
00:07:22razões pelas quais amo TanStack são os devtools, e este pacote não é diferente. Se abrirmos
00:07:27os devtools, podemos ver os atalhos que estão registrados na página junto com as
00:07:30sequências, podemos ver coisas sobre esse estado e quantas vezes foram acionados,
00:07:33podemos ver se está acionando no "key down" ou "key up", se está ouvindo
00:07:37no documento ou em um elemento específico, e dentro disso você pode ver até mais detalhes,
00:07:41como as opções que foram configuradas para aquele atalho ou sequência e até causar
00:07:45um acionamento manual; além disso, no topo aqui, você pode ver as teclas que estão sendo seguradas agora
00:07:49na página, então se você não souber qual é uma das teclas ao tentar configurar, basta
00:07:52vir aqui, pressioná-la e agora você pode ver o valor exato. Eu sei que posso parecer um
00:07:56disco riscado, mas a TanStack realmente entende de experiência do desenvolvedor e estou
00:08:00super feliz que ainda temos isso no mundo da programação com IA, então recomendo fortemente que você
00:08:05confira este pacote se for algo que você precise, e me diga o que achou dele nos
00:08:08comentários abaixo ou aproveite e se inscreva, e como sempre, vejo você no próximo.