Phoenix LiveView with some JSX flavor

Today I learned from Vinny about this Elixir library called Surface that allows you to write LiveView components that look a lot like JSX from React.

You first create a module that uses Surface.Component and define some props:

defmodule MyApp.WelcomeMessage do
  use Surface.Component

  prop name, :string, required: true

  def render(assigns) do
    ~F"""
    <div class="title">Hello, <strong>{@name}!</strong><div>
    """
  end
end

Then your LiveView module needs to use Surface.LiveView and you are ready to render that new "JSX" component passing some props:

defmodule MyApp.ExampleLive do
  use Surface.LiveView
  alias MyApp.WelcomeMessage

  def render(assigns) do
    ~F"""
    <div class="container">
      <WelcomeMessage name="Vinny" />
    </div>
    """
  end
end

Surface also handles state and has a way to handle portals, which are called slots. I might play with this library in one of my side-projects.