Store Not Maintaining State Between LiveView Updates #1736

lukashambsch · 2021-07-02T13:03:34Z

lukashambsch
Jul 2, 2021

Discussed in #1647

^{Originally posted by lukashambsch June 26, 2021}

Versions

Phoenix - 1.5.9
LiveView - 0.15.4
AlpineJS - 3.1.1

Background

I'm using Phoenix LiveView with some Alpine sprinkled in when necessary. I'm not sure if this is an issue with Alpine, an issue with LiveView, a combination of the two, or user error (most likely). One place I'm using Alpine is to allow the user to toggle the left nav. I'm using a basic store to make managing the state easier across components and managing the styling with tailwind classes.

Problem

Everything works great until I assign to the socket. When I do that, the store seems to lose its state and reverts to the default classes. After I assign to the socket, I'm still able to toggle the nav again. It almost seems as if the state is momentarily lost in between live view updates. ~~The state seems to be maintained in the nav component, but not elsewhere.~~ The state seems to be maintained correctly when in live view components, instead of the layouts, unless it's within the @inner_content from the live layout template.

What I've Tried so Far

I tried the following and had the same problem:

Moving the state out of the store and back into x-data.
Rolling back to V2 of Alpine.
Removing another x-data declaration inside the nav.
Moving everything into components, where the state seemed to be tracked correctly, and out of the live layout. This worked for the TopBar component, but not for the LayoutWrapper component. It now seems like the state is maintained correctly except when it's within live view's @inner_content block.

Code

Setting up Alpine with LiveView

let liveSocket = new LiveSocket(
  "/live",
  Socket,
  {
    params: {_csrf_token: csrfToken},
    dom: {
      onBeforeElUpdated(from, to){
        if(from._x_dataStack){ window.Alpine.clone(from, to); }
      }
    },
    hooks
  }
);

Starting Alpine

import Alpine from "alpinejs";

import registerStores from "./stores";

export const startAlpine = () => {
  window.Alpine = Alpine;

  registerStores();

  Alpine.start();
};

Registering the store

import Alpine from "alpinejs";

import nav from "./nav";

export default () => {
  Alpine.store("nav", nav);
};

Nav Store

export default {
  isExpanded: true,
  toggle() { this.isExpanded = !this.isExpanded; },
  collapse() { this.isExpanded = false; },
  expand() { this.isExpanded = true; }
};

Body component in root liveview layout

<body class="font-sans" x-data>
  <%= @inner_content %>
</body>

Base LiveView Layout

<%= live_component(@socket, TrackBoostWeb.Components.Nav, id: "left-nav") %>

<%= live_component(@socket, TrackBoostWeb.Components.TopBar, id: "top-bar") %>


<%= live_component(@socket, TrackBoostWeb.Components.LayoutWrapper, id: "layout-wrapper") do %>
  <%= @inner_content %>
<% end %>

Nav Component

<div
      class="hidden md:block fixed left-0 h-screen w-52 bg-gray-900 transition-width duration-300"
      x-bind:class="{ 'w-52': $store.nav.isExpanded, 'w-12': !$store.nav.isExpanded }"
    >
      <div class="h-16 bg-gray-900 flex justify-center items-center">
        <div x-show="$store.nav.isExpanded" x-transition>
          <LivePatch to={{ Routes.live_path(@socket, DashboardLive) }}>
            <img
              src={{ Routes.static_path(@socket, "/images/logo-light.png") }}
              alt="TrackBoost Logo"
              class="w-36"
            >
          </LivePatch>
        </div>

        <div
          class="text-white cursor-pointer"
          x-bind:class="{ 'ml-3 mt-1': $store.nav.isExpanded }"
          x-on:click="$store.nav.toggle()"
          @collapse-nav.document="$store.nav.collapse()"
        >
          <i
            class="fas text-gray-400 hover:text-white"
            x-bind:class="{
              'fa-chevron-right': !$store.nav.isExpanded, 'fa-chevron-left': $store.nav.isExpanded
            }"
          />
        </div>
      </div>

      <div class="flex flex-col mt-8">
        <NavLink
          icon_class="flaticon3-dashboard"
          label="Dashboard"
          to={{ Routes.live_path(@socket, DashboardLive) }}
        />
        <NavLink
          icon_class="flaticon3-list"
          label="Orders"
          to={{ Routes.live_path(@socket, OrdersLive) }}
        />
        <NavLink
          icon_class="flaticon-multiple-files"
          label="Tracking Page"
          to={{ Routes.live_path(@socket, TrackingPageListLive) }}
        />
        <NavLink
          icon_class="flaticon-speaker"
          label="Notifications"
          to={{ Routes.live_path(@socket, NotificationsLive) }}
        />
        <NavLink
          icon_class="flaticon3-shuffle"
          label="Cross-Sell"
          to={{ Routes.live_path(@socket, CrossSellLive) }}
        />
        <NavLink
          icon_class="flaticon3-settings"
          label="Subscription"
          to={{ Routes.live_path(@socket, SubscriptionLive) }}
        />
        <NavLink
          icon_class="flaticon3-settings"
          label="Integrations"
          to={{ Routes.live_path(@socket, IntegrationsLive) }}
        />
      </div>
    </div>

Layout Wrapper Component

defmodule TrackBoostWeb.Components.LayoutWrapper do
  use TrackBoostWeb, :live_component

  def render(assigns) do
    ~L"""
    <div
      class="md:ml-52 transition-margin duration-300"
      x-bind:class="{ 'md:ml-52': $store.nav.isExpanded, 'md:ml-12': !$store.nav.isExpanded }"
    >
      <%= render_block(@inner_block) %>
    </div>
    """
  end
end
```</div>

joshuataylor · 2021-07-04T13:02:07Z

joshuataylor
Jul 4, 2021

Crosspost from that thread:

I can't get this to work via AlpineJS v3 either, I was using 2 for a while with Spruce before upgrading to 3 today, and removing Spruce (as it's now in 3).

I took the steps from: https://alpinejs.dev/advanced/extending#via-npm

I've got an example repo here: https://github.com/joshuataylor/alpinejs3liveview

Steps:

git clone https://github.com/joshuataylor/alpinejs3liveview
cd alpinejs3liveview
mix deps.get
cd assets
npm install # i just used npm here without scss or any friends, i usually use yarn, same story with yarn
cd ..
mix phx.server

Me refreshing the page to show the example:
https://user-images.githubusercontent.com/225131/124386041-e5380f80-dd0a-11eb-9e50-f7b3be58c87a.mp4

0 replies

darrenjacoby · 2021-07-06T13:09:48Z

darrenjacoby
Jul 6, 2021

It's also not working for me.

Tried a basic example from the docs;

<button
  x-data
  @click="$store.darkMode = !$store.darkMode;">
  update $store
</button>

<div
  x-data
  :class="{ 'not-working' : $store.darkMode === true }">
  not updating class when $store is changed
</div>

<script>
Alpine.start();

document.addEventListener('alpine:init', () => {
    Alpine.store('darkMode', true);
}
</script>

0 replies

joshuataylor · 2021-07-06T13:13:05Z

joshuataylor
Jul 6, 2021

Can you try doing this in your JS:
phoenixframework/phoenix_live_view#1512 (comment)

And seeing if it works for you?

0 replies

darrenjacoby · 2021-07-06T13:37:22Z

darrenjacoby
Jul 6, 2021

Sorry, I got mine fixed. Had to run Alpine.start(); after adding

document.addEventListener('alpine:init', () => { Alpine.store('darkMode', true); });

0 replies

lukashambsch · 2021-07-07T12:35:11Z

lukashambsch
Jul 7, 2021
Author

Can you try doing this in your JS:
phoenixframework/phoenix_live_view#1512 (comment)

And seeing if it works for you?

I already have that in my JS.

0 replies

lukashambsch · 2021-07-09T21:34:30Z

lukashambsch
Jul 9, 2021
Author

@calebporzio Was this moved to a discussion because it was confirmed to not be a bug in Alpine?

0 replies

ConradSulzer · 2021-09-22T15:45:19Z

ConradSulzer
Sep 22, 2021

@lukashambsch did you ever figure this out? I think I am having this same issue in my liveview:

Everything works great until I assign to the socket. When I do that, the store seems to lose its state and reverts to the default classes

After this happens if I go to the console and enter Alpine.start() the state seemingly comes back so it definitely feels like I am losing Alpine. Curious to know if and how you resolved this.

1 reply

lukashambsch Oct 2, 2021
Author

@ConradSulzer No, unfortunately I had to move on without the functionality this was failing on. I can't tell for sure, but as far as I can tell, it does seem to be an issue on the Alpine side. It's disappointing that issues are being discarded into discussions without any response from the maintainers.

chainix · 2021-11-09T13:57:22Z

chainix
Nov 9, 2021

I have the same issue and cannot figure it out ! my store loses state when Liveview rerender the template on form validation. I will post if I can find any solution. I noticed on my console this error
module.esm.js?dd52:2181 Uncaught (in promise) TypeError: i is not a function at eval (module.esm.js?dd52:2181) eval @ module.esm.js?dd52:2181 Promise.catch (async) eval @ module.esm.js?dd52:2186

1 reply

danddanddand Nov 9, 2021

See #2342 or #2318.

Basically you have to set language target higher in your build. Use es2017 or higher. If that isn't it, please create a new discussion with more detail.

Uh oh!

Store Not Maintaining State Between LiveView Updates #1736

Uh oh!

Discussed in #1647

Versions

Background

Problem

What I've Tried so Far

Code

Replies: 8 comments · 2 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lukashambsch Jul 7, 2021 Author

Uh oh!

lukashambsch Jul 9, 2021 Author

Uh oh!

Uh oh!

lukashambsch Oct 2, 2021 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 8 comments 2 replies

lukashambsch
Jul 7, 2021
Author

lukashambsch
Jul 9, 2021
Author

lukashambsch Oct 2, 2021
Author