Introducción

Cuando encontré Kbar me fascinó crear lo mismo con mis sabores.

1. Desarrollé una paleta de comandos personalizada que se puede activar usando Cmd D en Mac o Ctrl D en Windows/Linux.

2. Esta paleta de comandos actúa como un portal, permitiendo a los usuarios navegar a cualquier ruta estática predefinida dentro de la aplicación.

3. Se puede cerrar usando la tecla Esc y, para fines de demostración, incluí un modal con un botón de cerrar.

4. En este artículo, lo guiaré a través de los componentes clave y las decisiones de diseño detrás de este proyecto, incluido el uso de React Portals, el patrón Observable y Window Event Listeners.

Tecnologías y patrones clave utilizados

1. Portales de reacción

I. Para asegurarme de que la paleta de comandos no interfiera con el DOM raíz, opté por usar React Portals.

II. Los portales le permiten representar los elementos secundarios de un componente en una parte diferente de la jerarquía DOM, fuera del componente principal.

III. Esto fue crucial para aislar la estructura DOM de la paleta de comandos del resto de la aplicación, asegurando que el DOM raíz no se vea afectado.

2. Patrón observable

I. Implementé un patrón Observable similar al RxJS de Angular. La razón principal para adoptar este patrón fue desacoplar la lógica de gestión de estado y de manejo de eventos del propio componente.

II. En lugar de incorporar detectores de eventos directamente dentro del componente y administrar el estado allí, creé un Observable. Cuando se cumple una condición específica (por ejemplo, un evento de pulsación de tecla), el Observable transmite un mensaje, permitiendo que el resto de la aplicación reaccione en consecuencia.

III. Este patrón mejora la modularidad y la mantenibilidad del código base.

IV. Además, me aseguré de que los Observables se cancelen correctamente cuando ya no sean necesarios, optimizando el rendimiento de la aplicación al evitar posibles pérdidas de memoria.

3. Oyentes de eventos

I. Para detectar las interacciones del usuario, utilicé Window Event Listeners. Estos oyentes monitorean cuando se presionan atajos de teclado específicos (como Cmd D o Ctrl D).

II. Al detectar estas pulsaciones de teclas, se verifica la condición relevante y, si se cumple, el Observable transmite el evento.

¿Por qué no utilizar Web Workers?

I. Quizás se pregunte por qué elegí no utilizar Web Workers.

II. Si bien los Web Workers son excelentes para descargar tareas computacionales pesadas del hilo principal, no son adecuados para los detectores de eventos relacionados con DOM.
III. Dado que el objetivo de este proyecto era manejar eventos DOM de manera eficiente, el patrón Observable era una opción más apropiada.

Colaboración y próximos pasos

I. La implementación actual es ligera, con una base de código de alrededor de 900 bytes. Estoy abierto a colaborar con cualquier persona interesada en perfeccionar aún más este proyecto o incluso empaquetarlo como una biblioteca npm.

II. ¡No dudes en explorar el código y comunicarte con nosotros si deseas contribuir!

*Enlace de GitHub:- *(https://github.com/Ashutoshsarangi/react-portal)

Referencia
https://github.com/timc1/kbar?tab=readme-ov-file