‏کلون htmx در ۴۰ خط جاوااسکریپت

زرگه سری پست‌هاش دربارهٔ ساختن کلون‌های کوچیک از فریم‌ورک‌های محبوب رو ادامه داده و این‌بار نوبت htmx شده — کتابخونه‌ای که به گفتهٔ نویسنده برای توسعه‌دهنده‌های بک‌اندیه که اصلاً حوصلهٔ جاوااسکریپت ندارن. htmx با چند تا اتریبیوت اعلانی مثل hx-post و hx-trigger و hx-target و hx-swap می‌گه با چه رویدادی چه درخواستی بره و پاسخش کجا بشینه، و رویداد و درخواست AJAX و به‌روزرسانی DOM رو پشت همین اتریبیوت‌ها قایم می‌کنه.

نویسنده می‌گه اگه دقیق نگاه کنی کل ماجرا همینه: با یه تریگر یه URL رو fetch کن و محتوای المان هدف رو عوض کن. همین رو می‌شه تو ده خط نوشت:

document.querySelectorAll('[x-get]').forEach(el => {
  el.addEventListener('click', async (e) => {
    e.preventDefault();
    const url = el.getAttribute('x-get');
    const response = await fetch(url);
    el.outerHTML = await response.text();
  });
});

اگه بک‌اند در جواب یه تیکه متن بفرسته، دکمه ناپدید می‌شه و متن جاش می‌شینه — به قول خودش، htmx در ده خط.

بعد سه تا کمبود رو پر می‌کنه: پاسخ باید درست به‌عنوان HTML پردازش بشه، و کاربر باید بتونه المان هدف (x-target) و شیوهٔ جاگذاری (x-swap) رو مشخص کنه. یه جدول SWAP با حالت‌هایی مثل outerHTML، beforebegin، afterend، delete و none می‌سازه، محتوا رو داخل یه template پارس می‌کنه و تابع send() همه‌چی رو کنار هم می‌ذاره. مثل خود htmx یه هدر سفارشی هم همراه درخواست به بک‌اند فرستاده می‌شه.

یه اسکنر ساده روی همهٔ اتریبیوت‌های x-get تا x-delete می‌چرخه، تریگر پیش‌فرض رو از روی نوع المان حدس می‌زنه (submit برای فرم، change برای ورودی‌ها، وگرنه click) و لیسنر رو وصل می‌کنه. با همین، تو حدود ۴۰ خط یه کلون کارکنندهٔ htmx داری که همهٔ متدهای HTTP و هدف‌ها و حالت‌های سواپ رو پشتیبانی می‌کنه. برای این‌که بعد از هر سواپ کل DOM دوباره اسکن نشه، از MutationObserver استفاده می‌کنه تا فقط محتوای تازه‌اضافه‌شده اسکن بشه.

از این‌جا به بعد بحث پرداختِ جزئیاته. یه پارسر کوچیک برای تریگرهای ترکیبی مثل load, click once, change changed delay:500، یه تابع resolve برای هدف‌های نسبی مثل closest .container یا next که به گفتهٔ نویسنده تقریباً همون کاریه که خود htmx می‌کنه، و چهار رویداد beforeRequest و afterRequest و beforeSwap و afterSwap که با preventDefault() قابل لغو هستن. هدرهای سمت سرور هم پشتیبانی می‌شن تا سرور بتونه رویداد بفرسته یا مرورگر رو به آدرس دیگه‌ای ببره.

نکات کلیدی:

• هستهٔ htmx یعنی چهار چیز: متد، تریگر، تارگت و شیوهٔ سواپ
• یه کلون کارراه‌انداز تو حدود ۴۰ خط جاوااسکریپت خالص جا می‌شه
• MutationObserver جای اسکن دوبارهٔ کل DOM بعد از هر سواپ رو می‌گیره
• تریگرهای ترکیبی با مودیفایرهایی مثل once و changed و delay
• هدف‌های نسبی مثل closest و next و find، شبیه رویکرد خود htmx
• رویدادهای قابل لغو و هدرهای سمت سرور برای کنترل جریان از بک‌اند