کتابخانه
@lit/reactive-element یه کلاس پایه سبک برای ساخت وب کامپوننت هاست که از پروژه Lit میاد. خاصیت های واکنشی، به روزرسانی ناهمزمان و چرخه عمر کامپوننت رو مدیریت می کنه، ولی خودش قالب نویسی و رندر نداره. اگه می خوای کامپوننت سفارشی بدون فریم ورک سنگین بسازی، پایه خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز BSD-3-Clause؛ هش هر فایل با منبع بررسی شده است.
۱۹۱ کیلوبایت · ۶۰ فایل · انتشار
دانلود هفتگی جهانی
۸٫۵ میلیون
هفته ۲۵ مهر تا ۱ آبان۳٫۳٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 76e9815ec67d16684bff1444224bf62532d6318dbd8f25e7c1e9546158b1335f
@lit/reactive-element هسته اصلی خانواده Lit هست. وب کامپوننت یعنی یه تگ HTML سفارشی که خودت تعریفش می کنی، مثلاً کارت محصول یا دکمه ثبت نظر، و هر جای صفحه مثل یه تگ معمولی می تونی ازش استفاده کنی. این بسته یه کلاس پایه بهت می ده که ساخت این تگ ها رو راحت و تمیز می کنه، بدون اینکه یه فریم ورک کامل وارد پروژه بشه.
کار اصلی این کلاس مدیریت وضعیت کامپوننته. تو مشخص می کنی کدوم خاصیت ها واکنشی باشن و هر وقت یکی از اونها عوض شد، کامپوننت خودش یه به روزرسانی رو زمان بندی می کنه. تغییرهای پشت سر هم هم جمع می شن و یه بار اعمال می شن، پس نگران رندر اضافه نیستی. هماهنگی بین attribute و property، چرخه عمر، استایل با css و Shadow DOM هم با همین کلاس کار می کنن. برای جدا کردن منطق قابل استفاده مجدد، مفهوم reactive controller رو داره و دکوریتورها هم جداگانه در دسترسن.
یه نکته مهم موقع انتخاب: این بسته قالب نویسی و رندر HTML رو خودش انجام نمی ده. اگه می خوای با قالب های تگ دار (template) و اتصال داده راحت کار کنی، سراغ خود Lit برو. اون روی همین کلاس ساخته شده و رندر رو هم اضافه می کنه. @lit/reactive-element وقتی به درد می خوره که کنترل کامل می خوای، حجم نهایی باید خیلی کم بمونه، یا می خوای موتور رندر خودت رو بذاری. اگه فقط یه اسلایدر یا منوی ساده روی قالب وردپرس می خوای، این انتخاب سنگینیه و یه افزونه آماده بهتره.
یه نکته برای سایت های فارسی: استایل های سراسری صفحه داخل Shadow DOM نمی رسن، ولی ویژگی های ارثی مثل direction و font-family از بیرون رد می شن. پس اگه فونت و راست به چپ بودن رو روی صفحه درست تنظیم کرده باشی، معمولاً داخل کامپوننت هم درست دیده می شن. بقیه استایل ها رو باید خودت داخل کامپوننت بنویسی.
یه مشکل عملی هم برای سایت های ایرانی هست: وقتی اینترنت بین الملل مشکل داره، لود کردن کتابخانه از CDN های خارجی ممکنه کار نکنه. بهتره فایل رو روی هاست خودت بذاری. نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست و می تونی از همین جا برداری.
این بسته یه ماژول ES هست. پس یا باید کدش رو با type=module توی صفحه لود کنی، یا با یه باندلر مثل Vite یا esbuild توی فایل خودت بسته بندی کنی. ساده ترین مسیر برای شروع اینه:
توی وردپرس فایل رو با wp_enqueue_script اضافه کن و حتماً type=module رو بهش بده، مثلاً با فیلتر script_loader_tag. اگه نسخه وردپرست API مخصوص ماژول های جاوااسکریپت رو داره، می تونی از اون استفاده کنی. حواست باشه افزونه های بهینه ساز کش و مینیفای فایل رو خراب نکنن. بعد از هر تغییر کش رو پاک کن و توی کنسول مرورگر ببین خطای import نداری.
@lit/reactive-element کلاس پایه ای برای ساخت وب کامپوننته که خاصیت های واکنشی و به روزرسانی ناهمزمان رو مدیریت می کنه، ولی رندر نداره. Lit همین کلاس رو می گیره و موتور قالب نویسی رو بهش اضافه می کنه. اگه قالب HTML راحت می خوای، Lit بهتره. اگه فقط یه پایه سبک می خوای، همین بسته کافیه.
همیشه لازم نیست. چون بسته ماژول ES هست، مرورگرهای جدید می تونن مستقیم لودش کنن. فقط مرورگر آدرس هایی که مسیر کامل ندارن رو خودش پیدا نمی کنه و باید با import map درستشون کنی. برای پروژه جدی، باندلر ساده تره و خروجی کوچیک تری می ده. برای یه تست سریع، import map کافیه.
بله، چون وب کامپوننت ها استاندارد مرورگرن و به وردپرس وابسته نیستن. فایل رو روی هاست بذار، با نوع ماژول به صفحه اضافه کن و تگ کامپوننتت رو توی محتوا یا قالب بنویس. فقط مراقب افزونه هایی باش که جاوااسکریپت رو ادغام یا مینیفای می کنن، چون گاهی ماژول ها رو خراب می کنن.
ویژگی های ارثی مثل font-family و direction از صفحه به داخل Shadow DOM می رسن. پس اگه روی صفحه تنظیم شده باشن، معمولاً داخل کامپوننت هم اعمال می شن. ولی استایل های سراسری دیگه نمی رسن و باید داخل خود کامپوننت با css تعریفشون کنی. همیشه توی مرورگر امتحانش کن.
این بسته با مجوز BSD-3-Clause منتشر شده که یه مجوز آزاد و سهل گیرانه حساب می شه و معمولاً استفاده تجاری رو اجازه می ده. شرطش اینه که اعلان کپی رایت و متن مجوز رو موقع بازتوزیع نگه داری. برای پروژه تجاری، متن کامل مجوز رو یه بار بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.