I was noticing when moving my app from Surface to LiveView 0.17 that it is a little harder to quickly scan the element tree when glancing at the source code when using <.live_component> mixed in with function components.

For instance:

<.fieldset heading="Project">
  <.live_component module={Input.RichText} form={@form} field={:title} id={"#{field.id}-title"} />
  <Input.slug form={@form} field={:slug} from={:title} />
  <.live_component module={Input.Image} id={"#{field.id}-image"} form={@form} field={:slug} />
  <Input.text form={@form} field={:meta_title} />
  <Input.text_area form={@form} field={:meta_description} />
  <!-- etc etc -->
<./fieldset>

I forked phoenix_live_view and added a little helper to the use Phoenix.LiveComponent logic

def live_component(assigns) do
  assigns
  |> assign(:module, __MODULE__)
  |> Phoenix.LiveView.Helpers.live_component()
end

So now my code can look like this:

<.fieldset heading="Project">
  <Input.RichText.live_component form={@form} field={:title} id={"#{field.id}-title"} />
  <Input.slug form={@form} field={:slug} from={:title} />
  <Input.Image.live_component id={"#{field.id}-image"} form={@form} field={:slug} />
  <Input.text form={@form} field={:meta_title} />
  <Input.text_area form={@form} field={:meta_description} />
  <!-- etc etc -->
<./fieldset>

Much easier to scan imo.

I have a PR ready if the Phoenix Live View team thinks this is worth having

(thanks to lostkobrakai and jonr for the idea!)