Live_helpers function usage in liveview app "live_beats" by chrismccord

Question

There is a function sidebar_account_dropdown/1 in lib/live_beats_web/views/layout_view.ex

def sidebar_account_dropdown(assigns) do
    ~H"""
    <.dropdown id={@id}>
      <:img src={@current_user.avatar_url}/>
      <:title><%= @current_user.name %></:title>
      <:subtitle>@<%= @current_user.username %></:subtitle>

      <:link navigate={profile_path(@current_user)}>View Profile</:link>
      <:link navigate={Routes.settings_path(Endpoint, :edit)}>Settings</:link>
      <:link href={Routes.o_auth_callback_path(Endpoint, :sign_out)} method={:delete}>Sign out</:link>
    </.dropdown>
    """
end

And in its template part dropdown function from lib/live_beats_web/live/live_helpers.ex

def dropdown(assigns) do
    assigns =
      assigns
      |> assign_new(:img, fn -> nil end)
      |> assign_new(:title, fn -> nil end)
      |> assign_new(:subtitle, fn -> nil end)

    ~H"""
    <!-- User account dropdown -->
    <div class="px-3 mt-6 relative inline-block text-left">

just not to elongate things I cutted the long dropdown function dropdown/1

I would like to know how the html tags are replaced with atoms. Is it used as a means for assigning value to the :img, :title, :subtitle, etc that exist in our assigns as nil or something. I would love to understand this clearly

Answer 1

Phoenix Liveview defines its own engine for sigil_H/1.

The engine has its own tokenizer which understands <. opening, treats is as a slot and processes further.