Hello,
I have been working with Surface for a little while and have been pretty thrilled with the experience and its ease of use, however, I have recently run across a use case whose implementation is unclear to me.
I have grabbed the example Table component from the Surface-UI docs to work with in my side project and its worked great.
However, I’d like to render a bunch of tables which all share the same formatting but can continue accept a <:cols> slot, so that I can individually specify the content for each, using the same <Col> component as the original table.
So here is my first attempt which does not work, but I’m hoping that someone could help me understand how this could work:
defmodule OOTPUtilityWeb.Components.Player.Attributes.Table do
use Surface.Component
alias OOTPUtilityWeb.Components.Shared.Table
slot cols, args: [item: ^data], required: true
prop attributes, :keyword, required: true
prop id, :string, required: true
def render(assigns) do
~F"""
<Table id={@id} data={{name, ratings} <- @attributes} header_class={&header_class/2} column_class={&column_class/2}>
<:cols>
<#cols />
</:cols>
</Table>
"""
end
def header_class(_standing, 0) do
do_header_class(["text-left"])
end
def header_class(_col, _index),
do: do_header_class([])
def do_header_class(extra_classes \\ []) do
extra_classes ++ [
"p-1",
"md:p-2",
"uppercase",
"font-small",
"md:font-medium",
"text-left"
]
end
def column_class(_standing, 0) do
do_column_class(["text-left"])
end
def column_class(_standing, _index) do
do_column_class([])
end
defp do_column_class(extra_classes) do
Enum.join(extra_classes ++ [ "p-px", "md:p-1", "whitespace-nowrap" ], " ")
end
end
and then try to use it in a way like this:
defmodule OOTPUtilityWeb.Components.Player.Attributes.Pitches do
use Surface.Component
alias OOTPUtilityWeb.Components.Player.Attributes.Table
alias OOTPUtilityWeb.Components.Shared.Table.Column
prop pitches, :keyword, required: true
def render(assigns) do
~F"""
<Table id={"player-pitch-ratings"} attributes={@pitches}>
<Column label={"Pitches"}>
{attribute_name(name)}
</Column>
<Column label="Ability">
{as_number(Keyword.get(ratings, :ability))}
</Column>
<Column label="Talent">
{as_number(Keyword.get(ratings, :talent))}
</Column>
</Table>
"""
end
def attribute_name(attribute) do
OOTPUtilityWeb.Helpers.capitalize_all(attribute)
end
def as_number(rating) do
assigns = %{rating: rating}
~F"""
<span class={"text-rating-#{@rating * 2}"}>{@rating}</span>
"""
end
end
But I see the following compilation error:
== Compilation error in file lib/ootp_utility_web/components/player/attributes/table.ex ==
** (FunctionClauseError) no function clause matching in Code.ensure_compiled/1
The following arguments were given to Code.ensure_compiled/1:
# 1
{:cols, [line: 1], nil}
Attempted function clauses (showing 1 out of 1):
def ensure_compiled(module) when is_atom(module)
(elixir 1.13.2) lib/code.ex:1519: Code.ensure_compiled/1
(surface 0.7.0) lib/surface/compiler/helpers.ex:236: Surface.Compiler.Helpers.check_module_loaded/2
(surface 0.7.0) lib/surface/compiler/helpers.ex:260: Surface.Compiler.Helpers.validate_component_module/2
(surface 0.7.0) lib/surface/compiler.ex:677: Surface.Compiler.convert_node_to_ast/3
(surface 0.7.0) lib/surface/compiler.ex:198: anonymous fn/3 in Surface.Compiler.to_ast/2
(elixir 1.13.2) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
(surface 0.7.0) lib/surface/compiler.ex:197: Surface.Compiler.to_ast/2
(surface 0.7.0) lib/surface/compiler.ex:433: Surface.Compiler.convert_node_to_ast/3
since this is a compiler error, I’m wondering if this is why Surface.quote_surface/2 exists, but TBH I’m still struggling to understand how it might help me if it did.
If anyone could help me to at least understand why Surface seems to hate this so much or how I might leverage Surface.quote_surface/2 to fix this I’d be grateful.
Thank you,
Joe
