SurfaceUI render separate template file

Hi, I am trying out SurfaceUI now. It is a fresh LiveView 0.16 project. Within my lib/live/page_live.ex, I have:

@impl true
def render(assigns) do
  Phoenix.View.render(PageView, "index.html", assigns)
end

where lib/templates/page/index.html.heex has this content:

<h1 class="text-red-500 text-3xl font-bold text-center">
  Welcome!
</h1>
<Hello />

I get this error when compiling:

** (MatchError) no match of right hand side value: {:tag_open, "Hello", [], %{column: 1, line: 4, self_close: true}}
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/html_engine.ex:483: Phoenix.LiveView.HTMLEngine.decompose_remote_component_tag!/3

Everything is OK if I use the F sigil inside page_live.ex:

@impl true
  def render(assigns) do
    ~F"""
    <h1 class="text-red-500 text-3xl font-bold text-center">
      Welcome!
    </h1>
    <Hello />
    """
  end

What is the best practice that you guys recommend me in this case?

Thanks a lot!

I think Phoenix.View.render doesn’t work with Surface.
I would just colocate the template file (move it to lib/live/page_live.sface) and remove render/1 from page_live.ex altogether (see Colocated Templates).

That works, although I guess I will have to familiarize myself with this new way of organizing code.

Thanks a lot!

1 Like