Let's Make the Worst Htmx
6 hours ago
- The article describes building a minimal clone of HTMX in about 40 lines of JavaScript, replicating core features like declarative AJAX requests, DOM swapping, and event triggers.
- The clone uses attributes like x-get, x-post, x-target, and x-swap to define HTTP method, trigger event, target element, and swap mode, with a scan function to bind events.
- Enhancements include custom trigger syntax with modifiers (delay, once, changed), advanced target resolution (closest, next, find), and support for HTMX-like server responses (HX-Trigger, HX-Redirect).
- The library emits custom events (x:beforeSend, x:afterSend, x:beforeSwap, x:afterSwap) to allow plugin integration, enabling features like confirmation dialogs, indicators, form boosting, and history updates without core changes.
- The final implementation focuses on a simple 'SSS' (scan, send, swap) architecture, with plugins for additional functionality like x-boost, x-confirm, x-indicator, and more, keeping the core small and maintainable.