Emulating "send()" and "handle_info" with live components

I have a page with a large state that is loaded from DB, let’s call that “data”.

I have a root live view that load “data” on mount and render different live components (one component per tab).

This is to allow switching tab without hitting the DB.

Now, my issue was that each component is really isolated for the state (like selection), and I wanted to be able to do something like send(self(), {:select_part, part}) and do the handle_info in the component rendering the current tab, and now the “root live view”.

I found a neat solution I want to share as it might be a common issue.

In the deep down component, instead of doing send() do send_update(DrawTabComponent, id: "draw_tab", action: {:select_part, part}).

Then in the DrawTabComponent implement update like:

  @impl true
  def update(%{action: {:select_part, part}}, socket) do
    {:ok, assign(socket, selected_part: part)}
  end

  @impl true
  def update(regular_assigns, socket) do
    {:ok, assign(socket, regular_assigns)}
  end

This allow for the same organization/code split as nested live view. Each update(%{action implementation is similar to a handle_info, without overriding the regular update, thus allowing a similar decoupling as live view mount/handle_params and handle_info