00:00:00TanStack выпустили очередной новый пакет в своей миссии по исправлению мира JavaScript,
00:00:03и на этот раз они взялись за горячие клавиши. Если вы думаете, что это звучит
00:00:07просто и что ИИ, вероятно, мог бы написать это за вас — подумайте еще раз. TanStack Hotkeys
00:00:11обрабатывает пограничные случаи, которые ИИ часто упускает, такие как разные раскладки клавиатуры,
00:00:16разные операционные системы, конфликтующие сочетания, области видимости и многое другое,
00:00:20и даже поддерживает последовательности клавиш и запись хоткеев, оставаясь типизированным и независимым от фреймворка.
00:00:26Поверьте, если вам нужны горячие клавиши, просто используйте этот пакет или поручите это вашему ИИ-агенту.
00:00:30Это же TanStack, так что удобство разработки будет на высоте. С учетом сказанного, давайте
00:00:35посмотрим на него в деле.
00:00:41Начнем сразу с кода, так как тут все довольно просто. Я показываю это
00:00:45на примере React-приложения, поэтому использую пакет @tanstack/react-hotkeys,
00:00:49но у них также есть пакет для чистого JavaScript, а в будущем
00:00:52появятся версии и для других фреймворков. Сейчас библиотека в альфе, так что
00:00:56могут встречаться баги, но мои задачи она уже полностью решила. Начнем
00:01:01с самого базового случая — хука useHotkey. Как видите, мы импортировали
00:01:05его из пакета, и все, что нам нужно — это определить само сочетание
00:01:09и функцию, которая сработает при нажатии. В моем примере я настроил его так,
00:01:13чтобы открывалась командная панель — довольно стандартный кейс.
00:01:17Также здесь внизу есть уведомление, чтобы вы видели, что я нажимаю
00:01:20и что именно происходит. Как видите, этот хук невероятно прост,
00:01:24он делает ровно то, что заявлено. Но магия TanStack обычно заключается в удобстве
00:01:28разработки и типобезопасности, и здесь мы получаем то же самое. Во-первых,
00:01:32это касается самих клавиш: везде, где они используются в этом пакете, работает TypeSafe,
00:01:37и это поразительно. Библиотека знает все возможные клавиши и их комбинации,
00:01:41так что я могу изменить это на что-то вроде meta+s (это Command+S на macOS).
00:01:46Допустим, я настраиваю хоткей для сохранения в приложении. Она видит, что это
00:01:50валидная комбинация, а если я допущу опечатку, TypeScript выдаст ошибку,
00:01:54сообщив, что такого сочетания не существует. Еще одна крутая фишка в определении клавиш:
00:01:58сейчас у меня стоит meta+k, что на macOS означает Command+K. Это
00:02:02отлично работает у меня, так как я на Маке, но это сочетание перестанет
00:02:06работать на Windows или других платформах, так как клавиши Meta там нет.
00:02:11Вместо этого мы можем заменить meta на ключевое слово modifier,
00:02:15и это автоматически будет означать Command на macOS, а на всех
00:02:19других платформах превратится в Control. Так вы сразу получаете кроссплатформенный хоткей.
00:02:24И последнее по поводу того, как мы определяем клавиши в этом пакете:
00:02:27если вам не нравится строковый формат, вы можете использовать объект.
00:02:31Это то же самое сочетание Command+K или Control+K: нам просто нужно
00:02:35указать основную клавишу и установить modifier в true (или другие
00:02:38модификаторы, если нужно). Закончим с определением клавиш и перейдем
00:02:42к аргументам хука: далее идет сама функция, которая выполняется
00:02:46при нажатии. Она максимально проста. Внутри нее
00:02:50можно делать что угодно, но у вас также есть доступ к исходному событию клавиатуры,
00:02:54если оно вам нужно, и к контексту. В данном случае контекст просто
00:02:58предоставит нажатую комбинацию в виде строки или
00:03:02в виде объекта, как мы видели ранее. И последнее для
00:03:05хука useHotkey (хотя функций еще море): третий аргумент,
00:03:09который можно использовать — это опции для управления работой хоткея.
00:03:13Большинство из них интуитивно понятны. У меня стоят значения по умолчанию: например, enabled
00:03:17для программного включения/выключения, eventType для выбора
00:03:21между keydown и keyup. Параметр requireReset означает вот что:
00:03:25если он false и я зажму Command+K, вы видите, что хоткей
00:03:29постоянно срабатывает повторно. Если же поставить true,
00:03:33нам придется сначала отпустить клавишу, чтобы действие повторилось. Вот я держу,
00:03:37и на этот раз оно сработало только единожды. Далее идет ignoreInputs.
00:03:41Это значит, что если я нахожусь внутри текстового поля и нажимаю Command+K,
00:03:45сейчас это игнорируется и хоткей не срабатывает. Мы можем поставить false,
00:03:49если хотим, чтобы горячие клавиши работали даже во время ввода текста.
00:03:53И последняя опция, которую я разберу — target. Она позволяет
00:03:57создавать «изолированные» хоткеи. По умолчанию целью является весь документ,
00:04:00то есть я могу нажать Command+K в любом месте страницы, и откроется палитра.
00:04:04Однако я могу привязать это к конкретному элементу или React-ссылке (ref).
00:04:09Если я укажу badgeRef, то при клике на страницу и нажатии Command+K
00:04:13ничего не произойдет. Но если я сфокусируюсь на элементе badge,
00:04:17то хоткей сработает. Теперь у нас есть контекстный хоткей. Надеюсь,
00:04:21вы уже понимаете, почему мне так нравится этот пакет: внимание к деталям,
00:04:25шикарный DX и полная типизация. И я показал вам всего лишь
00:04:30один хук. Давайте взглянем на другие. Далее у нас useHotkeySequences —
00:04:34он позволяет создавать цепочки нажатий, например, для навигации в стиле Vim.
00:04:38Тут все логично, как и в обычном хуке: нужно
00:04:43задать последовательность клавиш, функцию, которая сработает после
00:04:47завершения ввода, и опции. Параметр timeout определяет,
00:04:51сколько времени может пройти между нажатиями, чтобы они считались
00:04:54частью одной цепочки. Я настроил «gg» для перехода в начало
00:04:59списка. Пробуем: нажимаю «gg», и это работает. Также я
00:05:04настроил «sub» для перехода в конец. По совпадению
00:05:09это начало слова «subscribe» (подписаться) — что вам определенно стоит сделать.
00:05:12Следующие хуки еще проще. Первый — useKeyHold. Вы просто
00:05:16указываете клавишу, которую нужно отслеживать, и получаете boolean:
00:05:20зажата она сейчас или нет. Я отслеживаю несколько клавиш: нажимаю Shift
00:05:24и Alt, и вы видите, как состояние на странице меняется. Также
00:05:28внизу я вывожу список всех клавиш, зажатых в данный момент.
00:05:32Это делает второй хук — useHeldKeys, который возвращает массив
00:05:36всех удерживаемых клавиш. Снова зажимаю «sub» — и они появляются
00:05:40в массиве. И последний хук, который я покажу перед тем как перейти
00:05:43к утилитам — это useHotkeyRecorder. Он позволяет создавать интерфейсы
00:05:47для настройки горячих клавиш пользователем. Это отличный помощник.
00:05:52Пользоваться им очень легко: хук возвращает такие значения,
00:05:56как статус записи, саму записанную комбинацию, функцию старта
00:06:00и функцию отмены записи. В настройках самого хука мы можем
00:06:05прописать, что должно произойти при успешной записи. В моем случае
00:06:09я просто обновляю хоткей для палитры на тот, что выбрал пользователь.
00:06:14Привязав все это к кнопке, мы получаем вот такой UI. Сейчас Command+K
00:06:17открывает палитру, но если я нажму «Record», включится хук и начнет
00:06:21слушать клавиатуру. Нажимаю Command+Backspace — и это мой новый хоткей
00:06:26для открытия палитры. В реальном проекте вы бы сохранили это в базу данных,
00:06:29чтобы настройки пользователя сохранялись. Это супер-удобный хук,
00:06:33и, как и другие, он прост в использовании и имеет отличные дефолты.
00:06:37Например, если записать хоткей на Mac с клавишей Command, библиотека
00:06:42сама конвертирует её в «modifier», так что на Windows это будет Control.
00:06:46Помимо хуков, есть еще пара вещей, которые я хочу показать,
00:06:49и первое — это функции для форматирования. У нас есть
00:06:53функция formatForDisplay из пакета tanstack-hotkeys. Она
00:06:57позволяет передать хоткей типа «modifier+backspace» и автоматически
00:07:02преобразует его под платформу пользователя и в иконки. В данном случае это Command + Backspace.
00:07:06На Windows это отобразилось бы как Ctrl + Backspace. Также есть функция
00:07:10formatWithLabels, которая делает по сути то же самое,
00:07:14но вместо иконок использует текстовые названия клавиш. В моем случае —
00:07:18Command Backspace, а на Windows была бы надпись Control Backspace.
00:07:22И наконец, одна из причин моей любви к TanStack — это DevTools. И этот пакет не исключение.
00:07:27Открыв инструменты разработчика, мы видим все хоткеи, зарегистрированные
00:07:30на странице, включая последовательности. Можно смотреть их состояние и сколько раз они сработали,
00:07:33увидеть, срабатывают ли они на нажатие или отпускание, отслеживаются ли они
00:07:37во всем документе или на конкретном элементе. Внутри можно найти
00:07:41подробности о конфигурации каждого сочетания и даже
00:07:45вызвать их вручную. Плюс сверху отображаются клавиши, зажатые
00:07:49в данный момент. Если вы не знаете код какой-то клавиши при настройке,
00:07:52просто нажмите её здесь и увидите точное значение. Возможно,
00:07:56я повторяюсь, но TanStack действительно понимает, что нужно разработчикам.
00:08:00Я очень рад, что такие инструменты появляются даже в эпоху ИИ-кодинга. Очень
00:08:05рекомендую попробовать этот пакет, если он вам нужен, и поделиться мнением
00:08:08в комментариях. И не забудьте подписаться! До встречи в следующем видео.