morphdom

https://github.com/patrick-steele-idem/morphdom/issues/261 This issue is reporting the same kind of thing - text selection is lost on re-render

All of what I'm talking about is doable through libraries today (or you can write it yourself). But making things available through DOM APIs create a new baseline where the very same tools are made available for anyone, no matter the framework (think: document.querySelector APIs). Regarding patch, morphdom explains very well the difference between replacing and patching the DOM [1]: > Replacing an entire DOM tree is fast but loses internal state (e.g., scroll positions, input carets, CSS transitions). Instead, we aim to transform the existing DOM tree to match the new one, minimizing changes and preserving state. Also, there's the matter of performance. Diffing and patching as a single method call implemented natively should be a lot faster than using a bunch of JS code. --- 1: https://github.com/patrick-steele-idem/morphdom

Phoenix LiveView uses JS because the core of the tech requires the server to compute diffs & the client to patch the DOM accordingly. This is why a JS package is needed alongside the other default package from Phoenix, which brings Phoenix Sockets & Channels capability (which builds on top of transports such as Websocket). Previously have seen: https://github.com/patrick-steele-idem/morphdom Can check: https://www.npmjs.com/package/phoenix_live_view

hello HN I have been working on a new DOM-morphing algorithm for htmx. It is based on the standard morphdom algorithm[1], but uses ID sets to offer better DOM stability with fewer explicit IDs. There is a demo gif near the bottom that shows how idiomorph can keep the DOM stable in places that morphdom cannot. The algorithm is still extremely new, so I'm sure there are plenty of bugs and corner cases, but I thought people outside of the htmx world might be interested in the project. [1] - https://github.com/patrick-steele-idem/morphdom

in one word: morphdom (https://github.com/patrick-steele-idem/morphdom) also, StimulusReflex predates Hotwire for 1 year and is already pretty hardened :-)

You may be looking for morphdom, which is a very lightweight version of what you want, but of course browser support for this would be nice. https://github.com/patrick-steele-idem/morphdom

Here are some measurements of vdom vs plain ol DOM manipulation - https://github.com/patrick-steele-idem/morphdom#benchmarks

> Would you prefer "The virtual DOM helps make React work a lot faster than doing direct manipulation of the DOM using vanilla Javascript"? I am not sure this is even correct. Firstly, the famous js framework benchmarks (https://github.com/krausest/js-framework-benchmark) based on adding/removing list items used to have vanilla JS as an unbeatable winner, despite its direct manipulation of the DOM, and React was definitely significantly behind. Secondly, as the README for morphdom says, the real DOM is very fast (https://github.com/patrick-steele-idem/morphdom). If I remember correctly, virtual DOM was supposed to solve the particular performance problem where you would otherwise just throw huge chunks of DOM away rerendering them anew every time your app state changed. But this is a very special (although brilliant) approach to keeping y

I recently did a project with morphdom (https://github.com/patrick-steele-idem/morphdom) using only ES6 template strings and a render loop that checked for changes to a global state object and patched a re-computed DOM string using morphdom. Couldn’t have been an easier and more pleasurable experience.

By the way, for the most minimal diffing implementation see https://github.com/patrick-steele-idem/morphdom.

I'll leave this module here for those of you how haven't heard of it. https://github.com/patrick-steele-idem/morphdom It diff's the DOM instead of a VDOM

Author of morphdom here. I don't necessarily disagree with anything you said. However, morphdom was designed to be fast enough in situations where you can't or don't want to introduce a virtual DOM. What matters more than a micro benchmark is the performance in a real application and paired with a real UI framework. Would I use morphdom in situations that required rerendering 1000 nodes every 10ms? Probably not. However, it will perform very well in almost most of the typical use cases. There was a lengthy discussion on performance in the following Github issue where I go into more detail on my thoughts: https://github.com/patrick-steele-idem/morphdom/issues/2 > virtual-DOM is fairly mature at this point where as MorphDOM looks very young. morphdom is small and focused (about 220 lines of code). It either works or it doesn't and I have a