Seeking guidance on skipping specific nodes when diffing and applying diffs

[panphora]

I am working on a project where I use diffDOM to update the DOM based on state changes. I have encountered a situation where oldDom and newDom can have completely different sets of initial child nodes, and I need to selectively ignore diffs for a variable number of these initial children when creating and applying diffs.

My main challenge is that the number of children to be ignored is not constant and cannot be determined upfront. This variability makes it difficult to use a static filtering approach.

Here is an example scenario:

• oldDom has a list of child nodes, some of which have been dynamically added or removed when the next state is generated
• newDom reflects another state of the same page, with its own set of potentially new child nodes that should be compared to oldDom
• I need to compare oldDom and newDom and generate diffs for all nodes except the initial children that differ in a way that's unpredictable

I'm seeking advice or a possible feature that could assist in the following:

1. Ignoring diffs generated for a subset of child nodes without a pre-known fixed index (the child nodes to be skipped have specific classes)
2. Applying diffs to oldDom while skipping over the aforementioned nodes to reflect changes in newDom correctly (the child nodes to be skipped have specific classes)

Could you please provide some guidance or recommend an approach to achieve this with diffDOM? Any help or pointers towards relevant parts of the documentation would be greatly appreciated.

Thank you for your time and for maintaining this useful library.

[johanneswilm]

Hey,
do you only need to ignore certain children? So not grandchildren, etc.?

What comes to mind is an approach like this:

1. Create copies of oldDom and newDom with those children that should be ignored replaced with custom nodes that differ. For example, in oldDomCopy you can use replacemenets <oldDom1></oldDom1>, <oldDom2></oldDom2>, etc. and in newDomCopy you can replace them with <newDom1></newDom1>, etc. .
2. You then diff between OldDomCopy and newDomCopy.
3. The resulting diffs should contain everything you need. In order to apply to either oldDom or newDom, you will need to go through the diffs one by one, checking in each case if first number in the diff's route links to one of the children that should have been ignored. If no, simply apply the diff. If yes, ignore the diff, but adjust the first number in the diff of all subsequent diffs.

It's rather complex. If at all possible, I'd try to avoid this scenario. For example by putting extra controls in the shadow dom, make dropdown menus, etc. render somewhere entirely differently in the dom and put them where I want using CSS for positioning, etc. .

[johanneswilm]

Here is one way of doing it https://github.com/fiduswriter/diffDOM/tree/hide-children