aymanosman

aymanosman

Allow forwarding slots without warning

See this GitHub issue Passing a slot via attributes emits a warning (but still works) · Issue #3399 · phoenixframework/phoenix_live_view · GitHub.

Currently, it is possible to pass along a slot argument to another component, but not without the compiler emitting a warning.

The warning looks like this:

     warning: undefined attribute "loading" for component Phoenix.Component.async_result/1
     │
 133 │       I am a wrapper <.async_result assign={@assign} loading={@loading} inner_block={@inner_block} />

And here is an example of code that will induce the warning.

attr :assign, :any
slot :loading
slot :inner_block
def wrap_async_result(assigns) do
  ~H"""
  <div>
    I am a wrapper <.async_result assign={@assign} loading={@loading} inner_block={@inner_block} />
  </div>
  """
end
<.wrap_async_result assign={AsyncResult.loading()}>
  <:loading>Loading...</:loading>
  Finished
</.wrap_async_result>

Assuming attributes and slots will always share the same “namespace” (so there could not be an attribute and slot with the same name defined on a component), it seems useful to be able to pass a slot via attributes.

Are there any downsides I’m not considering?

First Post!

LostKobrakai

LostKobrakai

The coupling. This might not matter much for like inner_block, but all other slots can have their own set of attributes, which can be validated by the compiler, be documented and so on. All that doesn’t really work well if you can pass those slots to further components as is. Conceptually a slots really belongs to the component it’s rendered within, not some child component of it.

Instead the wrapper can explicitly render slots for the subcomponent based on it’s own slots.

~H"""
  <div>
    I am a wrapper <.async_result assign={@assign} loading={@loading}><%= render_slot(@inner_block) %></.async_result>
  </div>
  """

Last Post!

aymanosman

aymanosman

Your example should be…

~H"""
<div>
  I am a wrapper
  <.async_result assign={@assign}>
    <:loading><%= render_slot(@loading) %></:loading>
    <%= render_slot(@inner_block) %>
  </.async_result>
</div>
"""

…since @loading is also a slot.

I agree that coupling is something to consider when components call other
components. But consider a function calling another function and passing through
arguments — this also introduces coupling, yet it’s natural in many cases.

As for checking and validation not working well, that seems more like a current
limitation of the compiler rather than an inherent conceptual issue with slots
being passed along. I was hoping to open up a discussion about the development
complexity this might introduce and weigh that against the potential benefits.

On the conceptual side, saying that slots belong strictly to the component
they’re rendered within feels a bit rigid to me. It’s similar to saying that
arguments strictly belong to a function and shouldn’t be passed to others.

Where Next?

Popular in Proposals: Ideas Top

hst337
Elixir compiler and language specification Purpose of the proposal Elixir language is in mature state and no breaking or heavy changes ar...
New
PJUllrich
Hey folks, I have the unique problem that I need to ignore all “change” and “input” events for one specific input element in a LiveView F...
New
superchris
Hello! After seeing a couple of posts from Chris and Jose about supporting web components in LiveView, I thought it would be great to ini...
New
pejrich
I propose adding compact_map/2 to the Enum module. What is it? Sometimes you want to map over a collection, but sometimes you want to ma...
New
byhemechi
Many web frameworks (e.g. Remix, Gatsby) have an option for their link components that begins the navigation request on hover so that whe...
New
GregPhx
Greetings Everyone!!! A little bit of my background so it could be easier to understand where my comments are coming from, and to take t...
New
aglassman
Problem The cancel_async function is easily overlooked. Since the results of “outdated” tasks are ignored, it’s easy for developers to a...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 131117 1222
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 55125 245
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
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 31586 112
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New

We're in Beta

About us Mission Statement