silverdr

silverdr

Overriding @inner_block for LiveView component(s)

I’d like to have a generic, abstract (I apologise for the OO terminology :wink: component, which takes care of all the styling and can be rendered by calling its function from specific “subclass instances” providing some additional bits like title, size and the actual content. This seem to work well until I want to change the default @inner_block. It seems to have some structure:

inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<1.68901124/2 in PhxAppWeb.PageLive.render/1>
    }
  ]

which makes it hardly override-able… or? Is there a way to keep the “default slot” being default but overriding its content when needed rather than using some conditionals?

I understand I can rewrite things and work this around but would like to know that I have to :wink:

Docs are here: Phoenix.Component — Phoenix LiveView v1.2.5

First 10 of 20 Posts Switch mode

cpgo

cpgo

Also interested in this.

I’m playing around with a similar idea on a attempt to make it easier to use HotwireTurbo on phoenix.

For now I have the following hack to reuse a generic component. Not really sure yet what parameters the inner_block function expects so I’m just ignoring them for now.

  def render_inline_stream(conn, action, target, rendered_template \\ nil) do
    rendered =
      TurboStreamComponent.stream_tag(%{
        action: action,
        target: target,
        inner_block: %{inner_block: fn _, _ -> rendered_template end}
      })
      |> Phoenix.HTML.Safe.to_iodata()
      |> IO.iodata_to_binary()

    conn
    |> put_resp_content_type("text/vnd.turbo-stream.html")
    |> text(rendered)
  end

The idea here is just to wrap an existing template on a <turbo-stream></turbo-stream> tag

LostKobrakai

LostKobrakai

Can you describe this with a few examples? It’s not really clear why you’d need to alter inner_block?

silverdr

silverdr OP

Ane example - let’s say I pass default content inside a component. Something like

<.button>
  This renders <strong>inside</strong> the button!
</.button>

The above taken from the docs mentioned above. And in the majority of cases it is OK. F. e.

<.queue_widget>
  The queue is empty - nothing to see here
</.queue_widget>

But on some rare occasions there is something in the queue and needs to be put out. One of the ways to do it would be to override the default content provided in @inner_block (there is no pubsub involved and the widget does not update itself on change). I understand it is not the only way to do it but would like to know if this is at all feasible.

LostKobrakai

LostKobrakai

What’s wrong with this as the template for <.queue_widget>?

<%= if @queue_size > 0 do %>
  …
<% else %>
  <%= render_slot(@inner_block) %>
<% end %>
silverdr

silverdr OP

The template is currently common for all widgets and is located in the “abstract” one. Specific widgets provide their name, size and default content, which I’d like to override on occasions but want to keep the abstract widget generic so that it doesn’t have to “know” what it is rendering. I can do generic “assign” and use that. That’s what I am now doing but I feel like running in circles around the original idea of just assigning stuff to @inner_block

LostKobrakai

LostKobrakai

I think I still don’t know exactly what you’re attempting here. If your abstract components is meant to be abstract, then it shouldn’t be involved in markup at all. It feels a bit strange to try to abstract on one hand and on the other still try to break out of the abstraction.

silverdr

silverdr OP

Hmm.. The abstraction means that all things common go there - widget has a bounding box, header, title, some styling, etc. Specific widgets provide values for the variable parameters. At least that’s how I used to do those things. Here I have a function called widget/1 and specific ones like queue_widget/1 which assigns its title, size etc. calling the “abstract” widget/1 in the end for rendering the actual output

LostKobrakai

LostKobrakai

That sounds like slots and overwriting default slot markup would be the solution, but hard so say without code.

silverdr

silverdr OP

defp widget(assigns) do
		widget_size_class = case assigns[:size] do
			:single -> "widget"
			:double -> "widget-double"
			_ -> "widget"
		end

		~H"""
		<div class={widget_size_class} data-widget-id={@widget_id}>
			<div class="titlebar">
				<div class="titlebar-close"></div>
				<div class="titlebar-title">
					<%= @widget_title %>
				</div>
			</div>
			<div class="widget-content">
				<%= render_slot(@inner_block) %>
			</div>
		</div>
		"""
	end

	def queue_widget(assigns) do
		assigns = assigns
		|> assign(:widget_title, gettext("Queue"))
		|> assign(:widget_id, "queue")

		widget(assigns)
	end

That’s how I originally thought of doing it. And there should be part assigning the non-default content in queue_widget/1

LostKobrakai

LostKobrakai

My directly delegating to widget as a function I feel like you’re leaving options lying on the ground. <.queue_widget> and <.widget> can have different views on @inner_block.

def queue_widget(assigns) do
  assigns = 
    assigns
    |> assign(:widget_title, gettext("Queue"))
    |> assign(:widget_id, "queue")
    |> assign_new(:inner_block, fn -> [] end)

  ~H"""
  <.widget>
    <%= if Enum.empty?(@inner_block) do %> 
      …queue widget default
    <% else %>
      <%= render_slot(@inner_block) %>
    <% end %>
  </.widget>
  """
end

Where Next?

Trending in Questions Top

jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
silverdr
Using Phoenix.LiveView.TagEngine as an EEx.Engine is deprecated! To compile HEEx, use Phoenix.LiveView.TagEngine.compile/2 instead. Sta...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
michallepicki
I am using Oban and occasionally, shortly after a deployment, a handful of jobs can fail because of dependency on other parts of the syst...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

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
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New

We're in Beta

About us Mission Statement