tmjoen

tmjoen

A small QoL improvement for live components?

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?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New

Other popular topics Top

New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54921 245
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 31494 112
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement