Introdução

Quando me deparei com o Kbar fiquei fascinado em criar o mesmo com meus sabores.

1. Desenvolvi uma paleta de comandos personalizada que pode ser acionada usando Cmd D no Mac ou Ctrl D no Windows/Linux.

2. Essa paleta de comandos atua como um portal, permitindo que os usuários naveguem para qualquer rota estática predefinida dentro do aplicativo.

3. Pode ser fechado usando a tecla Esc e, para fins de demonstração, incluí um modal com botão fechar.

4. Neste artigo, apresentarei os principais componentes e decisões de design por trás deste projeto, incluindo o uso de React Portals, o padrão Observable e Window Event Listeners.

Principais tecnologias e padrões usados

1. Portais de reação

EU. Para garantir que a paleta de comandos não interfira no DOM raiz, optei por usar React Portals.

II. Os portais permitem renderizar os filhos de um componente em uma parte diferente da hierarquia DOM, fora do componente pai.

III. Isso foi crucial para isolar a estrutura DOM da paleta de comandos do resto do aplicativo, garantindo que o DOM raiz permanecesse inalterado.

2. Padrão observável

EU. Implementei um padrão Observable semelhante ao RxJS do Angular. A principal razão para adotar esse padrão foi desacoplar a lógica de gerenciamento de estado e manipulação de eventos do próprio componente.

II. Em vez de incorporar ouvintes de eventos diretamente no componente e gerenciar o estado lá, criei um Observable. Quando uma condição específica é atendida (por exemplo, um evento de pressionamento de tecla), o Observable transmite uma mensagem, permitindo que o restante do aplicativo reaja de acordo.

III. Este padrão melhora a modularidade e a capacidade de manutenção da base de código.

4. Além disso, garanti que a assinatura dos Observables fosse cancelada corretamente quando não fossem mais necessários, otimizando o desempenho do aplicativo ao evitar possíveis vazamentos de memória.

3. Ouvintes de eventos

EU. Para detectar interações do usuário, utilizei Window Event Listeners. Esses ouvintes monitoram quando atalhos de teclado específicos (como Cmd D ou Ctrl D) são pressionados.

II. Ao detectar essas teclas pressionadas, a condição relevante é verificada e, se satisfeita, o Observable transmite o evento.

Por que não usar Web Workers?

EU. Você deve estar se perguntando por que optei por não usar Web Workers.

II. Embora Web Workers sejam excelentes para descarregar tarefas computacionais pesadas do thread principal, eles não são adequados para ouvintes de eventos relacionados ao DOM.
III. Dado que o foco deste projeto era lidar com eventos DOM de forma eficiente, o padrão Observable foi uma escolha mais apropriada.

Colaboração e próximas etapas

EU. A implementação atual é leve, com a base de código em torno de 900 bytes. Estou aberto a colaborar com qualquer pessoa interessada em refinar ainda mais este projeto ou até mesmo empacotá-lo como uma biblioteca npm.

II. Sinta-se à vontade para explorar o código e entrar em contato se quiser contribuir!

*Link do GitHub: - *(https://github.com/Ashutoshsarangi/react-portal)

Referência
https://github.com/timc1/kbar?tab=readme-ov-file