00:00:00TanStack kembali merilis paket baru dalam upaya mereka memperbaiki dunia JavaScript
00:00:03dan kali ini mereka memperbaiki hotkey. Jika Anda berpikir itu terdengar
00:00:07sederhana dan mungkin bisa ditulis oleh AI saat ini, coba pikirkan lagi. TanStack Hotkeys
00:00:11akan menangani berbagai kasus khusus yang sering dilewatkan AI, seperti tata letak papan ketik yang beragam, berbagai sistem
00:00:16operasi, hotkey yang bentrok, cakupan yang tumpang tindih, dan banyak lagi, bahkan memiliki fitur
00:00:20seperti urutan hotkey dan perekaman hotkey, semuanya tetap type-safe dan tidak terikat framework.
00:00:26Percayalah, jika Anda butuh hotkey, gunakan saja paket ini atau suruh agen AI Anda. Maksud saya,
00:00:30ini TanStack, jadi pengalaman pengembangnya pasti bagus. Jadi, mari kita langsung pelajari
00:00:35dan lihat cara kerjanya.
00:00:41Sekarang saya akan langsung masuk ke kodenya karena semua ini cukup sederhana dan saya
00:00:45mengerjakan semua ini di aplikasi React, jadi saya menggunakan paket TanStack React Hotkeys,
00:00:49tapi mereka juga punya paket vanilla JavaScript saat ini, dan akan
00:00:52ada lebih banyak framework segera hadir, tapi ini saat ini masih versi alfa jadi mungkin ada beberapa
00:00:56bug di sana-sini, tapi untuk penggunaan saya, ini sudah menyelesaikan semuanya. Sekarang kita mulai
00:01:01dengan kasus penggunaan paling dasar, yaitu hook useHotkey. Bisa dilihat di bawah sini kita sudah mengimpor
00:01:05ini dari paketnya dan yang perlu kita lakukan hanyalah menentukan apa hotkey-nya dan kemudian
00:01:09sebuah fungsi yang akan dijalankan saat kita menekan hotkey tersebut. Dalam kasus saya, saya mengaturnya agar saat
00:01:13kita menekan hotkey-nya, itu akan membuka command palette, sebuah contoh yang sangat umum.
00:01:17Anda juga bisa melihat ada notifikasi toast di bawah sini supaya Anda bisa melihat apa yang saya tekan
00:01:20dan apa yang dilakukannya. Seperti yang Anda lihat, hook ini sangat sederhana dan bekerja
00:01:24persis seperti yang dijanjikan, tetapi keajaiban TanStack biasanya ada pada pengalaman
00:01:28pengembang dan keamanan tipe (type safety), dan kita mendapatkan hal yang sama di sini. Pertama, dimulai dengan
00:01:32hotkey kita, di mana pun kita menggunakannya di paket ini, semuanya akan type-safe yang
00:01:37cukup luar biasa. Ia mengetahui semua kemungkinan tombol yang bisa kita tekan serta kombinasinya,
00:01:41jadi saya bisa mengubah ini menjadi sesuatu seperti meta plus s yang sebenarnya adalah command s di macOS,
00:01:46jadi mungkin saya sedang mengatur hotkey baru untuk simpan di aplikasi saya, Anda lihat ia tahu itu
00:01:50kombinasi yang valid, dan jika saya salah ketik, ia akan memunculkan error tipe dan memberi tahu
00:01:54bahwa hotkey ini tidak valid. Hal keren lainnya tentang definisi hotkey adalah saat ini
00:01:58saya mengaturnya ke meta plus k yang sebenarnya adalah command plus k di macOS dan Anda lihat itu
00:02:02berhasil bagi saya di sini karena saya memakai macOS, tapi itu berarti hotkey ini tidak akan lagi
00:02:06berfungsi di Windows atau platform lainnya karena tombol meta tidak ada di sana, jadi apa
00:02:11yang bisa kita lakukan sebagai gantinya adalah kita bisa menukar tombol meta di sini dengan tombol modifier,
00:02:15dan itu berarti secara otomatis di macOS akan diatur ke command, tetapi di semua
00:02:19platform lain ini sebenarnya akan menjadi control, jadi Anda langsung memiliki hotkey lintas platform.
00:02:24Dan terakhir, masih membicarakan tentang cara kita mendefinisikan hotkey di paket ini,
00:02:27jika Anda tidak suka definisi string, Anda bisa menggunakan definisi objek dan ini
00:02:31adalah keybind yang sama persis seperti tadi, jadi command k atau control k, Anda lihat yang perlu
00:02:35kita lakukan hanyalah menyebutkan apa tombol non-modifier kita dan kemudian mengatur modifier ke true jika itu yang
00:02:38kita inginkan, atau tombol modifier lainnya jika kita butuh. Akhirnya, beralih dari cara
00:02:42hotkey didefinisikan, berikutnya dalam argumen hook, kita memiliki fungsi
00:02:46sebenarnya yang berjalan saat kita menekan hotkey, dan yang ini sangat sederhana, tentu saja
00:02:50bisa berupa apa pun yang Anda inginkan di dalamnya, tetapi Anda juga memiliki akses ke event keyboard
00:02:54mentah jika membutuhkannya, dan juga beberapa konteks, dan dalam kasus ini konteksnya hanya akan
00:02:58memberi Anda hotkey sebagai string untuk apa yang ditekan, atau Anda bisa mendapatkan objek hotkey
00:03:02yang akan keluar sebagai definisi objek seperti yang baru saja kita lihat, dan terakhir untuk
00:03:05hook useHotkey, ada banyak fitur lain yang ingin saya tunjukkan tetapi argumen ketiga
00:03:09yang bisa Anda gunakan di sini adalah beberapa opsi untuk mengontrol cara kerja hotkey. Sebagian besar
00:03:13cukup jelas dan saya telah mengatur semuanya ke nilai default. Ada hal-hal seperti 'enabled'
00:03:17untuk kontrol programatik apakah hotkey aktif atau tidak, kita punya 'event type' untuk menentukan apakah
00:03:21Anda ingin memicunya saat tombol ditekan (key down) atau dilepas (key up). 'require reset' sebenarnya berarti saat ini
00:03:25jika diatur ke false, jika saya menahan command k, Anda bisa melihat itu terus-menerus memicu ulang
00:03:29hotkey tersebut. Namun, jika saya mengatur ini ke true, itu berarti kita harus melepas
00:03:33hotkey terlebih dahulu agar bisa terpicu lagi. Jadi Anda bisa lihat saya sedang menahannya sekarang dan
00:03:37kali ini hanya terpicu sekali. Lalu kita punya 'ignore inputs', ini berarti jika saya berada
00:03:41di dalam kolom input dan melakukan command k, Anda bisa melihat saat ini hal itu diabaikan sepenuhnya,
00:03:45tidak memicu hotkey. Namun, kita bisa mengaturnya ke false jika kita ingin hotkey
00:03:49tetap berfungsi di dalam input kita, dan terakhir opsi terakhir yang akan saya bahas
00:03:53di sini adalah 'target'. Opsi ini memungkinkan Anda membuat hotkey yang terbatas cakupannya (scoped).
00:03:57Artinya, pada dasarnya saat ini secara default diatur ke seluruh dokumen dan itu berarti saya
00:04:00bisa menekan command k di mana saja di halaman ini dan itu akan memicu command palette tersebut.
00:04:04Namun, saya bisa mengubah ini menjadi sebuah elemen atau react ref, dan jika saya mengubah ini
00:04:09menjadi badge ref misalnya, Anda bisa lihat jika saya klik di halaman saya dan tekan command k sekarang,
00:04:13itu tidak memicu apa pun. Namun, jika saya fokus pada elemen command k di bawah sini, yaitu badge-nya,
00:04:17Anda bisa lihat saya bisa memicunya dari dalam sini, jadi sekarang kita punya hotkey yang terbatas cakupannya.
00:04:21Semoga Anda sudah bisa melihat mengapa saya sangat menyukai paket ini, selalu ada perhatian besar pada detail,
00:04:25pengalaman pengembang yang luar biasa, dan keamanan tipe yang lengkap. Padahal saya baru menunjukkan
00:04:30satu hook, jadi mari kita lihat yang lainnya. Berikutnya kita punya hook useHotkeySequences yang
00:04:34memungkinkan kita memiliki urutan multi-tombol sehingga kita bisa mengatur navigasi gaya Vim,
00:04:38dan yang satu ini cukup jelas, mirip dengan hook useHotkey, kita hanya perlu
00:04:43menentukan urutan tombolnya, lalu fungsi yang akan dijalankan setelah
00:04:47urutan tombol tersebut dimasukkan. Kemudian kita juga bisa memiliki beberapa opsi di sini, dan perhatikan 'timeout'
00:04:51pada dasarnya adalah waktu jeda antar tekanan tombol agar tetap terdaftar sebagai bagian
00:04:54dari urutan. Saat ini saya telah mengatur 'gg', yang akan membawa saya ke bagian atas
00:04:59daftar, jadi jika saya ke sini sekarang dan menekan gg, ia melakukan persis seperti itu. Saya juga
00:05:04mengatur satu di bawah sini jadi jika saya menekan 'sub', itu akan membawa saya ke bawah dan secara kebetulan
00:05:09itu mengeja 'subscribe', sesuatu yang pasti harus Anda lakukan. Berikutnya adalah beberapa hook
00:05:12yang lebih sederhana, yang pertama adalah hook useKeyHold, Anda hanya perlu menentukan tombol mana
00:05:16yang ingin dilacak dan sekarang ini akan menjadi boolean apakah tombol tersebut sedang ditahan
00:05:20atau tidak. Anda bisa lihat saya memantau beberapa tombol di sini, jadi jika sekarang saya menahan shift dan
00:05:24alt, Anda bisa lihat status di halaman berubah berdasarkan boolean tersebut. Anda juga akan melihat
00:05:28di bawah sini saya mencantumkan tombol-tombol yang saat ini sedang ditahan di keyboard saya, dan itu berasal
00:05:32dari hook kedua yaitu hook useHeldKeys yang hanya mengembalikan array berisi
00:05:36tombol yang sedang ditekan. Sekali lagi, saya menahan 'sub', Anda bisa melihatnya muncul di
00:05:40array tersebut, lalu hook terakhir yang ingin saya tunjukkan sebelum kita beralih ke beberapa
00:05:43fungsi utilitas keren adalah hook useHotkeyRecorder. Ini memungkinkan Anda membuat UI
00:05:47kustomisasi pintasan keyboard dan ini hanyalah hook pembantu yang sangat bagus. Anda bisa lihat cara
00:05:52penggunaannya sangat sederhana, kita punya hook useHotkeyRecorder, kita bisa mendapatkan beberapa nilai seperti
00:05:56apakah sedang merekam, hotkey yang terekam itu sendiri, fungsi untuk memulai perekaman,
00:06:00dan fungsi untuk membatalkan perekaman. Kemudian di dalam opsi untuk hook-nya, kita
00:06:05juga bisa mendaftarkan apa yang kita inginkan terjadi saat hotkey berhasil direkam. Dalam kasus saya,
00:06:09saya hanya mengatur hotkey palet menjadi hotkey apa pun yang diputuskan pengguna setelah kita
00:06:14menghubungkan semua ini ke sebuah tombol, kita bisa mendapatkan UI seperti ini, jadi saat ini command K
00:06:17membuka command palette saya, tetapi jika saya tekan record, itu sekarang menggunakan hook saya, jadi ia mendengarkan
00:06:21input keyboard saya, jika saya menekan command backspace, Anda bisa lihat itu sekarang menjadi hotkey baru untuk membuka
00:06:26command palette. Tentu saja Anda mungkin akan menyimpannya ke database sehingga benar-benar
00:06:29tersimpan di pengaturan pengguna. Ini hanyalah hook pembantu yang sangat bagus dan bersama dengan
00:06:33yang lain yang sudah kita lihat, ini sangat mudah digunakan dan bahkan memiliki beberapa default yang bagus
00:06:37seperti fakta bahwa jika mereka merekam hotkey itu di macOS dan menggunakan tombol command, ia akan secara otomatis
00:06:42mengubahnya ke tombol modifier sehingga jika mereka pindah ke Windows atau Linux, itu akan menjadi control di sana.
00:06:46Sekarang selain hook, ada beberapa hal lagi yang ingin saya tunjukkan tentang
00:06:49paket ini, dan yang pertama adalah fungsi yang membantu Anda dalam pemformatan. Anda lihat kita punya
00:06:53fungsi di sini yang disebut 'formatForDisplay' yang berasal dari tanstack/hotkeys. Ini memungkinkan
00:06:57kita memasukkan hotkey seperti modifier dan backspace, itu akan mengubahnya secara otomatis ke
00:07:02platform pengguna dan juga ke ikon, jadi dalam hal ini ia menampilkan command backspace.
00:07:06Jika saya di Windows, ini akan tampil sebagai control backspace. Lalu kita juga punya fungsi
00:07:10'formatWithLabels' yang pada dasarnya melakukan hal yang sama persis kecuali ia mengambil tombol
00:07:14modifier kita dan mengubahnya menjadi label yang benar alih-alih ikon, jadi dalam kasus ini
00:07:18tulisannya 'command backspace', tapi sekali lagi di Windows itu akan menjadi 'control backspace'. Dan akhirnya salah satu
00:07:22alasan saya menyukai TanStack adalah devtools-nya, dan paket ini tidak terkecuali. Jika kita buka
00:07:27devtools-nya, kita bisa melihat hotkey yang terdaftar di halaman bersama dengan
00:07:30urutannya, kita bisa melihat hal-hal tentang status itu dan berapa kali mereka telah dipicu,
00:07:33Anda bisa melihat apakah itu memicu pada key down atau key up, kita bisa melihat apakah ia mendengarkan
00:07:37pada dokumen atau pada elemen tertentu, dan di dalam ini Anda bahkan bisa melihat lebih banyak detail
00:07:41seperti opsi yang telah dikonfigurasi untuk hotkey atau urutan tersebut, dan bahkan melakukan
00:07:45pemicuan manual, ditambah di bagian atas sini Anda bisa melihat tombol yang saat ini sedang ditekan di
00:07:49halaman. Jadi jika Anda tidak tahu apa nama salah satu tombol saat Anda mencoba mengaturnya, cukup
00:07:52masuk ke sini, tekan tombolnya, dan sekarang Anda bisa melihat nilai pastinya. Saya tahu ini terdengar
00:07:56sedikit berulang, tapi TanStack benar-benar memahami pengalaman pengembang dan saya
00:08:00sangat senang kita masih mendapatkan ini di dunia AI coding, jadi saya sangat menyarankan Anda mencoba
00:08:05paket ini jika itu sesuatu yang Anda butuhkan, dan beri tahu saya pendapat Anda tentangnya di
00:08:08kolom komentar di bawah, atau selagi di sana, silakan subscribe, dan seperti biasa sampai jumpa di video berikutnya.