htmx 4.0
htmx 4.0 เป็นการยกเครื่องสถาปัตยกรรมภายในครั้งสำคัญ โดยเปลี่ยนแกนหลักจากการใช้ XMLHttpRequest (XHR) แบบเดิมมาเป็น Native fetch() API พร้อมปรับพฤติกรรมหลักเพื่อความเสถียรและความชัดเจนในการเขียนโค้ด
สรุปการเปลี่ยนแปลงหลักและ Breaking Changes ที่สำคัญ
การเปลี่ยนแปลงสถาปัตยกรรมหลัก (Major & Breaking Changes)
- เปลี่ยนไส้ในเป็น Native
fetch() API: เลิกใช้ XMLHttpRequest ทั้งหมด ทำให้ระบบรองรับ Stream และการจัดการ Request สมัยใหม่ได้อย่างเต็มประสิทธิภาพ
- Explicit Attribute Inheritance (ต้องระบุการสืบทอดชัดเจน)
- ปกติ htmx จะส่งต่อ attribute จาก element แม่ลงมายังลูกโดยอัตโนมัติ (Implicit)
- ใน htmx 4.0 จะไม่ inherit โดยอัตโนมัติอีกต่อไป หากต้องการให้ส่งต่อไปยังลูก ต้องใส่ตัวขยาย
:inherited เช่น
Plain Text
<!-- wp:syntaxhighlighter/code {"language":"bash"} -->
<pre class="wp-block-syntaxhighlighter-code">npx [email protected] upgrade-check -- ./path/to/project
สามารถใช้ :append เพื่อต่อเติมค่าเดิมได้ หรือหากต้องการพฤติกรรมเดิมทั้งหมด สามารถเปิด htmx.config.implicitInheritance = true
Error Response Swapping ตามค่าเริ่มต้น
- เดิม htmx จะไม่ swap เมื่อได้ HTTP Status 4xx หรือ 5xx
- htmx 4.0 จะทำการ swap ทุก response ที่มี HTML body เข้ามา (ยกเว้นรหัส
204 No Content และ 304 Not Modified)
- เพิ่ม attribute ใหม่
hx-status สำหรับแยกพฤติกรรมหรือ target ตาม HTTP Status Code ได้โดยตรง เช่น hx-status:422="target:#form-errors"
ยกเลิก History DOM Cache บน localStorage
- การกดปุ่ม Back/Forward จะใช้วิธี re-fetch หน้าจาก Server เพื่อ swap ลง body หรือ
[hx-history-elt] โดยตรง แทนการ snap DOM เก็บลง storage ซึ่งมักทำให้เกิดปัญหา state ค้าง
hx-delete ไม่ผูกข้อมูลฟอร์มอัตโนมัติ
- ทำงานเหมือน
hx-get แล้ว คือจะไม่แนบ input ใน form รอบๆ เข้าไปด้วย หากต้องการส่งค่าฟอร์มต้องระบุ hx-include="closest form" อย่างชัดเจน
ลำดับการ Swap ของ Out-of-Band (OOB)
- สลับลำดับเป็น Main content swap ก่อน แล้วจึงตามด้วย OOB swap
Default Request Timeout
- ตั้งค่า timeout เริ่มต้นไว้ที่ 60 วินาที (
defaultTimeout = 60000) จากเดิมที่ไม่จำกัดเวลา
ฟีเจอร์ใหม่ (New Features & Extensions)
- Built-in Morph Swapping: รวมอัลกอริทึม Idiomorph เข้ามาในตัวหลัก สามารถใช้สไตล์
innerMorph และ outerMorph ได้ทันทีโดยไม่ต้องโหลด extension เสริม
- New Swap Styles: เพิ่มสไตล์ใหม่ เช่น
textContent และ delete
- ระบบ Extensions และ Streaming HTML:
- ปรับวิธีโหลด extension ให้เรียบง่ายขึ้น ไม่ต้องใส่
hx-ext ใน HTML อีกต่อไป เพียง include ไฟล์ script เข้ามาก็พร้อมใช้งานทันที
- Extension สำหรับ HTML Streaming ยุคใหม่ เช่น
hx-sse (Server-Sent Events), hx-ws (WebSockets) และ hx-multipart (multipart/mixed)
- Extensions เพิ่มเติมอย่าง
hx-preload, hx-download (ดาวน์โหลดไฟล์ผ่าน fetch) และ hx-alpine-compat
การเปลี่ยนชื่อและตัดสิ่งที่ไม่จำเป็นออก (Renames & Removals)
- สลับชื่อ Attribute:
hx-disable เดิม ถูกเปลี่ยนชื่อเป็น hx-ignorehx-disabled-elt เดิม ถูกเปลี่ยนชื่อเป็น hx-disable
- Attribute ที่ถูกตัดออก:
hx-ext, hx-inherit, hx-disinherit, hx-history, hx-vars (ใช้ hx-vals="js:..." แทน), hx-prompt (ย้ายไปเป็น extension)
- ปรับมาตรฐานชื่อ Lifecycle Events:
- ปรับโครงสร้างชื่อ Event เป็นแบบ
htmx:phase:action เช่น htmx:configRequest เปลี่ยนเป็น htmx:config:request
- ยุบ Error event ย่อยๆ (
sendError, swapError, targetError, timeout) รวมเหลือเพียง htmx:error
- ลบ Event เฉพาะของ XHR ออกทั้งหมด (เช่น
htmx:xhr:progress)
หากต้องการตรวจสอบว่าโค้ดเดิมมีจุดที่ต้องปรับแก้ตรงไหนบ้าง สามารถรันตัวสแกนของทีมงานได้โดยตรงผ่านคำสั่ง
Plain Text