I have a LiveView where I want to render two different live components that each have their own representation of the same module. Think something like Elixir forum’s editor window: a panel with controls on the left, and the formatted output on the right. Both operate on the same content, but each render differently.

I thought about using protocols, something like

# Dashboard.ex
defmodule Dashboard do
  defprotocol Editor do
    def render(struct)
  end

  defimpl Editor, for: Avatar do
    use Phoenix.LiveComponent
    def render(struct) do
      ~H"""
      <div phx-target={@myself}>...</div>
      """
    end

    def handle_event("event", _, socket) do
       {:noreply, socket}
    end
  end

  defprotocol Preview do
    def render(struct)
  end

  defimpl Preview, for: Avatar do
    use Phoenix.LiveComponent
    def render(struct) do
      ~H"""
      <div phx-target={@myself}>...</div>
      """
    end

    def handle_event("event", _, socket) do
       {:noreply, socket}
    end
  end
end

# view.heex
<%= live_component Dashboard.Editor, @avatar %>
<%= live_component Dashboard.Preview, @avatar %>

Because live_component passes assigns as an enumerable, I’m not sure I can get the behaviour I want here. Does anyone have any suggestions? Should I just stick with pattern matching?