Liveview and onBeforeElUpdated

Phoenix Forum Questions / Help
,
1

Hello,

I like the idea of using a local js helper library like alpinejs when working with Liveview. I find it very useful for simple things like menu open/close where higher latency might be a tad too noticeable when solved in Liveview. What’s particularly nice is that I keep the ability to “liveview update” content inside an element opened via alpine.

Conveniently, support for libraries like alpinejs was added in Liveview a little while ago, documented here. To get to the relevant subsection, one needs to search for the paragraph that contains “onBeforeElUpdated”.

Unfortunately, there seems to be a security concern in alpine that makes me shy away from it at the moment. Hoping there will be a solution from the alpine team in the not too distant future, though :slight_smile:

In the meantime, my options seem to be:

  1. Use liveview JS hooks with phx-update=“ignore” for these situations. Works ok, but I lose the ability to “liveview update” content inside ignored elements.

  2. Use liveview JS hooks without phx-update=“ignore” but using the “updated” callback to rescue an open menu after a Liveview update closed it. Am in the process of experimenting with this, the “updated” callback is relatively easy to understand.

  3. Use the onBeforeElUpdated callback mentioned above like alpine does. Unfortunately, I can’t quite figure out how to use that, and was wondering if anybody might have an example? I’m looking at the morphdom docs at the moment, but it’s slow going…

Thank you!

1 Like
2

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

3

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 :slightly_smiling_face:

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…

4 Likes
4

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

image

5

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?).

1 Like