Combine surface and phoenix templates

Phoenix Forum Questions / Help
, ,
1

Hi,

Has anyone had experience with the https://github.com/msaraiva/surface library. Is there a way to use the surface syntax in a file, in a way that it also updates the surface component data passed as props.

So for example

defmodule MyWeb.ViewWithSidebar do
  use MyWeb, live_view

  def render(assigns) do
    Phoenix.View.render(MyWeb.View, "show.html", assigns)
  end

  def mount(_, _, socket) do
    {:ok,
     assign(socket, %{
       items: [],
       class: "inintial"
     })}
  end

  def handle_info(topic, socket) do
    assigns = %{
      class: "updated",
      items: [%{name: "name"}]
    }

    {:noreply, assign(socket, assigns)}
  end
end

# component
defmodule MyWeb.Components.SideBar do
  use Surface.Component

  def render(assigns) do
    ~H"""
    <div class="item" :for={{ item <- @items }}>
      {{ item.name }}
    </div>
    """
  end
end


#show.html
<%= ~H(
    <MyWeb.Components.SideBar items={{ @items }}> #doesnt get updated.
) %>
<div class="<%= @class %>"><div> #gets updated to "updated"
2

Creating a new surface component and wrapping it around live_component works.

2 Likes
3

Hi @ets :wave: Can you post an example of this for posterity?