Merge pull request #13 from plausible/render-as

refactor: extract render_as helper for consistent component rendering

Author: ukutaht

demo/test/wallaby/demo_web/dropdown_test.exs

@@ -6,6 +6,12 @@ defmodule DemoWeb.DropdownTest do
   @dropdown_menu Query.css("#dropdown [role=menu]")
   @dropdown_items Query.css("#dropdown [role=menuitem]")
 
+  feature "default dropdown trigger has type='button'", %{session: session} do
+    session
+    |> visit_fixture("/fixtures/dropdown", "#dropdown")
+    |> assert_has(Query.css("#dropdown button[aria-haspopup=menu][type=button]"))
+  end
+
   feature "shows dropdown menu when button is clicked", %{session: session} do
     session
     |> visit_fixture("/fixtures/dropdown", "#dropdown")

demo/test/wallaby/demo_web/modal_title_test.exs

@@ -45,19 +45,19 @@ defmodule DemoWeb.ModalTitleTest do
     import Prima.Modal
 
     assert_raise RuntimeError,
-                 "Cannot render modal title `as` 123. Expected a function or string",
+                 "Cannot render component `as` 123. Expected a function or string",
                  fn ->
                    render_component(&modal_title/1, %{as: 123}, %{})
                  end
 
     assert_raise RuntimeError,
-                 "Cannot render modal title `as` []. Expected a function or string",
+                 "Cannot render component `as` []. Expected a function or string",
                  fn ->
                    render_component(&modal_title/1, %{as: []}, %{})
                  end
 
     assert_raise RuntimeError,
-                 "Cannot render modal title `as` %{}. Expected a function or string",
+                 "Cannot render component `as` %{}. Expected a function or string",
                  fn ->
                    render_component(&modal_title/1, %{as: %{}}, %{})
                  end

lib/prima/component.ex

@@ -0,0 +1,69 @@
+defmodule Prima.Component do
+  @moduledoc false
+  import Phoenix.Component, only: [dynamic_tag: 1]
+
+  @doc """
+  Renders a component using either a custom component function, a custom tag name, or a default HTML tag.
+
+  This helper function provides a consistent pattern for components that support
+  the `as` attribute for custom rendering.
+
+  ## Parameters
+
+    * `assigns` - The component assigns map
+    * `default_tag_attrs` - Map of attributes for the default tag, including `:tag_name`.
+      This map is passed directly to `dynamic_tag/1` when rendering the default element.
+      Attributes in this map are NOT passed to custom components.
+
+  ## Returns
+
+  Returns the rendered component by either:
+    * Calling the custom component function with merged assigns (if `as` is a function)
+    * Rendering a dynamic tag with the custom tag name (if `as` is a string)
+    * Rendering a dynamic tag with default_tag_attrs (if `as` is not provided)
+
+  ## Behavior
+
+  1. Pops the `:as` attribute from assigns
+  2. Pops and merges the `:rest` attributes into assigns
+  3. If `as` is a function, calls it with the merged assigns (without default_tag_attrs)
+  4. If `as` is a string, renders a dynamic tag with that tag name (without default_tag_attrs)
+  5. Otherwise, renders a dynamic tag with default_tag_attrs merged into assigns
+
+  ## Examples
+
+      # With default button element
+      def my_button(assigns) do
+        assigns = assign(assigns, %{"aria-label": "My Button"})
+        render_as(assigns, %{tag_name: "button", type: "button"})
+      end
+
+      # Can be used with as={&custom_component/1}
+      # Custom component won't receive the type="button" attribute
+      <.my_button as={&custom_component/1} />
+
+      # Can be used with as="span"
+      # Renders a span without type="button"
+      <.my_button as="span" />
+
+  """
+  def render_as(assigns, default_tag_attrs) when is_map(default_tag_attrs) do
+    {as, assigns} = Map.pop(assigns, :as)
+    {rest, assigns} = Map.pop(assigns, :rest, %{})
+    assigns = Map.merge(assigns, rest)
+
+    cond do
+      is_nil(as) ->
+        dynamic_tag(Map.merge(assigns, default_tag_attrs))
+
+      is_function(as) ->
+        as.(assigns)
+
+      is_binary(as) ->
+        dynamic_tag(Map.merge(assigns, %{tag_name: as}))
+
+      true ->
+        raise "Cannot render component `as` #{inspect(as)}. Expected a function or string"
+    end
+  end
+end

lib/prima/dropdown.ex

@@ -1,5 +1,6 @@
 defmodule Prima.Dropdown do
   use Phoenix.Component
+  import Prima.Component, only: [render_as: 2]
   alias Phoenix.LiveView.JS
 
   attr :id, :string, default: ""
@@ -75,20 +76,7 @@ defmodule Prima.Dropdown do
         "aria-expanded": "false"
       })
 
-    {as, assigns} = Map.pop(assigns, :as)
-    {rest, assigns} = Map.pop(assigns, :rest, %{})
-    assigns = Map.merge(assigns, rest)
-
-    if as do
-      as.(assigns)
-    else
-      dynamic_tag(
-        Map.merge(assigns, %{
-          tag_name: "button",
-          type: "button"
-        })
-      )
-    end
+    render_as(assigns, %{tag_name: "button", type: "button"})
   end
 
   attr :transition_enter, :any, default: nil
@@ -209,10 +197,6 @@ defmodule Prima.Dropdown do
   will not function correctly with keyboard navigation and screen readers.
   """
   def dropdown_item(assigns) do
-    {as, assigns} = Map.pop(assigns, :as)
-    {rest, assigns} = Map.pop(assigns, :rest, %{})
-    assigns = Map.merge(assigns, rest)
-
     assigns =
       assign(assigns, %{
         role: "menuitem",
@@ -221,14 +205,6 @@ defmodule Prima.Dropdown do
         "data-disabled": if(assigns.disabled, do: "true", else: nil)
       })
 
-    if as do
-      as.(assigns)
-    else
-      dynamic_tag(
-        Map.merge(assigns, %{
-          tag_name: "div"
-        })
-      )
-    end
+    render_as(assigns, %{tag_name: "div"})
   end
 end

lib/prima/modal.ex

@@ -70,6 +70,7 @@ defmodule Prima.Modal do
   by using Phoenix LiveView routing.
   """
   use Phoenix.Component
+  import Prima.Component, only: [render_as: 2]
   alias Phoenix.LiveView.JS
 
   attr :id, :string, required: true
@@ -376,20 +377,6 @@ defmodule Prima.Modal do
         "data-prima-ref": "modal-title"
       })
 
-    case assigns[:as] do
-      as when is_function(as) ->
-        {_, assigns} = Map.pop(assigns, :as)
-        as.(assigns)
-
-      as when is_binary(as) ->
-        dynamic_tag(
-          Map.merge(assigns, %{
-            tag_name: as
-          })
-        )
-
-      as ->
-        raise "Cannot render modal title `as` #{inspect(as)}. Expected a function or string"
-    end
+    render_as(assigns, %{tag_name: "h3"})
   end
 end