‏react-native-grab: روی المان دست بذار، نه توضیح بده

تو این مخزن اومده که react-native-grab می‌خواد شکاف context رو پر کنه: به‌جای اینکه تو پرامپت برای ایجنت کدنویس توضیح بدی کدوم تیکه از رابط کاربری رو می‌خوای، مستقیم روی همون المان native روی صفحه ضربه می‌زنی و ابزار context دقیق منبعش رو می‌گیره و دستی به ایجنت می‌ده. سازنده‌ها می‌گن این پروژه الهام‌گرفته از React Grab هست و همون جریان «point، نه describe» رو به React Native میاره.

شعار اصلیش همینه: «نشون بده، توضیح نده». به‌جای توصیف چیدمان تو پرامپت، خود المان رو انتخاب می‌کنی. context هم از ویوهای واقعی React Native با سیگنال‌های منبعِ آگاه از پلتفرم گرفته می‌شه، نه از حدس.

فایدهٔ عملی‌ش اینه که برای تغییرهای کم‌آنتروپی رابط کاربری — مثل فاصله‌گذاری، تراز و ویرایش متن — فاز جست‌وجوی ایجنت حذف می‌شه و ویرایش‌ها سریع‌تر انجام می‌شن، چون ایجنت دیگه لازم نیست خودش دنبال فایل و خط درست بگرده.

یه نکتهٔ مهم اینه که این کتابخونه فقط با New Architecture و رندرر Fabric کار می‌کنه. به ساختار سلسله‌مراتبی ویوهای native و APIهای Fabric تکیه داره و روی معماری قدیمی یا رندرر Paper اصلاً کار نمی‌کنه، پس باید قبلش New Architecture رو روشن کنی.

راه‌اندازیش چند قدمه: میدل‌ور رو تو Metro وصل می‌کنی، ریشهٔ اپ رو با ReactNativeGrabRoot می‌پیچی، و اگه از ناوبرهای native (مثل native stack یا native tabs) استفاده می‌کنی هر صفحه رو با ReactNativeGrabScreen می‌پوشونی. بعدش از Dev Menu گزینهٔ React Native Grab رو می‌زنی تا انتخاب المان شروع شه.

از نظر API چند جزء داره: ReactNativeGrabContextProvider که متادیتای دلخواه به المان انتخاب‌شده اضافه می‌کنه (و تو بیلد production عملاً no-op هست)، enableGrabbing() که جریان انتخاب رو برنامه‌نویسانه روشن می‌کنه، و setFocusEffect(impl) که هوک تشخیص فوکوس صفحه رو override می‌کنه. به‌صورت پیش‌فرض خودش useFocusEffect رو از expo-router یا @react-navigation/native تشخیص می‌ده، ولی اگه روتر سفارشی داری می‌تونی صریح تعیینش کنی. وقتی context موجود باشه، خروجی کپی‌شده یه بلوک Context: به‌صورت JSON هم کنار پیش‌نمایش المان و stack trace اضافه می‌کنه.

نکات کلیدی:

• به‌جای توصیف چیدمان، روی المان native ضربه می‌زنی و context منبعش رفته به ایجنت
• فقط با New Architecture و رندرر Fabric کار می‌کنه
• برای تغییرهای ساده مثل فاصله و تراز، فاز جست‌وجوی ایجنت حذف می‌شه
• راه‌اندازی با میدل‌ور Metro، ReactNativeGrabRoot و پوشوندن هر صفحه با ReactNativeGrabScreen
• ساختهٔ تیم Callstack و الهام‌گرفته از React Grab