دانلود lit-html و نشانی CDN ایرانی

اگه تا حالا یه بخش پویا توی صفحه ساخته باشی، احتمالاً با innerHTML و چسبوندن رشته ها به هم کار کردی. جواب می ده، ولی هر بار کل محتوا از نو ساخته می شه، فوکوس فیلدها می پره و نگه داشتن کدش هم کم کم سخت می شه. lit-html برای همین مشکل ساخته شده. قالبت رو با template literal می نویسی و کتابخونه یادش می مونه کدوم قسمت ها پویا هستن.

طرز کارش ساده است. قالب رو با تگ html می نویسی و مقدارهای پویا رو داخل ${} می ذاری. بعد تابع render قالب رو توی یه عنصر صفحه می کشه. اگه داده ها عوض بشن و دوباره render رو صدا بزنی، فقط همون مقدارهای تغییر کرده توی DOM به روز می شن و بقیه صفحه دست نمی خوره. Virtual DOM یا مرحله کامپایل خاصی لازم نیست. توی قالب برای رویدادها از @click، برای پراپرتی ها از .value و برای ویژگی های بولی از ?disabled استفاده می کنی. مقدارها هم پیش فرض به صورت متن وارد می شن، نه HTML خام. این از نظر امنیتی خیالت رو راحت تر می کنه، مگه اینکه خودت عمداً HTML خام وارد کنی.

این کتابخونه برای ویجت های تعاملی توی قالب یا افزونه وردپرسی، جدول ها و فهرست های زنده توی پنل مدیریت و فرم های چندمرحله ای کوچیک خوبه. در کل هر جایی که رابط پویا می خوای و نمی خوای یه فریم ورک کامل بیاری. اگه کامپوننت با چرخه عمر و استایل مخصوص خودش می خوای، بسته Lit که روی همین کتابخونه ساخته شده انتخاب بهتریه. ولی اگه مسیریابی، مدیریت state سراسری و ساختار کامل یه برنامه تک صفحه ای لازم داری، lit-html اینا رو بهت نمی ده و باید سراغ یه فریم ورک کامل بری.

کد به صورت ماژول ES نوشته شده، پس مرورگرهای خیلی قدیمی رو فراموش کن. اگه پروژه ابزار بیلد داره، از npm نصبش کن. اگه نداره، با import map یا یه فایل بسته بندی شده هم می شه کار کرد. یه نکته مهم هم برای سایت های ایرانی هست: لود کردن کتابخونه از CDN خارجی توی روزهای محدودیت اینترنت بین الملل ریسک داره، پس فایلش رو روی هاست خودت بذار. نسخه های رسمی و بدون تغییر lit-html توی مخزن داخلی ما هم در دسترسه.

راهنمای استفاده

کد آماده پایین همین صفحه رو ببین، ولی روند کلی اینه:

• فایل کتابخونه رو از همین صفحه دانلود کن و روی هاست خودت بذار، مثلاً کنار فایل های قالب.
• توی صفحه یه اسکریپت با type="module" بساز و html و render رو از فایل کتابخونه import کن.
• یه تابع بنویس که قالب رو با تگ html برگردونه و داده ها رو داخل ${} بذاره.
• یه عنصر خالی توی صفحه بذار، مثلاً یه div با id مشخص، و render رو با قالب و اون عنصر صدا بزن.
• هر وقت داده ها عوض شد، دوباره render رو با قالب جدید صدا بزن. فقط بخش های تغییر کرده به روز می شن.
• اگه پروژه ابزار بیلد داره، به جای دانلود دستی با npm اضافه اش کن و همین مراحل رو با import ادامه بده.

توی وردپرس، اسکریپتت رو با wp_enqueue_script ثبت کن، یا اگه نسخه وردپرست جدیده، از روش مخصوص ماژول ها استفاده کن. حواست باشه نوع اسکریپت module باشه، وگرنه import کار نمی کنه. اول روی یه صفحه آزمایشی امتحانش کن، بعد بذارش روی سایت اصلی. اگه چیزی لود نشد، کنسول مرورگر رو باز کن. بیشتر وقت ها مسیر فایل اشتباهه یا نوع اسکریپت module نیست.