Liveview and onBeforeElUpdated

Any luck on #2 yet? I have this exact issue.

I didn’t have any luck with #2, but I ended up settling on #3, and with some experimentation got it to work.

It’s really very simple, the onBeforeElUpdated callback gives you the option to hook into the step when Liveview asks morphdom to update a specific DOM node with some change.

At the onBeforeElUpdated point, morphdom has two versions of the DOM node it is working with: the “to” version (what the node should become) and the “from” version (what the node is at the moment).

If, for example, you want to preserve all the styles in the classList that are there before Liveview wants to push its update, simply set the to.classList to the state of from.classList, like this:

...
dom: {
    onBeforeElUpdated(from, to){
      to.classList = from.classList
    }
  },
...

Important note: It seems like you need to add a unique ID to the node whose classList (or other property) you want to preserve with the above.

The above, is, of course, just a simplification, as you probably want to have some logic to have this happen only on nodes that meet certain criteria. Examples might be only those nodes whose styling is impacted by your local JS helper library, etc.

By the way, playing with this helped me understand how Liveview works much better, and gave me an appreciation for the awesome library that morphdom is

You can, for example, see morphdom walking the DOM live, by doing something like this (note that the console.logs slow the process down quite a bit):

...
dom: {
    onBeforeElUpdated(from, to){
      console.log("****************")
      console.log("from state:")
      console.log(from)
      console.log("to state:")
      console.log(to)
    }
  },
...

Hope this helps!

Edit: On further thought, it might be that my problem with #2 was that I didn’t use an ID on the node. It might simply work if you give the node a unique ID…

So, would classList be the id of the HTML element that contains the classes that you would like to preserve?

image351×158 3.82 KB

Note that doing

onBeforeElUpdated(from, to){
  to.classList = from.classList
}

would copy the classlist of every patched element over. That might be not what you want since it might revert class changes made via liveview. You’d probably restrict the copying to certain elements only:

onBeforeElUpdated(from, to){
  if (from.classList.contains("before-update-copy-class")) {
    to.classList = from.classList
  }
}

I’ve also settled on that approach in a similar problem Liveview with Muuri grid (would phx-update="stop-ignore" make sense?).