‏مورفینگ داخل هستهٔ htmx ۴

مستندات htmx توضیح می‌دن که DOM Morphing (یعنی به جای دور ریختن محتوای قدیمی، همون المان‌های موجود رو ویرایش کنی تا شکل محتوای جدید رو بگیرن) چه فرقی با سوآپ معمولی داره. وقتی یه گره عوض نشده، هویتش حفظ می‌شه؛ پس فوکوس اینپوت، انتخاب متن، جای اسکرول و حتی پخش ویدیو وسط کار قطع نمی‌شه. برای توسعه‌دهنده هم هر state ای که یه اسکریپت یا web component روی المان گذاشته سر جاش می‌مونه.

الگوریتم idiomorph رو خود سازنده‌های htmx نوشتن و تو نسخهٔ ۲ به شکل یه افزونه پیشنهاد می‌شد. تو htmx ۴ این الگوریتم داخل هسته اومده، پس فقط کافیه سبک سوآپ رو مشخص کنی:

<div id="status" hx-get="/status" hx-trigger="every 5s" hx-swap="innerMorph">
  <h2>Build: passing</h2>
  <input name="note" placeholder="Add a note">
</div>

دوتا سبک داری: innerMorph بچه‌های تارگت رو مورف می‌کنه و خود تارگت دست‌نخورده می‌مونه، outerMorph هم خود المان و بچه‌هاش رو با هم. این دوتا دقیقاً معادل innerHTML و outerHTML هستن. idiomorph اول نقشه‌ای از همهٔ idهای مشترک بین محتوای قدیم و جدید می‌سازه و بعد سعی می‌کنه با کمترین جابه‌جایی، قدیمی رو به شکل جدید دربیاره. یعنی برای پایداری، روی المان‌های مهم id بذار.

بعضی وقت‌ها هم اصلاً نمی‌خوای یه المان مورف بشه، مثلاً یه ویجت شخص ثالث یا یه چارت. برای این کار hx-morph-skip کل المان رو فریز می‌کنه و hx-morph-skip-children فقط attributeها رو مورف می‌کنه و بچه‌ها رو ول می‌کنه. اگه بخوای این رفتار سراسری باشه، htmx.config.morphSkip و htmx.config.morphSkipChildren رو با سلکتور خودت پر کن.

یه نکتهٔ ریز ولی مهم دربارهٔ فرم‌ها هست: مورف سوآپ خودکار مقدار اینپوتی که همون لحظه فوکوس داره رو نگه می‌داره، حتی اگه سرور چیز دیگه‌ای برگردونه. پس یه پاسخ دیرهنگام روی چیزی که کاربر داره تایپ می‌کنه نمی‌شینه. برای اینپوت‌های بدون فوکوس هم htmx مقدار کاربر رو نگه می‌داره مگر اینکه خود attribute مقدار value عوض شده باشه، که این با رفتار پیش‌فرض idiomorph فرق داره.

نکات کلیدی:

• تو htmx ۴ الگوریتم idiomorph داخل هسته‌ست و افزونهٔ جدا لازم نداره
• دو سبک سوآپ innerMorph (فقط بچه‌ها) و outerMorph (خود المان و بچه‌ها)
• پایداری المان‌ها به id وابسته‌ست؛ idiomorph اول روی idهای مشترک نقشه می‌سازه
• hx-morph-skip المان رو فریز می‌کنه، hx-morph-skip-children فقط بچه‌ها رو ول می‌کنه
• morphScanLimit پیش‌فرض 10 هست و morphIgnore پیش‌فرض ["data-htmx-powered"]