Nested LiveComponents: how to send message to "parent" via "top"?

I am experimenting with nested LiveComponents inside a LiveView.
My basic idea is to have a LiveView that contains:

  • header: navigation LiveComponent
  • main: “current” LiveComponent depending on assigns.live_action

Now I have a stateful “current” LiveComponent that contains multiple stateful child LiveComponents.
Each child LiveComponent implements one of multiple steps and knows when it’s “done”.
When a step is completed I would like to notify the parent (the stateful “current” LiveComponent).
Messages to self() are (of course) not received by parent but rather by “top” (the LiveView).

How can I have the LiveView (“top”) pass down messages to the “current” LiveComponent (parent) without having to tightly couple the LiveView to it’s child LiveComponents?

2 Likes

:wave:

Maybe it would be easier to render multiple live views? And instead of routing the messages via the liveview, you’d be simply sending them to the parent live view?

For example, check out how menu works in https://github.com/phoenixframework/phoenix_live_dashboard.

It’s rendered as a child of each live view in the layout: https://github.com/phoenixframework/phoenix_live_dashboard/blob/master/lib/phoenix/live_dashboard/templates/layout/live.html.leex#L7-L8, which allows it to control the parent liveview by sending it messages like :refresh.

I am doing a lot of stuff in mount/3 resulting in a state that contains :loading, :complete or one of various errors.
Having all of this stuff inside mount/3 feels like a clean solution with a clear “outer” state for the entire interface.
When mount/3 says :complete all basic stuff is in place to start using the application and the LiveView only knows about basic stuff.
Only when it turns out to be extremely messy to have child-grandchild communication would I consider multiple LiveViews only to implement navigation.
Maybe I am overlooking something here.

@i-n-g-m-a-r if you have the parent live view pass down its id to the child, the child can include that id in the message sent to self, and then the top live view can route the message to the correct live view via https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#send_update/2

4 Likes

That’s interesting, thanks @benwilson512! will check that out.
I had just prepared an update, will post it anyway.

By the way, I am also integrating (matching) the layout and navigation of my LiveView with my regular views.
Same final structure, navigation contains both live patches and regular links:

<!-- app.html.eex -->
<div>
  <div>
    <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
    <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
    <div>
      <header>
        <%= render "static_nav.html", nav: get_nav(@conn) %>
      </header>
      <%= @inner_content %>
    </div>
  </div>
</div>

<!-- live.html.leex -->
<div>
  <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info"><%= live_flash(@flash, :info) %></p>
  <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error"><%= live_flash(@flash, :error) %></p>
  <%= @inner_content %>
</div>

Anyway, the following seems to be working:

# liveview module
def mount(%{} = request_params, %{} = session, socket) do
  ...
  assigns = [
    ...
    component_message: %{},
    component_module: MyLiveComponent,
    component_id: :live_component_id,
    ...
  ]
  {:ok, assign(socket, assigns)}
  ...
end

# liveview template
<%= live_component @socket, @component_module, id: @component_id, msg: @component_message %>

# grandchild component
send self(), {:pass_down, %{setting: :updated_setting}}

# liveview module
def handle_info({:pass_down, %{} = payload}, socket) do
  {:noreply, assign(socket, component_message: payload)}
end

# child component
def update(%{msg: msg} = _assigns, socket) do
  # read msg, do stuff
  send self(), {:pass_down, %{}}
  {:ok, socket}
end

So it turns out to be very easy, tnx @benwilson512.

defmodule MyChildComponent do
  use Phoenix.LiveComponent

  defstruct [my_setting: :default]

  def update(%{my_setting: setting}, socket) when setting in [:default, :x, :y] do
    {:ok, put_in(socket.assigns.state.my_setting, setting)}
  end

  def update(_assigns, socket) do
    assigns = [
      state: %__MODULE__{}
    ]
    {:ok, assign(socket, assigns)}
  end
end
defmodule MyGrandChildComponent do
  use Phoenix.LiveComponent

  def handle_event("set", %{"value" => value}, socket) do
    send_update(MyChildComponent, [
      id: :child,
      my_setting: String.to_existing_atom(value)
    ])
    {:noreply, socket}
  end
end

This is roughly what I had in mind, but you’re hard coding the id, which you probably don’t want to do if there are potentially N of these.

I actually totally forgot that you could just call send_update from within the child component to the parent component though, so great idea there.

You are right, id should not be hard coded, tnx!
This will work slightly better :innocent: by the way.

def update(%{my_setting: setting}, socket) when setting in [:default, :x, :y] do
  {:ok, assign(socket, state: %{socket.assigns.state | my_setting: setting})}
end

From what I have learned by working with Phoenix LiveView by now is that you do not want deeply nested live-views. One Route LiveView to take care of params, two more layers is ok, but it becomes extremely hard to follow if there are more layers.

I think I have still not 100% figured out what components are supposed to be used with, but I can tell you that usually nesting components is a problem.
We are using components to preload more efficiently, and to take care of events, but every parent using the component has to subscribe to a higher level event… Lets just say, we have not figured it out yet.

If you have a lot of LVs, let them communicate via Phoenix Pub. Elixir is extremely good in handling different processes, as long as they communicate with each other - I actually started always returning {:noreply, socket} in handle_event/2 and let my handle_info/2 handle it, as long as I know that there is an event triggered. And LiveView diff has become so good and fast… Honestly, I have no idea how they do it, but you can literally just send thousands of updates in 5 seconds, and your user does not even see anything.

Let me know what your current set-up looks like, LiveView is still a very new technology, and I want to hear other people’s thoughts on how to do it!

1 Like

We nest stateless components quite deeply and it works just fine, they’re basically just partials.

We are definitely still sorting out exactly how we want to do nested stateful partials, and how deep is too deep with that.

What is the difference to partials then?
Not trying to be obnoxious, but I was really struggling to understand how to use components until I used preload/1 the first time. If you have nested components, you have to handle everything in the parent, unless you want to risk other components falling out of sync, right?
EDIT: Sorry… That’s why stateless components? Are you only using them for their preloading power? Otherwise I am lost.

Yes, same here. I think it really helps to remember that components are in the same process. Nested components are communicating with a parent (always the parent liveview), so at what point should all the components have their own liveview?
Component events in our current model usually trigger a global event, which the parent should subscribe to anyways, and not change their own state at all, because the parent will take care.

I don’t know how you guys are using LV and components, but I would like to learn!

1 Like

How do you deal with possible component id duplicates?

Like in our case, you have an order with order items, order items would show up in waiting for shipment and ready to ship but with different conditionals, in the same liveview.