@pierre/trees: کتابخونه رندر درخت فایل
فرانتاند
جاوااسکریپتخلاصهٔ کامل‌تر
اگه توی پروژه‌هات نیاز داری یه درخت فایل شبیه به ویرایشگرهای کد نمایش بدی، @pierre/trees دقیقاً همون چیزیه که دنبالش می‌گردی. این کتابخونه متن‌باز توسط The Pierre Computer Company ساخته شده و الان در نسخه بتا (v1.0.0-beta.3) در دسترسه.
هدف اصلی این ابزار اینه که رندر درخت فایل رو هم سریع کنه، هم قابل انعطاف. یعنی می‌تونی ازش تو پروژه‌های مختلف با ظاهرهای کاملاً متفاوت استفاده کنی بدون اینکه گیر محدودیت‌های بصری بشی.
یکی از جذاب‌ترین ویژگی‌هاش سیستم سفارشی‌سازی از طریق CSS Variables هست. یه لایه‌بندی هوشمندانه طراحی شده که رنگ‌ها رو با یه ترتیب اولویتی اعمال می‌کنه: اول متغیرهای override که خودت تعریف می‌کنی، بعد متغیرهای تم (مثلاً از Shiki یا VS Code)، و در نهایت مقادیر پیش‌فرض. این یعنی ادغام با تم‌های موجود خیلی راحته.
از نظر بصری، کتابخونه هم از حالت روشن (light) و هم تاریک (dark) پشتیبانی می‌کنه و رنگ‌ها با تابع CSS استاندارد light-dark() مدیریت می‌شن. چیزی نیست که بخوای دستی toggle کنی.
یه بخش جالب دیگه پشتیبانی از وضعیت Git هست. فایل‌های added، modified، deleted، renamed، untracked و ignored هر کدوم رنگ مخصوص خودشون رو می‌گیرن، درست مثل چیزی که توی VS Code می‌بینی. این رنگ‌ها هم قابل override هستن.
برای آیکون فایل‌ها هم یه مجموعه بزرگ از آیکون‌های built-in وجود داره که فایل‌های مختلف از TypeScript و Python گرفته تا Docker، Terraform، Rust، Svelte، Vue و خیلی چیزهای دیگه رو پوشش می‌ده. رنگ هر آیکون هم به‌صورت مجزا قابل تنظیمه.
تنظیم چگالی (density) هم یه فیچر کاربردیه. با یه عدد ساده می‌تونی فاصله‌گذاری و padding کل درخت رو تغییر بدی. حالت compact با عدد 0.8، پیش‌فرض با 1، و relaxed با 1.2 کار می‌کنه.
نصبش هم با Bun یه خط بیشتر نیست و مستنداتش روی سایت رسمی در دسترسه.
نکات کلیدی:
- کتابخونه متن‌باز برای نمایش درخت فایل با تمرکز روی پرفورمنس
- سفارشی‌سازی کامل از طریق CSS Variables با سیستم اولویت‌بندی هوشمند
- پشتیبانی از تم روشن/تاریک به‌صورت خودکار
- نمایش وضعیت Git با رنگ‌بندی مجزا برای هر نوع تغییر
- آیکون‌های built-in برای انواع فایل‌های متداول
- قابلیت تنظیم چگالی (compact، default، relaxed)
- در حال حاضر در نسخه بتا (v1.0.0-beta.3)
