Programming Phoenix LiveView: related stateless components in one module

Community PragProg Customers
,
1

Drawing is done using stateless components that exist in separate modules. For example:

# lib/pento_web/live/pento/board.ex
def render(assigns) do
    ~H"""
    <div id={ @id } phx-window-keydown="key" phx-target={ @myself }>
      <Canvas.draw viewBox="0 0 200 70">
        <%= for shape <- @shapes do %>
          <Shape.draw
            points={ shape.points }
            fill= { color(shape.color, Board.active?(@board, shape.name) ) }
            name={ shape.name } />
        <% end %>
      </Canvas.draw>
      <hr/>
      <Palette.draw
          shape_names= { @board.palette }
          id="palette" />
    </div>
    """
  end

but Phoenix LiveView documentation suggests otherwise:

You must avoid defining a module for each component. Instead, we should use modules to group side-by-side related function components.
Phoenix.Component — Phoenix LiveView v0.20.2

I don’t have much experience with stateless components so I don’t have an opinion on this yet, but I think it would be good if we respected the convention either way: putting them all together or creating separate module for each.

2

I think you could say that this approach is still adherent to the official recommendation. You could make a case that drawing the palette, drawing the canvas, etc. are all distinct responsibilities that deserver their own modules. Whereas, for example, it would be appropriate to create something like a shared UserProfile module to house a set of similar function components like display_contact_info/1, display_address/1 etc.

3

Makes sense. Thanks for the explanation.