tmjoen

tmjoen

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 :slight_smile:

(thanks to lostkobrakai and jonr for the idea!)

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
apz
I’m new to elixir and just tried to install the elixirLS extension for VScode(ium) and it is throwing some errors that I would like help ...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews