Rendering dynamic component about surface HOT 4 CLOSED

Hi @andreasknoepfle!

Is there some way of rendering a component dynamically?

Not yet, but this is definitely on the roadmap and there's no way we'll ship the first version without it.

The plan is to have a built-in <Dynamic> component that can handle those cases. Something that you could use like this:

def render(assigns) do
  props = %{label: "Ok", class: "button"}
  component = Button

  ~H""" 
  <Dynamic component={{ component }} props={{ props }}/>
  """
end

A first naive implementation that would probably work for the most simple cases (like stateless components without nested children) would look like:

  defmodule Dynamic do
    use Surface.Component

    property component, :module, required: true
    property props, :map, default: %{}

    def render(assigns) do
      props =
        assigns
        |> Map.get(:props)
        |> Map.merge(%{__surface__: %{groups: %{__default__: %{binding: false, size: 0}}}}) # Don't worry about this for now :)

      ~H"""
      {{ live_component(@socket, @component, props) }}
      """
    end
  end

I'm currently working on the new event API due to some breaking changes in LiveView so, unfortunately, I wasn't able to validate the above solution but feel free to give it a try if you want and let me know if it works :)

Cheers.

from surface.

Implemented in #473.

from surface.

Hi @msaraiva 👋

Your proposed solution works like a charm 💚.
Thank you very much! I am already excited and looking forward for a first release of surface 💯

Cheers

from surface.

Did anything come of this? The above Dynamic solution doesn't seem to work with default props.

from surface.