00:00:00أصدرت Tansac حزمة جديدة أخرى في سعيها لإصلاح عالم جافا سكريبت،
00:00:03وهذه المرة يعملون على إصلاح مفاتيح الاختصار. الآن، إذا كنت تعتقد أن هذا أمر
00:00:07بسيط ويمكن للذكاء الاصطناعي كتابته لك هذه الأيام، فأعد التفكير. Tansac hotkeys
00:00:11ستتعامل مع الحالات الاستثنائية التي غالباً ما يغفل عنها الذكاء الاصطناعي، مثل تخطيطات لوحة المفاتيح المتعددة، وأنظمة
00:00:16التشغيل المتعددة، وتعارض مفاتيح الاختصار، وتعارض النطاقات، والكثير غير ذلك، بل إنها تحتوي على ميزات
00:00:20مثل تسلسل مفاتيح الاختصار وتسجيلها، وكل ذلك مع ضمان سلامة النوع واستقلالية إطار العمل.
00:00:26ثق بي، إذا كنت بحاجة لمفاتيح اختصار فاستخدم هذه الحزمة أو اطلب من وكيل الذكاء الاصطناعي الخاص بك فعل ذلك.
00:00:30أعني أنها من Tansac، لذا ستوفر تجربة تطوير رائعة. مع وضع ذلك في الاعتبار، دعونا نبدأ
00:00:35ونراها قيد التشغيل.
00:00:41سأبدأ بالانتقال مباشرة إلى الكود لأن كل شيء بسيط للغاية، وأقوم
00:00:45بكل هذا في تطبيق React، لذا أستخدم حزمة Tansac react hotkeys،
00:00:49لكن لديهم أيضاً حزمة جافا سكريبت عادية حالياً، وسيكون هناك
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التطوير وسلامة النوع (type safety)، ونحصل على الشيء نفسه هنا. يبدأ الأمر أولاً
00:01:32بمفاتيح الاختصار الخاصة بنا؛ في أي مكان نستخدمها فيه في هذه الحزمة ستكون آمنة من حيث النوع،
00:01:37وهو أمر مذهل. فهي تعرف كل المفاتيح الممكنة التي يمكننا ضغطها بالإضافة إلى تركيباتها،
00:01:41لذا يمكنني تغيير هذا إلى شيء مثل “meta plus s” وهو في الواقع “command s” على نظام ماك،
00:01:46ربما أقوم بإعداد مفتاح اختصار جديد للحفظ في تطبيقي؛ تلاحظون أنها تعرف أنه تركيب
00:01:50صحيح، وإذا أخطأت في كتابته فستظهر خطأ في النوع لتخبرنا
00:01:54أن مفتاح الاختصار هذا غير صالح. الشيء الرائع الآخر في تعريف مفتاح الاختصار هو أنني
00:01:58ضبطته حالياً على “meta plus k” وهو في الواقع “command plus k” على نظام ماك، وترون
00:02:02أن هذا يعمل معي هنا لأنني أستخدم الماك، لكن هذا يعني أن مفتاح الاختصار هذا لن
00:02:06يعمل بعد الآن على ويندوز أو أي نظام آخر لأن مفتاح “meta” غير موجود هناك. لذا ما
00:02:11يمكننا فعله بدلاً من ذلك هو استبدال مفتاح “meta” هنا بمفتاح “modifier”،
00:02:15وهذا يعني أنه سيتم ضبطه تلقائياً على “command” في نظام ماك، أما في جميع
00:02:19الأنظمة الأخرى، فسيكون في الواقع “control”. وبذلك تحصل فوراً على مفتاح اختصار يعمل عبر الأنظمة.
00:02:24وأخيراً، وبالحديث عن الطريقة التي نحدد بها مفاتيح الاختصار في هذه الحزمة،
00:02:27إذا لم يعجبك التعريف النصي (string)، يمكنك استخدام تعريف الكائن (object)، وهذا
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المفاتيح الخام إذا كنت بحاجة لذلك، بالإضافة إلى بعض السياق (context). وفي هذه الحالة، سيعطيك
00:02:58السياق ببساطة مفتاح الاختصار كنص لما تم ضغطه، أو يمكنك الحصول على مفتاح
00:03:02الاختصار الذي تم تمريره كتعريف كائن كما رأينا للتو. وأخيراً بالنسبة لخطاف
00:03:05useHotkey، هناك الكثير من الميزات الأخرى التي أريد إظهارها لكم، لكن الوسيط الثالث
00:03:09الذي يمكنك استخدامه هنا هو بعض الخيارات للتحكم في كيفية عمل مفتاح الاختصار. معظمها
00:03:13واضح جداً وقد ضبطتها جميعاً على قيمها الافتراضية؛ لدينا ميزات مثل “enabled”
00:03:17للتحكم البرمجي فيما إذا كان المفتاح مفعلاً أم لا، ولدينا “event type” لتحديد ما
00:03:21إذا كنت تريده أن يعمل عند ضغط المفتاح لأسفل أو عند إفلاته. “require reset” تعني
00:03:25حالياً أنه إذا تم ضبطها على “false” وقمت بالضغط المستمر على “command k”، فسترون
00:03:29أنه يقوم بتفعيل مفتاح الاختصار باستمرار. أما إذا ضبطت هذا على “true”، فهذا يعني
00:03:33أنه يجب علينا في الواقع إفلات المفتاح أولاً ليتم تفعيله مرة أخرى؛ كما تلاحظون أنا
00:03:37أضغط عليه باستمرار الآن، وقد تفعّل مرة واحدة فقط هذه المرة. ثم لدينا “ignore inputs”؛
00:03:41هذا يعني أنه إذا كنت داخل حقل إدخال وقمت بضغط “command k”، فسترون أنه
00:03:45يتم تجاهله تماماً في الوقت الحالي ولا يتم تفعيل الاختصار. ومع ذلك، يمكننا ضبط هذا على “false”
00:03:49إذا كنا نريد فعلاً لمفاتيح الاختصار أن تظل تعمل داخل حقول الإدخال. وأخيراً، الخيار الأخير
00:03:53الذي سأستعرضه هنا هو “target”؛ هذا الخيار يسمح لك بإنشاء مفاتيح اختصار ذات نطاق محدد (scoped).
00:03:57ما يعنيه هذا هو أنه بشكل افتراضي يتم ضبطه على المستند بأكمله، وهذا يعني أنني
00:04:00يمكنني ضغط “command k” في أي مكان في هذه الصفحة وسيتم تفعيل لوحة الأوامر.
00:04:04لكن يمكنني تغيير هذا ليكون عنصراً محدداً أو مرجع React (ref)، وإذا قمت بتغيير
00:04:09هذا ليكون مرجع الشارة (badge ref) مثلاً، فسترون أنني إذا نقرت على الصفحة وضغطت “command k”
00:04:13فلن يتم تفعيله. أما إذا قمت بالتركيز على عنصر “command k” بالأسفل هنا، أي الشارة،
00:04:17فسأتمكن من تفعيله من هناك؛ لقد أصبح لدينا الآن مفتاح اختصار بنطاق محدد. آمل
00:04:21أنكم بدأتم تدركون لمَ أحببت هذه الحزمة؛ فهناك دائماً اهتمام كبير بالتفاصيل،
00:04:25وتجربة تطوير رائعة، وسلامة نوع كاملة، وما زلت لم أعرض عليكم سوى خطاف
00:04:30واحد فقط. دعونا نلقِ نظرة على المزيد. تالياً لدينا خطاف useHotkeySequences الذي
00:04:34يسمح لنا بإنشاء تسلسلات مفاتيح متعددة، حتى نتمكن من إعداد أشياء مثل التنقل بأسلوب vim.
00:04:38وهذا الخطاف واضح جداً وشبيه بخطاف useHotkey؛ كل ما نحتاجه هو
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بسيط جداً في الاستخدام؛ لدينا خطاف useHotkeyRecorder ونحصل منه على قيم مثل
00:05:56حالة التسجيل الحالية، ومفتاح الاختصار المسجل، ودالة لبدء التسجيل،
00:06:00ودالة لإلغاء التسجيل. ثم من خلال خيارات الخطاف، يمكننا
00:06:05أيضاً تحديد ما نريد حدوثه عند تسجيل مفتاح اختصار بنجاح. في حالتي،
00:06:09أقوم ببساطة بضبط مفتاح لوحة الأوامر ليكون أي مفتاح اختاره المستخدم. بمجرد ربط
00:06:14كل هذا بزر، يمكننا الحصول على واجهة مستخدم مشابهة لهذه؛ حالياً “command K”
00:06:17يفتح لوحة الأوامر، لكن إذا ضغطت على “record” فسيتم استخدام الخطاف، وسيبدأ في الاستماع
00:06:21للوحة المفاتيح. فإذا ضغطت “command backspace”، فسترون أنه أصبح مفتاح الاختصار الجديد لفتح
00:06:26لوحة الأوامر. من البديهي أنك ستقوم بحفظ ذلك في قاعدة البيانات ليتم حفظه
00:06:29في إعدادات المستخدم. إنه مجرد خطاف مساعد رائع للغاية، وإلى جانب
00:06:33الخطافات الأخرى التي رأيناها، فهو بسيط جداً في الاستخدام ويحتوي على افتراضات جيدة،
00:06:37مثل حقيقة أنهم إذا سجلوا الاختصار على الماك واستخدموا مفتاح “command”، فسيتم
00:06:42تحويله تلقائياً إلى مفتاح “modifier”، بحيث إذا انتقلوا إلى ويندوز أو لينكس فسيكون “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ولو كنت على ويندوز لظهرت كـ “control backspace”. لدينا أيضاً دالة formatWithLabels
00:07:10والتي تقوم بالشيء نفسه بالضبط تقريباً، باستثناء أنها تأخذ مفتاح
00:07:14التعديل وتحوله إلى التسمية الصحيحة بدلاً من الأيقونة؛ في هذه الحالة “command
00:07:18backspace”، ولكن مجدداً على ويندوز ستكون “control backspace”. وأخيراً، أحد
00:07:22الأسباب التي تجعلني أحب tanstack هو أدوات التطوير (dev tools)، وهذه الحزمة ليست استثناءً. فإذا فتحنا
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التعليقات بالأسفل، ولا تنسَ الاشتراك، وكما هو الحال دائماً، نلتقي في الفيديو القادم.