phoenix_live_view icon indicating copy to clipboard operation
phoenix_live_view copied to clipboard

Assign updates do not propagate to stream children

Open Munksgaard opened this issue 1 year ago • 3 comments

Environment

  • Elixir version (elixir -v): 1.16.1

Actual behavior

I have a stream with elements that have children with conditional rendering. The when changing the assigns those conditionals depend on, the elements are not updated as expected.

Here's a simplified version of the code producing the undesired behavior:

    <div phx-update="stream" id="items">
    <div :for={{dom_id, item} <- @streams.items} id={dom_id}>Item: <span :if={@show}><%= inspect(item) %></span></div>
    </div>

When changing the value of show, I would expect the stream items to also change.

Here is a complete example that can be run with elixir stream_bug.exs:

Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7"},
  # please test your issue using the latest version of LV from GitHub!
  {:phoenix_live_view,
   github: "phoenixframework/phoenix_live_view", branch: "main", override: true}
])

# build the LiveView JavaScript assets (this needs mix and npm available in your path!)
path = Phoenix.LiveView.__info__(:compile)[:source] |> Path.dirname() |> Path.join("../")
System.cmd("mix", ["deps.get"], cd: path, into: IO.binstream())
System.cmd("npm", ["install"], cd: Path.join(path, "./assets"), into: IO.binstream())
System.cmd("mix", ["assets.build"], cd: path, into: IO.binstream())

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  def mount(_params, _session, socket) do
    items = [%{id: 1}, %{id: 2}, %{id: 3}]

    {:ok,
     socket
     |> assign(show: true)
     |> assign(items: items)
     |> stream(:items, items)}
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="/assets/phoenix/phoenix.js"></script>
    <script src="/assets/phoenix_live_view/phoenix_live_view.js"></script>
    <%!-- uncomment to use enable tailwind --%>
    <%!-- <script src="https://cdn.tailwindcss.com"></script> --%>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  def render(assigns) do
    ~H"""
    Without stream:
    <div>
    <div :for={item <- @items}>Item: <span :if={@show}><%= inspect(item) %></span></div>
    </div>
    With stream:
    <div phx-update="stream" id="items">
    <div :for={{dom_id, item} <- @streams.items} id={dom_id}>Item: <span :if={@show}><%= inspect(item) %></span></div>
    </div>
    <button phx-click="toggle">show</button>
    """
  end

  def handle_event("toggle", _params, socket) do
    {:noreply, update(socket, :show, &not/1)}
  end
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)

  plug(Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix")
  plug(Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view")

  plug(Example.Router)
end

{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)

I would expect the two lists of elements to behave the same

Munksgaard avatar Mar 15 '24 09:03 Munksgaard

It should be noted that I'm unsure if this is intended behavior. If so, I couldn't find it documented anywhere, so that might be worth considering :-)

Munksgaard avatar Mar 15 '24 09:03 Munksgaard

It is expected behaviour. The streams are not kept in memory, so if you want them re-rendered at any time, they need to be readded. We can probably talk more about it in the docs if we don't yet!

josevalim avatar Mar 15 '24 09:03 josevalim

Thanks for explaining, I kind of expected that :slightly_smiling_face:

My understanding of how the change-tracking in LiveView works is not 100% yet, but it's getting better every time I run into one of these issues, so thanks for your patience!

Munksgaard avatar Mar 15 '24 10:03 Munksgaard