‏htmx 4.0 اومد: خداحافظ ارث‌بری خودکار

تیم htmx نسخهٔ 4.0.0 رو بعد از هشت ماه کار منتشر کرد. مهم‌ترین تغییر داخلی اینه که کتابخونه از XMLHttpRequest رفته روی fetch()، که برای بیشتر کاربرها نامرئیه ولی راه رو برای استریم HTML باز کرده. نویسنده می‌گه نسخهٔ ۴ رو تو npm با تگ next منتشر کردن و latest تا اوایل ۲۰۲۷ همون ۲.x می‌مونه، تا کسی که از CDN بدون شماره نسخه استفاده می‌کنه به‌زور آپدیت نشه.

بزرگ‌ترین بار مهاجرت روی ارث‌بری صفت‌هاست. تو htmx 2 خیلی از صفت‌ها خودبه‌خود به فرزندها می‌رسیدن، شبیه CSS، و نویسنده می‌گه نتیجه‌ش هم شبیه CSS شد: قدرتمند ولی گاهی سخت‌فهم. تو htmx 4 هیچ صفتی ارث نمی‌رسه مگه اینکه با پسوند :inherited صریح علامتش بزنی.

<!-- htmx 2 -->
<div hx-confirm="Are you sure?">
  <button hx-delete="/item/1">Delete</button>
</div>
<!-- htmx 4 -->
<div hx-confirm:inherited="Are you sure?">
  <button hx-delete="/item/1">Delete</button>
</div>

در عوض صفت‌هایی مثل hx-disinherit دیگه لازم نیستن و باید حذف بشن. اسم رویدادها هم مرتب شدن و همه از الگوی htmx:phase:action پیروی می‌کنن، پس htmx:beforeRequest شده htmx:before:request و htmx:afterSwap شده htmx:after:swap. بیشتر رویدادهای خطا تو htmx:error جمع شدن، رویدادهای htmx:xhr:* حذف شدن و اعتبارسنجی فرم به خود مرورگر سپرده شده. تاریخچه هم دیگه تو localStorage کش نمی‌شه؛ موقع برگشت، htmx صفحه رو دوباره می‌گیره و داخل body سوارش می‌کنه.

دو قابلیت تازه هم اضافه شده. اولی swap مورفینگ (یعنی به‌جای دور انداختن کل بخش، فقط تفاوت‌ها روی DOM اعمال می‌شن) که بر پایهٔ idiomorph ساخته شده و حالا بدون افزونه داخل خود htmx هست. دومی تگ hx-partial که کارش شبیه out-of-band swap هست، ولی وقتی می‌خوای چند بخش مختلف صفحه رو با هدف و حالت متفاوت به‌روز کنی خیلی خواناتره.

<hx-partial hx-target="#messages" hx-swap="beforeend">
  <div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
  <span>5</span>
</hx-partial>

رفتن روی fetch() باعث شد افزونه‌ها هم بازنویسی و زیاد بشن: hx-preload برای پیش‌بارگذاری، hx-download برای دانلود فایل، و hx-sse، hx-ws و hx-multipart برای استریم HTML. hx-live هم یه راه‌حل سبک اسکریپت‌نویسی الهام‌گرفته از Alpine.js و jQuery هست. برای مهاجرت یه ابزار خط فرمان با دستور npx htmx.org@4.0.0 upgrade-check هست که جاهای نیازمند :inherited و اسم رویدادهای قدیمی رو پیدا می‌کنه. نویسنده می‌گه htmx 2 هم بدون محدودیت زمانی پشتیبانی می‌شه، پس عجله‌ای برای آپدیت نیست.

نکات کلیدی:

• ارث‌بری صفت‌ها پیش‌فرض نیست؛ باید با پسوند :inherited اعلام بشه و hx-disinherit حذف شده.
• اسم رویدادها به الگوی htmx:phase:action رسیدن؛ htmx:beforeRequest شده htmx:before:request.
• تاریخچه دیگه تو localStorage کش نمی‌شه؛ افزونهٔ hx-history-cache این کارو با sessionStorage می‌کنه.
• swap مورفینگ بر پایهٔ idiomorph داخل htmx اومده و تگ hx-partial جای out-of-band swap رو می‌گیره.
• نسخهٔ ۴ تو npm با تگ next منتشر شده و latest تا اوایل ۲۰۲۷ روی ۲.x می‌مونه.