کتابخانهای که آناتومی کامپوننت رو نشون میده
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
component-anatomy یک کتابخانه برای مستندسازی اجزای کامپوننته که به جای تصویر و توضیح ایستا، خود کامپوننت زنده روی صفحه رو مستند میکنه. تو صفحهٔ معرفیاش یک اسلایدر واقعی نشسته و همون اسلایدر با خود کتابخانه مستند شده.
ایدهٔ اصلی همگامسازی دوطرفهٔ هاوره: وقتی روی توضیح یک بخش میری، همون بخش در کامپوننت هایلایت میشه؛ و وقتی روی خود کامپوننت میری، توضیح مربوطه برجسته میشه. مثال اسلایدر بخشهایی مثل root (بستهبندی کل کامپوننت)، track (ریلی که دستگیره روش حرکت میکنه)، range (بخش پرشده که مقدار فعلی رو نشون میده)، thumb (دستگیرهٔ قابلکشیدن و قابلفوکوس با کلیدهای جهت) و output (نمایش زندهٔ مقدار که با aria-live اعلام میشه) رو داره.
راهاندازیاش هم عمداً کمهزینهست: کافیه المان رو با یک ویژگی مثل data-part="thumb" علامت بزنی. بعدش بخشها بهصورت خودکار کشف میشن و نامشون از روی شناسهها ساخته میشه؛ یعنی لازم نیست یک فایل پیکربندی موازی نگه داری.
هستهٔ کتابخانه framework-agnostic ــه: یک رانتایم بدون وابستگی و حدود ۴ کیلوبایت که تو HTML ساده، هر باندلر و هر فریمورکی کار میکنه؛ هر جا که DOM وجود داشته باشه. هایلایتها هم روی DOM واقعیِ رندرشده سوار میشن، پس تغییر اندازه، اسکرول و بهروزرسانیهای داینامیک رو دنبال میکنن.
سمت ظاهر، چهار پریست آماده، تمدهی یکخطی برای رنگ تأکیدی، متغیرهای CSS و هوکهای رندر در دسترسه؛ یعنی پیشفرض قابلقبول داری ولی دستت هم باز میمونه.
پروژه سه نقطهٔ ورود داره: بستهٔ @component-anatomy/core که رانتایم و اورلی و تمدهی رو میده، بستهٔ Astro که یک بلوک آناتومی دوستونی با توضیحات Markdown در سمت سرور میسازه، و افزونهٔ Storybook که یک پنل «Anatomy» همگام با بوم استوری اضافه میکنه.
نکات کلیدی:
- مستندسازی زنده: هاور روی مستندات و کامپوننت بهصورت دوطرفه همگام میشه
- علامتگذاری با یک ویژگی و کشف خودکار بخشها بر پایهٔ شناسهها
- رانتایم بدون وابستگی، حدود ۴ کیلوبایت و مستقل از فریمورک
- اورلیها DOM واقعی رو دنبال میکنن؛ اسکرول و ریسایز و تغییر داینامیک مشکلی نداره
- چهار پریست، متغیرهای CSS و هوکهای رندر برای تمدهی
- بستههای جداگانه برای core و Astro و Storybook
