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

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 GitHub - phoenixframework/phoenix_live_dashboard: Realtime dashboard with metrics, request logging, plus storage, OS and VM insights · GitHub.

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 Phoenix.LiveView — Phoenix LiveView v1.2.5

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 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!

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.