With Phoenix 1.6 out recently – and me having a nice side dish of Surface – I reckoned that it was time to test the water once more…and soon enough I had the first question:

Am I correct to understand that Surface components are not ready for .heex yet?

I should elaborate:

Did the getting started stuff - mix phx.new --live - adding the surface dependency, got puzzled by the lack of mentioning import surface on Surface compared to Surface — Surface v0.12.3, decided to throw it in there for good measure uncertain what it would bring though, then started on my virgin component,

defmodule Sp31ch3rWeb.Components.Button do

  use Surface.Component

  def render(assigns) do 
    ~F"""
      <button> test </button>
   """
  end
end

only to be very disappointed when I added my “revolutionary” component to my form_component.html.heex (autogenerated by mix phx.gen.live Events Call calls subject:string... ) and had ElixrLS read me the motd

(Phoenix.LiveView.HTMLTokenizer.ParseError) invalid tag <Button>

Ups - forgot to tell form_component.ex that I was into some sorcery sh*t - better fix that

defmodule Sp31ch3rWeb.CallLive.FormComponent do
  use Sp31ch3rWeb, :live_component

  alias Sp31ch3r.Events
  alias Sp31ch3rWeb.Components.Button
....
end

Nope - still an invalid tag -that ‘’ thing of mine

Did I skip on “the mix” ?

  def project do
      ...
      compilers: [:gettext] ++ Mix.compilers() ++ [:surface],
      ...
  end

  defp deps do
      ...
      {:surface, "~> 0.5.2"},
      {:surface_formatter, "~> 0.5.0"},
      {:surface_markdown, "~> 0.2.0"},
      ...
  end

Hmmm - then I hurried down another “rabbit hole” - make the existing/working LiveViews SurfaceViews instead!

  # lib/sp31ch3r_web.ex
  def live_component do
    quote do
      # use Phoenix.LiveComponent
      use Surface.LiveComponent

      unquote(view_helpers())
    end
  end

  #live/call_live/form_component.ex
defmodule Sp31ch3rWeb.CallLive.FormComponent do
  use Sp31ch3rWeb, :live_component

  alias Sp31ch3r.Events
  alias Sp31ch3rWeb.Components.Button
  alias Surface.Components.Form

   ...

<div>
  <h2>{@title}</h2>

  <Button/>
  <Form
    for={@changeset}
    id="call-form"
 

Nahh - the motd changed - but there’s still a motd

== Compilation error in file lib/sp31ch3r_web/live/call_live/form_component.ex ==
sp31ch3r_app  | ** (Surface.Compiler.ParseError) lib/sp31ch3r_web/live/call_live/form_component.sface:2:9: expected attribute name

which finally left me with a sense of digging my self in over my head - braking everything apart cannot possibly be what Marius’ epiphany is all about?!