Alpine v3 component getting initialised twice on Phoenix LiveView page

[reliablendn]

Hello folks,

It seems I have encountered a weird issue when doing live_redirect to a LiveView page which has AlpineJS V3 component.

Environment:

AlpineJS 3.2.4
Phoenix 1.5.9
LiveView 0.15.7

Here is the trimmed down version of the component which is able to reproduce the behavior. The server counter is a simple socket assign.

<div id="unique_id" x-data="() => {console.log('x-data called'); return {clientCount:0, serverCount:0}}" x-init="console.log('x-init called'); serverCount=<%= @count %>" >
  <div>
    Client Count: <span x-text="clientCount"></span>
  </div>
  <div>
    Server Count via alpine: <span x-text="serverCount"></span>
  </div>
  <div>
    Server Count: <span><%= @count %></span>
  </div>
  <a @click="clientCount=clientCount+1">Client Increment</a>
  <a phx-click="clicked">Server increment</a>
</div>

Expected Behavior: x-data and x-init expressions to be called only once as nothing is changing in component when coming directly to the page or via live_redirect. This indeed happens (as shown in the following screenshot) when coming to the page directly but not when coming to the page via live_redirect.

Whats happening: Both x-data and x-init are getting called twice when coming to the page via live_redirect which in turn is creating 2 data proxies in component. I am able to see these 2 proxies by doing this:

let liveSocket = new LiveSocket("/live", Socket, {dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        console.log({clone: "Before", from, dataStack: from._x_dataStack, x: from.__x, to});
        window.Alpine.clone(from, to);
        console.log({clone: "After", from, dataStack: from._x_dataStack, x: from.__x, to});
      }
    }
  },params: {_csrf_token: csrfToken}})

This issue is stopping me from upgrading from v2 to v3. Am I missing something here or could it be a bug? Will really appreciate any help with this. Thanks

[dkln]

Unfortunately, I have the same issue. Getting dupes when LV gets an update. Tried this with Alpine 3.5.

[ftes]

Same here. I found this discussion after opening a liveview bug.
phoenixframework/phoenix_live_view#1751

[ftes]

Does this workaround help you?
I haven't investiaged it much yet

x-init="$root.setAttribute('x-ignore', 'true')"

[reliablendn]

This workaround does seem to work but I think this will cause different issues if the container needs to be updated by LV, as in phx-update is not ignore. In this case LV will update the elements but alpine will ignore it. I have not tried it though.

[SimoTod]

It should be fixed by #2376

[fceruti]

I tried the following code with both your pr and v3.5.1, and some issues still persist. I created a 20 sec movie screen recording that shows several things going wrong.

defmodule LiveViewAlpine do
  use Phoenix.LiveView

  @impl true
  def mount(_params, _, socket) do
    {:ok, assign(socket, :count, 0)}
  end

  @impl true
  def handle_event("inc_count", _, socket) do
    {:noreply, assign(socket, :count, socket.assigns.count + 1)}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div x-data={"{clientCount: 0, serverCount: #{@count}}"} >
      <div>Client Count: <span x-text="clientCount"></span></div>
      <div>Server Count via alpine: <span x-text="serverCount"></span></div>
      <div>Server Count: <span><%= @count %></span></div>
      <button @click="clientCount=clientCount+1">Client Increment</button>
      <button phx-click="inc_count">Server increment</button>
    </div>
    """
  end
end

alpine.issue.mov

edit:

Versions
Alpine: 3.5.1 & pr 2376
phoenix: 1.6.2
phoenix_live_view: 0.17.5

[SimoTod]

Thanks, I'm not a RoR user so unfortunately I can't help much with the code. The PR will just fix the mutation observer bug which would cause components to be initialised twice (as per discussion title). If you want to dynamically update x-data and have it reflected in real time, it's likely to need a new PR or maybe specific hooks (I know livewire uses Alpine.clone under the wood). It's probably better to open a different discussion once the other fix has been merged.

[SimoTod]

Unless i misunderstood the video

[dkln]

Maybe related: but I've noticed that Alpine doesn't "see" a x-data attribute when LiveView replaces some of the attributes of an already existing element.

For instance, you have this HTML output before LV sends an update:

<div class="inline-field" phx-click="edit">

And gets replaced by:

<div class="textfield" phx-click-outside="cancel" x-data="someComponent()">

Anybody also noticed this?