Show HN: I made a better DOM morphing algorithm
15 days ago
- #JavaScript
- #Web Development
- #DOM
- DOM morphing helps maintain state when updating HTML dynamically by comparing and morphing the original DOM to match new HTML.
- Common issues with traditional DOM updates include loss of focus, scroll positions, event listeners, and CSS animations.
- Existing DOM morphing libraries include Morphdom (Phoenix Live View), Alpine Morph (Livewire), and Idiomorph (HTMX, Turbo).
- Morphlex 1.0 introduces a new approach to DOM morphing, focusing on solving the node identity problem.
- Node identity is determined using id attributes, child node ids, and other attributes to uniquely identify nodes.
- Morphlex improves upon common scenarios like inserting, removing, and sorting items by using a matching algorithm.
- The algorithm matches nodes by exact equality, id, id set, tag name, and specific attributes before falling back to tag name alone.
- Morphlex uses moveBefore or insertAfter to maintain state during reordering, leveraging the longest increasing subsequence for optimal sorting.
- Special handling for form inputs ensures user-modified values are preserved, with a configuration option (preserveChanges) available.
- Performance is optimized to do less work in real-world scenarios, making it fast and efficient for whole document morphs.
- Morphlex is released under an MIT license and encourages feedback for bug fixes.