Overriding @inner_block for LiveView component(s)

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

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

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.

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

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

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

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.

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

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

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

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