Recursive surface component?

Hi @derek-zhou!

Currently, Surface does not allow using a component recursively. However, you can work around this issue by moving the recursion to a separate function. For instance:

defmodule Tree do
  ...
    
  @doc "The root node"
  prop node, :map
  
  def render(assigns) do
    ~H"""
    {{ render_node(@node) }}
    """
  end

  defp render_node(node) do
    ~H"""
    <div>
      {{ node.name }}
      <div :for={{ child <- node.children }}>
        {{ render_node(child) }}
      </div>
    </div>
    """
  end
end

Thanks. I will try this and the other venue I am trying, which is to use a MacroComponent that hide the recursion inside.

@msaraiva 's example can be simplified to:

defmodule Tree do
  ...
    
  @doc "The root node"
  prop node, :map
  
  def render(assigns) do
    ~H"""
    <div>
      {{ @node.name }}
      <div :for={{ child <- @node.children }}>
        {{ render(%{node: child}) }}
      </div>
    </div>
    """
  end
end

Although the component cannot be recursively defined, the render/1 method can call itself recursively, with a made up assigns. This method works as long as the component has no state; because state-less component is basically just a render/1 function with maybe some pure function helpers.

I don’t know how to achieve the equivalent of recursive stateful component though. I don’t have a usage case so far.

Note: If you are going to call render/1 manually with a made up assigns like above, it is best to pass in @socket too, like {{ render(%{socket: @socket, node: child}) }} The reason is components pass @socket implicitly, and many things need @socket; so without the @socket in the assigns it can be very confusing.