AlpineJS "loses" reactivity when rendered using <.live_component> Liveview >0.17

Phoenix Forum Questions / Help
, ,
1

I have AlpineJS (v3) wired into a phoenix app. It has been working great so far.

I recently started using Liveview in my app, and noticed that any x-show attribute is not reacting to state changes based on the component’s data.

I have a calendar component I am trying to render from an events_live component, like so <.live_component module={MyAppWeb.EventLive.CalendarComponent} />. There is a dropdown menu that is suppose to toggle based on an open data attribute, very basic alpine stuff. It does not work when rendered this way. However, if I inline all the template code directly into the calling template, the drop down menu toggles as expected.

It’s worth noting everything else regarding alpine outside of my live view’s is working as intended as well. I only have encountered this issue from within a live view, using the component rendering syntax.

My app.js has the expected

  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        Alpine.clone(from, to);
      }
    },

code in it as well, with Alpine.start() being called before liveSocket.connect()

As an update, I tried to recreate the issue in a scratch phoenix app (1.6.11, and liveview 0.17, using a newly generated live view with the generator mix phx.gen.live), unfortunately, everything worked as expected there, so I am now aware there must be some user error somewhere. I am hoping someone can offer some insight into where these things can go wrong.

1 Like
2

I ran into something similar and the suggested updates to app.js outlined in the linked post fixed it. Note that window.Alpine.initTree(node) is added to both onNodeAdded and onBeforeElUpdated callbacks.

3

The problem with Alpine.initTree(node) is that the current state is lost and everything is reinitialized (x-init…).

I outlined the correct solution here:

2 Likes
4

Thanks for the detailed writeup! :+1:t3: