‏React Source Lens؛ پرش از کامپوننت به سورس

React Source Lens یه ابزار توسعه‌ست که یه دردسر آشنا رو حل می‌کنه: وقتی تو مرورگر یه کامپوننت می‌بینی و نمی‌دونی سورسش کجاست. به گفتهٔ سازنده، کافیه روی کامپوننت هاور کنی و یه شورتکات بزنی تا ادیتورت دقیقاً همون فایل و همون خط رو باز کنه.

طرز استفاده‌ش هم ساده‌ست: هوک useReactSourceLens رو یه بار ریشهٔ اپت صدا می‌زنی و تمام. بعدش تو حالت توسعه، روی هر کامپوننت هاور کن و Cmd+Shift+O (رو مک) یا Alt+Shift+O (رو ویندوز/لینوکس) رو بزن.

import { useReactSourceLens } from 'react-source-lens';

useReactSourceLens({
  projectRoot: '/path/to/your/project'
});

وقتی منبع پیدا شد، یه مودال باز می‌شه که شمارهٔ فایل و خط رو نشون می‌ده و دکمهٔ «Open in VS Code» و «Copy Path» داره؛ بعد از ۱۰ ثانیه هم خودش بسته می‌شه.

راجع به این‌که چطوری کار می‌کنه، از فایبرنودهای داخلی React و اطلاعات دیباگ استفاده می‌کنه تا محل سورس رو پیدا کنه. بهترین حالتش وقتیه که React تو حالت development باشه و کامپوننت‌ها اطلاعات دیباگِ منبع داشته باشن — که تو Create React App و Vite به‌صورت پیش‌فرض روشنه. یه پلاگین Babel اختیاری هم داره که با افزودن ویژگی‌های منبع به عناصر JSX، تشخیص رو دقیق‌تر می‌کنه.

سازگاری با فریمورک‌های مختلف رو هم توضیح داده: Next.js چون به‌صورت پیش‌فرض از SWC استفاده می‌کنه و پلاگین Babel سفارشی رو قبول نداره، باید تنظیمش کنی که به‌جاش Babel رو به کار بگیره؛ و برای CRA هم چون بدون eject نمی‌شه پلاگین Babel اضافه کرد، از CRACO استفاده می‌کنی. البته حتی بدون پلاگین Babel هم React Source Lens با بازرسی رانتایم کار می‌کنه.

از نظر ادیتور هم گزینه‌ها بازن: VS Code، WebStorm/IntelliJ، Atom، Sublime، Cursor و Windsurf پشتیبانی می‌شن و اگه چیزی مشخص نکنی، خودش از روی متغیرهای محیطی REACT_EDITOR و EDITOR تشخیص می‌ده و در نهایت به VS Code برمی‌گرده. لایسنسش هم MIT ـه.

نکات کلیدی:

• هاور روی کامپوننت + شورتکات = بازشدن فایل و خط دقیق تو ادیتور
• مبتنی بر فایبرنودها و اطلاعات دیباگ React، بهترین در حالت development
• پلاگین Babel اختیاری برای تشخیص دقیق‌تر منبع
• سازگار با Vite، CRA (از طریق CRACO) و Next.js (با تنظیم Babel)
• پشتیبانی از VS Code، WebStorm، Cursor، Windsurf و چند ادیتور دیگه