Введение

Когда я наткнулся на Kbar, мне очень хотелось создать то же самое со своими вкусами.

1. Я разработал собственную палитру команд, которую можно запускать с помощью Cmd D на Mac или Ctrl D на Windows/Linux.

2. Эта палитра команд действует как портал, позволяя пользователям переходить к любым предопределенным статическим маршрутам в приложении.

3. Его можно закрыть с помощью клавиши Esc, и для демонстрационных целей я включил модальное окно с кнопкой закрытия.

4. В этой статье я познакомлю вас с ключевыми компонентами и дизайнерскими решениями, лежащими в основе этого проекта, включая использование порталов React, шаблона Observable и прослушивателей событий окна.

Ключевые используемые технологии и шаблоны

1. Реагирующие порталы

Я. Чтобы гарантировать, что палитра команд не мешает корневому DOM, я решил использовать React Portals.

II. Порталы позволяют отображать дочерние элементы компонента в другой части иерархии DOM, за пределами родительского компонента.

III. Это имело решающее значение для изоляции структуры DOM палитры команд от остальной части приложения, гарантируя, что корневой DOM останется незатронутым.

2. Наблюдаемая закономерность

Я. Я реализовал шаблон Observable, похожий на RxJS Angular. Основная причина принятия этого шаблона заключалась в том, чтобы отделить логику управления состоянием и обработки событий от самого компонента.

II. Вместо того, чтобы встраивать прослушиватели событий непосредственно в компонент и управлять состоянием там, я создал Observable. Когда выполняется определенное условие (например, событие нажатия клавиши), Observable передает сообщение, позволяя остальной части приложения отреагировать соответствующим образом.

III. Этот шаблон улучшает модульность и удобство сопровождения базы кода.

IV. Более того, я позаботился о том, чтобы Observables корректно отписывались, когда они больше не нужны, оптимизируя производительность приложения за счет предотвращения потенциальных утечек памяти.

3. Слушатели событий

Я. Чтобы обнаружить взаимодействие с пользователем, я использовал прослушиватели событий окна. Эти прослушиватели отслеживают нажатие определенных сочетаний клавиш (например, Cmd D или Ctrl D).

II. При обнаружении этих нажатий клавиш проверяется соответствующее условие, и если оно удовлетворено, Observable передает событие.

Почему бы не использовать веб-воркеры?

Я. Вы можете задаться вопросом, почему я решил не использовать Web Workers.

II. Хотя веб-воркеры отлично подходят для разгрузки тяжелых вычислительных задач из основного потока, они не очень подходят для прослушивателей событий, связанных с DOM.
III. Учитывая, что целью этого проекта была эффективная обработка событий DOM, шаблон Observable оказался более подходящим выбором.

Сотрудничество и дальнейшие шаги

Я. Текущая реализация является облегченной, с кодовой базой около 900 байт. Я открыт для сотрудничества со всеми, кто заинтересован в дальнейшем усовершенствовании этого проекта или даже в его упаковке в качестве библиотеки npm.

II. Не стесняйтесь изучать код и обращайтесь, если хотите внести свой вклад!

*Ссылка на GitHub: - *(https://github.com/Ashutoshsarangi/react-portal)

Ссылка
https://github.com/timc1/kbar?tab=readme-ov-file