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.5.2, 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?!
