00:00:00Tansac ने JavaScript की दुनिया को बेहतर बनाने की अपनी कोशिश में एक और नया पैकेज जारी किया है
00:00:03और इस बार वे हॉटकीज़ (hotkeys) को ठीक कर रहे हैं। अब अगर आपको लगता है कि यह कुछ ऐसा है
00:00:07जो सुनने में सरल लगता है और AI शायद इसे आपके लिए लिख सकता है, तो फिर से सोचिए। Tansac hotkeys
00:00:11उन बारीकियों और समस्याओं को संभाल लेगा जिन्हें अक्सर AI छोड़ देता है, जैसे कि कई कीबोर्ड लेआउट, कई ऑपरेटिंग
00:00:16सिस्टम, आपस में टकराने वाली हॉटकीज़, अलग-अलग स्कोप और बहुत कुछ। इसमें
00:00:20हॉटकी सीक्वेंस और हॉटकी रिकॉर्डिंग जैसी विशेषताएं भी हैं, और यह टाइप-सेफ और फ्रेमवर्क-स्वतंत्र है।
00:00:26मुझ पर विश्वास करें, यदि आपको हॉटकीज़ की आवश्यकता है तो बस इस पैकेज का उपयोग करें या अपने AI एजेंट को ऐसा करने के लिए कहें। मेरा मतलब है,
00:00:30यह Tansac है इसलिए इसका डेवलपर अनुभव बेहतरीन होने वाला है, तो चलिए अब गहराई से जानते हैं
00:00:35और इसे काम करते हुए देखते हैं।
00:00:41अब मैं सीधे कोड पर चलता हूँ क्योंकि यह सब काफी सरल है और
00:00:45मैं यह सब एक React एप्लीकेशन में कर रहा हूँ इसलिए मैं Tansac React hotkeys पैकेज का उपयोग कर रहा हूँ,
00:00:49लेकिन उनके पास फिलहाल एक वैनिला JavaScript पैकेज भी है और
00:00:52जल्द ही और भी फ्रेमवर्क के लिए पैकेज आने वाले हैं। यह वर्तमान में अल्फा (alpha) वर्जन में है इसलिए इसमें यहाँ-वहाँ कुछ
00:00:56बग्स हो सकते हैं, लेकिन मेरे काम के लिए इसने पहले ही सारी समस्याएँ सुलझा दी हैं। अब हम
00:01:01सबसे बुनियादी उदाहरण से शुरू करेंगे जो कि useHotkey हुक है। आप यहाँ नीचे देख सकते हैं कि हमने इसे
00:01:05पैकेज से इम्पोर्ट किया है और हमें बस यह परिभाषित करना है कि हमारी हॉटकी क्या है और
00:01:09फिर वह फंक्शन जो उस हॉटकी को दबाने पर चलेगा। मेरे मामले में, मैंने इसे ऐसे सेट किया है कि
00:01:13जब हम हॉटकी दबाते हैं, तो यह कमांड पैलेट खोल देगा, जो कि एक बहुत ही सामान्य उदाहरण है।
00:01:17आप नीचे एक टोस्ट (toast) भी देख सकते हैं ताकि आप देख सकें कि मैं क्या दबा रहा हूँ
00:01:20और उसने बिल्कुल क्या किया। जैसा कि आप देख सकते हैं, यह हुक अविश्वसनीय रूप से सरल है, यह
00:01:24बिल्कुल वही करता है जो इसे करना चाहिए, लेकिन Tansac का असली जादू आमतौर पर इसके डेवलपर
00:01:28अनुभव और टाइप सेफ्टी में होता है और हमें यहाँ भी वही मिलता है। सबसे पहले
00:01:32यह हमारी हॉटकीज़ से शुरू होता है। इस पैकेज में जहाँ भी ये हॉटकीज़ होंगी, वे टाइप-सेफ होंगी जो कि
00:01:37काफी अद्भुत है। इसे सभी संभावित कुंजियों (keys) के साथ-साथ उनके कॉम्बिनेशन के बारे में भी पता है।
00:01:41तो मैं इसे “meta + s” जैसा कुछ बदल सकता हूँ जो वास्तव में Mac OS पर “command + s” है,
00:01:46तो शायद मैं अपने एप्लीकेशन में सेव (save) करने के लिए एक नई हॉटकी सेट कर रहा हूँ। आप देख सकते हैं कि इसे पता है कि यह
00:01:50एक वैध कॉम्बिनेशन है और यदि मैं इसे गलत टाइप करूँ तो यह एक टाइप एरर देगा और हमें बताएगा
00:01:54कि यह हॉटकी मान्य नहीं है। हॉटकी की परिभाषा के बारे में दूसरी अच्छी बात यह है कि फिलहाल
00:01:58मैंने इसे “meta + k” पर सेट किया है जो वास्तव में Mac OS पर “command + k” है और आप देख सकते हैं कि
00:02:02यह यहाँ मेरे लिए काम कर रहा है क्योंकि मैं Mac OS पर हूँ, लेकिन इसका मतलब है कि यह हॉटकी अब
00:02:06Windows या किसी अन्य प्लेटफॉर्म पर काम नहीं करेगी क्योंकि वहाँ मेटा की (meta key) मौजूद नहीं है, इसलिए
00:02:11हम इसके बजाय क्या कर सकते हैं कि हम यहाँ मेटा की को मॉडिफायर की (modifier key) से बदल सकते हैं
00:02:15और इसका मतलब है कि Mac OS पर यह स्वचालित रूप से कमांड पर सेट हो जाएगा लेकिन
00:02:19अन्य सभी प्लेटफार्मों पर यह वास्तव में कंट्रोल (control) होगा। तो आपको तुरंत एक क्रॉस-प्लेटफॉर्म हॉटकी मिल जाती है।
00:02:24और अंत में, इस पैकेज में हम हॉटकीज़ को जिस तरह से परिभाषित करते हैं, उसी के बारे में बात करते हुए,
00:02:27यदि आपको स्ट्रिंग वाली परिभाषा पसंद नहीं है, तो आप वास्तव में ऑब्जेक्ट वाली परिभाषा का उपयोग कर सकते हैं।
00:02:31यह वही की-बाइंड (keybind) है जो हमारे पास अभी था, यानी कमांड-K या कंट्रोल-K। आप देख सकते हैं कि हमें बस
00:02:35यह बताना है कि हमारी नॉन-मॉडिफायर की कौन सी है और यदि हम उसे चाहते हैं तो मॉडिफायर को true पर सेट करें,
00:02:38या यदि हमें अन्य मॉडिफायर कुंजियों की आवश्यकता हो। अंत में, हॉटकी को परिभाषित करने के तरीके से आगे बढ़ते हुए,
00:02:42हुक के तर्कों (arguments) में अगला वास्तविक फंक्शन है जो हॉटकी दबाने पर चलता है।
00:02:46यह स्पष्ट रूप से बहुत सरल है, इसके अंदर आप जो चाहें रख सकते हैं, लेकिन आपके पास रॉ कीबोर्ड
00:02:50इवेंट (raw keyboard event) तक भी पहुँच है यदि आपको उसकी आवश्यकता है और साथ ही कुछ कॉन्टेक्स्ट भी।
00:02:54इस मामले में, कॉन्टेक्स्ट बस आपको वह हॉटकी एक स्ट्रिंग के रूप में देगा जो दबाई गई थी
00:02:58या आप उसे एक ऑब्जेक्ट के रूप में भी प्राप्त कर सकते हैं जैसा कि हमने अभी देखा था।
00:03:02और फिर useHotkey हुक के लिए आखिरी बात, इसमें बहुत सारी और भी विशेषताएं हैं जिन्हें मैं आपको दिखाना चाहता हूँ,
00:03:05लेकिन तीसरा तर्क जिसे आप यहाँ उपयोग कर सकते हैं, वह हॉटकी कैसे काम करती है उसे नियंत्रित करने के लिए कुछ विकल्प (options) हैं।
00:03:09इनमें से अधिकांश काफी सरल हैं और मैंने उन सभी को उनके डिफ़ॉल्ट पर सेट किया है। हमारे पास प्रोग्रामेटिक कंट्रोल के लिए
00:03:13enabled जैसी चीज़ें हैं कि हॉटकी चालू है या बंद। हमारे पास event type है कि क्या आप
00:03:17इसे key down या key up पर ट्रिगर करना चाहते हैं। require reset का वास्तव में मतलब है कि फिलहाल
00:03:21यदि इसे false पर सेट किया गया है और मैं command + k को दबाए रखता हूँ, तो आप देख सकते हैं कि यह लगातार उस हॉटकी को
00:03:25बार-बार ट्रिगर कर रहा है। हालाँकि, यदि मैं इसे true पर सेट करता हूँ, तो इसका मतलब है कि इसे फिर से ट्रिगर करने के लिए
00:03:29हमें वास्तव में हॉटकी को छोड़ना होगा। आप देख सकते हैं कि मैं इसे अभी दबाए हुए हूँ और
00:03:33इस बार यह केवल एक बार ट्रिगर हुआ। फिर हमारे पास ignore inputs है, इसका मतलब है कि यदि मैं
00:03:37किसी इनपुट के अंदर हूँ और command + k करता हूँ, तो आप देख सकते हैं कि फिलहाल इसे पूरी तरह से नजरअंदाज कर दिया गया है।
00:03:41यह हॉटकी को ट्रिगर नहीं कर रहा है। हालाँकि हम इसे false पर सेट कर सकते हैं यदि हम वास्तव में चाहते हैं कि
00:03:45हॉटकी हमारे इनपुट के अंदर भी काम करे। और फिर अंत में, आखिरी विकल्प जो मैं यहाँ बताऊंगा,
00:03:49वह target है। यह आपको वास्तव में स्कोप्ड (scoped) हॉटकी बनाने की अनुमति देता है।
00:03:53इसका अनिवार्य रूप से मतलब यह है कि अभी डिफ़ॉल्ट रूप से यह पूरे डॉक्यूमेंट पर सेट है
00:03:57और इसका मतलब है कि मैं इस पेज पर कहीं भी command + k दबा सकता हूँ और यह वर्तमान में उस कमांड पैलेट को ट्रिगर कर रहा है।
00:04:00हालाँकि मैं इसे किसी एलिमेंट या React ref में बदल सकता हूँ और यदि मैं इसे
00:04:04badge ref के लिए बदल दूँ, तो आप देख सकते हैं कि यदि मैं अपने पेज पर क्लिक करता हूँ और command + k करता हूँ,
00:04:09तो अब यह ट्रिगर नहीं हो रहा है। हालाँकि यदि मैं यहाँ नीचे अपने command + k एलिमेंट यानी बैज पर फोकस करूँ,
00:04:13तो आप देख सकते हैं कि मैं इसे यहाँ अंदर से ट्रिगर कर सकता हूँ। तो अब हमारे पास एक स्कोप्ड हॉटकी है।
00:04:17उम्मीद है कि आप देख पा रहे होंगे कि मुझे यह पैकेज वास्तव में क्यों पसंद है। इसमें हमेशा बारीकियों पर बहुत ध्यान दिया जाता है,
00:04:21एक शानदार डेवलपर अनुभव और पूरी टाइप सेफ्टी मिलती है। और मैंने अभी तक आपको केवल एक ही
00:04:25हुक दिखाया है, तो चलिए कुछ और देखते हैं। इसके बाद हमारे पास useHotkeySequences हुक है जो
00:04:30हमें मल्टी-की सीक्वेंस बनाने की अनुमति देता है, ताकि हम vim-स्टाइल नेविगेशन जैसी चीज़ें सेट कर सकें।
00:04:34और यह काफी सरल है, useHotkey हुक की तरह ही हमें बस यह परिभाषित करना है कि
00:04:38की-सीक्वेंस क्या होगा, फिर हमारा फंक्शन जो उस की-सीक्वेंस को दर्ज करने के बाद चलेगा।
00:04:43फिर हमारे पास यहाँ कुछ विकल्प भी हो सकते हैं, और ध्यान दें कि timeout मूल रूप से प्रत्येक की-प्रेस के बीच का समय है
00:04:47ताकि उसे अभी भी सीक्वेंस के हिस्से के रूप में रजिस्टर्ड किया जा सके। अभी मैंने इसे “gg” पर सेट किया है,
00:04:51जो मुझे लिस्ट के सबसे ऊपर ले जाएगा। तो अगर मैं अब यहाँ जाकर “gg” दबाता हूँ,
00:04:54तो आप देख सकते हैं कि यह बिल्कुल वही करता है। मैंने यहाँ नीचे एक और सेट किया है कि यदि मैं “sub” दबाता हूँ,
00:04:59तो उसे मुझे सबसे नीचे ले जाना चाहिए। और संयोग से यह “subscribe” शब्द बनता है,
00:05:04कुछ ऐसा जो आपको निश्चित रूप से करना चाहिए। इसके बाद कुछ और भी सरल हुक हैं,
00:05:09पहला useKeyHold हुक है। आपको बस यह बताना है कि आप किस की को ट्रैक करना चाहते हैं
00:05:12और अब यह एक बूलियन (boolean) होगा कि वह की दबाई गई है या नहीं। आप देख सकते हैं कि
00:05:16मैं यहाँ उनमें से कुछ की निगरानी कर रहा हूँ। तो अब मैं shift और alt को दबाता हूँ,
00:05:20तो आप देख सकते हैं कि उस बूलियन के आधार पर पेज की स्थिति बदल रही है। आप नीचे यह भी देखेंगे
00:05:24कि मैं उन कुंजियों को लिस्ट कर रहा हूँ जो वर्तमान में मेरे कीबोर्ड पर दबाई गई हैं और वह दूसरे हुक से आ रहा है
00:05:28जो कि useHeldKeys हुक है। यह बस उन कुंजियों का एक ऐरे (array) देता है जो दबाई गई हैं।
00:05:32तो फिर से मैं “sub” दबाता हूँ, आप देख सकते हैं कि यह उस ऐरे में दिखाई दे रहा है।
00:05:36और फिर आखिरी हुक जो मैं आपको दिखाना चाहता हूँ, इससे पहले कि हम कुछ शानदार यूटिलिटी फंक्शन पर बढ़ें,
00:05:40वह useHotkeyRecorder हुक है। यह वास्तव में आपको कीबोर्ड शॉर्टकट कस्टमाइजेशन UI बनाने देता है
00:05:43और यह वास्तव में एक बहुत अच्छा हेल्पर हुक है। आप देख सकते हैं कि इसका उपयोग करना बहुत सरल है,
00:05:47हमारे पास useHotkeyRecorder हुक है और हम इससे कुछ मान (values) प्राप्त कर सकते हैं जैसे कि
00:05:52क्या वर्तमान में रिकॉर्डिंग हो रही है, रिकॉर्ड की गई हॉटकी खुद, रिकॉर्डिंग शुरू करने के लिए फंक्शन
00:05:56और रिकॉर्डिंग रद्द करने के लिए एक फंक्शन। फिर हुक के विकल्पों के अंदर, हम यह भी
00:06:00रजिस्टर कर सकते हैं कि जब कोई हॉटकी सफलतापूर्वक रिकॉर्ड हो जाए तो हम क्या चाहते हैं। मेरे मामले में,
00:06:05मैं बस पैलेट हॉटकी को वही सेट कर रहा हूँ जो यूजर ने तय किया है। एक बार जब हम
00:06:09इन सबको एक बटन से जोड़ देते हैं, तो हमें इसके जैसा एक UI मिल सकता है। फिलहाल command + K
00:06:14मेरा कमांड पैलेट खोलता है, लेकिन अगर मैं रिकॉर्ड दबाता हूँ, तो वह अब मेरे हुक का उपयोग कर रहा है इसलिए यह
00:06:17मेरे कीबोर्ड को सुन रहा है। तो अगर मैं command + backspace करता हूँ, तो आप देख सकते हैं कि अब कमांड पैलेट खोलने के लिए
00:06:21यह मेरी नई हॉटकी है। जाहिर है कि आप शायद इसे डेटाबेस में सेव करेंगे ताकि यह वास्तव में यूजर की सेटिंग्स में
00:06:26स्थायी रूप से रहे। यह सिर्फ एक बहुत अच्छा हेल्पर हुक है और हमारे द्वारा देखे गए
00:06:29अन्य हुक की तरह ही, इसका उपयोग करना बहुत सरल है और इसमें कुछ अच्छे डिफ़ॉल्ट भी हैं
00:06:33जैसे कि यदि वे Mac OS पर उस हॉटकी को रिकॉर्ड करते हैं और कमांड की का उपयोग करते हैं,
00:06:37तो यह स्वचालित रूप से इसे मॉडिफायर की में बदल देगा, ताकि वे Windows या Linux पर जाएँ
00:06:42तो यह वहाँ कंट्रोल होगा। अब हुक के अलावा, कुछ और चीजें हैं जो मैं आपको इस
00:06:46पैकेज के बारे में दिखाना चाहता हूँ, और पहली चीज़ वे फंक्शन हैं जो फॉर्मेटिंग में आपकी मदद करते हैं।
00:06:49आप देख सकते हैं कि यहाँ formatForDisplay नाम का एक फंक्शन है जो TanStack hotkeys से आता है।
00:06:53यह हमें मॉडिफायर और बैकस्पेस जैसी हॉटकी डालने की अनुमति देता है जो इसे स्वचालित रूप से
00:06:57यूजर के प्लेटफॉर्म और फिर आइकन में बदल देगा। तो इस मामले में, यह command + backspace दिखा रहा है,
00:07:02अगर मैं Windows पर होता तो यह control + backspace के रूप में दिखाता। फिर हमारे पास formatWithLabels
00:07:06फंक्शन भी है जो अनिवार्य रूप से बिल्कुल वही काम करता है सिवाय इसके कि यह हमारी मॉडिफायर
00:07:10की को लेता है और आइकन के बजाय उसे सही लेबल में बदल देता है। तो इस मामले में
00:07:14command + backspace, लेकिन फिर से Windows पर यह control + backspace होगा। और अंत में
00:07:18एक कारण जिससे मुझे TanStack पसंद है, वह है डेव टूल्स (dev tools), और यह पैकेज भी उससे अलग नहीं है।
00:07:22यदि हम डेव टूल्स खोलते हैं, तो हम उन हॉटकीज़ को देख सकते हैं जो पेज पर रजिस्टर्ड हैं
00:07:27और उनके साथ सीक्वेंस भी। हम उस स्थिति (state) के बारे में चीज़ें देख सकते हैं और यह भी कि वे कितनी बार ट्रिगर हुए हैं।
00:07:30आप देख सकते हैं कि क्या यह key down या key up पर ट्रिगर हो रहा है। हम देख सकते हैं कि क्या यह
00:07:33डॉक्यूमेंट पर सुन रहा है या किसी विशिष्ट एलिमेंट पर। और इसके अंदर आप और भी विवरण देख सकते हैं
00:07:37जैसे कि उस हॉटकी या सीक्वेंस के लिए कॉन्फ़िगर किए गए विकल्प, और यहाँ तक कि
00:07:41मैनुअल ट्रिगर भी कर सकते हैं। इसके अलावा यहाँ सबसे ऊपर आप उन कुंजियों को देख सकते हैं जो वर्तमान में पेज पर
00:07:45दबाई गई हैं। तो यदि आप सेट-अप करते समय नहीं जानते कि किसी की का मान क्या है,
00:07:49तो बस यहाँ आएँ, इसे दबाएँ और अब आप सटीक मान देख सकते हैं। मुझे पता है कि यह
00:07:52शायद एक ही बात बार-बार दोहराने जैसा लग सकता है, लेकिन TanStack वास्तव में डेवलपर अनुभव को समझता है
00:07:56और मुझे बहुत खुशी है कि AI कोडिंग की दुनिया में भी हमें यह मिल रहा है। इसलिए मैं आपको
00:08:00इस पैकेज को चेक करने की सलाह देता हूँ यदि आपको इसकी आवश्यकता है, और मुझे बताएं कि आप इसके बारे में क्या सोचते हैं
00:08:05नीचे कमेंट्स में। और यदि आप वहाँ हैं ही, तो सब्सक्राइब करें और हमेशा की तरह, अगले वीडियो में मिलते हैं।
00:08:08नीचे कमेंट्स में या फिर वहाँ जाकर सब्सक्राइब करें और हमेशा की तरह, मिलते हैं अगले वीडियो में