search

bigskysoftware / idiomorph

A DOM-merging algorithm
BSD 2-Clause "Simplified" License
631 stars 31 forks source link

ignore element and children in morph #50

Open daaku opened 2 months ago

daaku commented 2 months ago

I'm using this successfully for an improved experience with various input fields in forms (via htmx). Part of my replace target though includes large number of elements, which I know in advance can be ignored. As far as I can tell there isn't a way to indicate that an element and it's children should be ignored by the morphing algorithm to improve the performance is there?

The UX pattern here is fairly simple - a search results page with a form of inputs to control the search, and a large table/list of results. The form of inputs needs to be replaced in order to reflect the updated hidden fields etc that are related to the visible input elements. So the hx-swap targets the element containing the form as well as the results.

domingo2000 commented 1 month ago

Hi!, Im having the same issue. I need a callback like onBeforeElChildrenUpdated in morphodom to tell the morphing algorithm to swap the node for the new node instead of just morphing. My issue here is that i have components that need to be deleted/added to the DOM to work (works with node change, but not on morph when updating attributes), and i want to recursively pick wich childrens are going to be morphed and which don't.

It would be nice to give some callbacks that fine-tune the algorithm for diferent cases, im thinking like a visitor patern when walking through an AST in static syntax analysis. The DOM is an tree with it's children and to make ideomorph more flexible is useful to have access to the desicions of the algorithm in all the tree, not just the node beign morphed. ¿What do you think about it? ¿How does performance get affected if it is needed to call this callback?

mtomov commented 2 weeks ago

@domingo2000 I've got the same need to replace an element instead of merging the attributes. This is for a custom element - <turbo-cable-stream-source> which needs to run a connectedCallback(). If only the name attribute changes, then the connectedCallback would not run.

See https://github.com/hotwired/turbo/blob/main/src/elements/stream_source_element.js#L6-L10