Reduce Phoenix.HTML usage

extra/lib/plausible_web/live/funnel_settings.ex

@@ -3,7 +3,6 @@ defmodule PlausibleWeb.Live.FunnelSettings do
   LiveView allowing listing, creating and deleting funnels.
   """
   use PlausibleWeb, :live_view
-  use Phoenix.HTML
 
   use Plausible.Funnel
 
@@ -64,13 +63,15 @@ defmodule PlausibleWeb.Live.FunnelSettings do
       </div>
 
       <div :if={@goal_count < Funnel.min_steps()}>
-        <PlausibleWeb.Components.Generic.notice class="mt-4" title="Not enough goals">
-          You need to define at least two goals to create a funnel. Go ahead and <%= link(
-            "add goals",
-            to: PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain),
-            class: "text-indigo-500 w-full text-center"
-          ) %> to proceed.
-        </PlausibleWeb.Components.Generic.notice>
+        <.notice class="mt-4" title="Not enough goals">
+          You need to define at least two goals to create a funnel. Go ahead and
+          <.styled_link href={
+            PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain)
+          }>
+            add goals
+          </.styled_link>
+          to proceed.
+        </.notice>
       </div>
     </div>
     """

extra/lib/plausible_web/live/funnel_settings/form.ex

@@ -123,7 +123,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
                 </p>
               </div>
 
-              <PlausibleWeb.Components.Generic.button
+              <.button
                 id="save"
                 type="submit"
                 class="w-full"
@@ -133,7 +133,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
                 }
               >
                 <span><%= if @funnel, do: "Update", else: "Add" %> Funnel</span>
-              </PlausibleWeb.Components.Generic.button>
+              </.button>
             </div>
           </.form>
         </div>

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -7,9 +7,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
   message before deleting the funnel from the UI. If there are no funnels
   configured for the site, a message is displayed indicating so.
   """
-  use Phoenix.LiveComponent
-  use Phoenix.HTML
-  import PlausibleWeb.Components.Generic
+  use PlausibleWeb, :live_component
 
   def render(assigns) do
     ~H"""

lib/plausible_web.ex

@@ -15,6 +15,27 @@ defmodule PlausibleWeb do
       alias Phoenix.LiveView.JS
 
       import PlausibleWeb.Components.Generic
+      import PlausibleWeb.Live.Components.Form
+    end
+  end
+
+  def live_component do
+    quote do
+      use Phoenix.LiveComponent, global_prefixes: ~w(x-)
+      import PlausibleWeb.Components.Generic
+      import PlausibleWeb.Live.Components.Form
+      alias Phoenix.LiveView.JS
+      alias PlausibleWeb.Router.Helpers, as: Routes
+    end
+  end
+
+  def component do
+    quote do
+      use Phoenix.Component, global_prefixes: ~w(x-)
+      import PlausibleWeb.Components.Generic
+      import PlausibleWeb.Live.Components.Form
+      alias Phoenix.LiveView.JS
+      alias PlausibleWeb.Router.Helpers, as: Routes
     end
   end
 
@@ -37,12 +58,9 @@ defmodule PlausibleWeb do
       # Import convenience functions from controllers
       import Phoenix.Controller, only: [view_module: 1]
 
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
       use Phoenix.Component
 
       import PlausibleWeb.ErrorHelpers
-      import PlausibleWeb.FormHelpers
       import PlausibleWeb.Components.Generic
       import PlausibleWeb.Live.Components.Form
       alias PlausibleWeb.Router.Helpers, as: Routes

lib/plausible_web/components/billing/billing.ex

@@ -1,10 +1,9 @@
 defmodule PlausibleWeb.Components.Billing do
   @moduledoc false
 
-  use Phoenix.Component
-  import PlausibleWeb.Components.Generic
+  use PlausibleWeb, :component
+
   require Plausible.Billing.Subscription.Status
-  alias PlausibleWeb.Router.Helpers, as: Routes
   alias Plausible.Billing.{Subscription, Subscriptions}
 
   def render_monthly_pageview_usage(%{usage: usage} = assigns)
@@ -267,12 +266,9 @@ defmodule PlausibleWeb.Components.Billing do
 
   def upgrade_link(assigns) do
     ~H"""
-    <PlausibleWeb.Components.Generic.button_link
-      id="upgrade-link-2"
-      href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
-    >
+    <.button_link id="upgrade-link-2" href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}>
       Upgrade
-    </PlausibleWeb.Components.Generic.button_link>
+    </.button_link>
     """
   end
 

lib/plausible_web/components/billing/notice.ex

@@ -1,10 +1,9 @@
 defmodule PlausibleWeb.Components.Billing.Notice do
   @moduledoc false
 
-  use Phoenix.Component
+  use PlausibleWeb, :component
+
   require Plausible.Billing.Subscription.Status
-  import PlausibleWeb.Components.Generic
-  alias PlausibleWeb.Router.Helpers, as: Routes
   alias Plausible.Auth.User
   alias Plausible.Billing.{Subscription, Plans, Subscriptions, Feature}
 

lib/plausible_web/components/billing/pageview_slider.ex

@@ -1,8 +1,7 @@
 defmodule PlausibleWeb.Components.Billing.PageviewSlider do
   @moduledoc false
 
-  use Phoenix.Component
-  use Phoenix.HTML
+  use PlausibleWeb, :component
 
   def render(assigns) do
     ~H"""
@@ -71,7 +70,7 @@ defmodule PlausibleWeb.Components.Billing.PageviewSlider do
     </form>
 
     <script>
-      const SLIDER_LABELS = <%= raw Jason.encode!(@slider_labels) %>
+      const SLIDER_LABELS = <%= Phoenix.HTML.raw Jason.encode!(@slider_labels) %>
 
       function repositionBubble() {
         const input = document.getElementById("slider")

lib/plausible_web/components/billing/plan_box.ex

@@ -1,11 +1,11 @@
 defmodule PlausibleWeb.Components.Billing.PlanBox do
   @moduledoc false
 
-  use Phoenix.Component
+  use PlausibleWeb, :component
+
   require Plausible.Billing.Subscription.Status
   alias PlausibleWeb.Components.Billing.{PlanBenefits, Notice}
   alias Plausible.Billing.{Plan, Quota, Subscription}
-  alias PlausibleWeb.Router.Helpers, as: Routes
 
   def standard(assigns) do
     highlight =
@@ -231,7 +231,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
         Upgrade
       </PlausibleWeb.Components.Billing.paddle_button>
     <% end %>
-    <PlausibleWeb.Components.Generic.tooltip :if={@exceeded_plan_limits != [] && @disabled_message}>
+    <.tooltip :if={@exceeded_plan_limits != [] && @disabled_message}>
       <div class="pt-2 text-sm w-full flex items-center text-red-700 dark:text-red-500 justify-center">
         <%= @disabled_message %>
         <Heroicons.information_circle class="hidden sm:block w-5 h-5 sm:ml-2" />
@@ -242,7 +242,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
           <%= Phoenix.Naming.humanize(limit) %><br />
         </p>
       </:tooltip_content>
-    </PlausibleWeb.Components.Generic.tooltip>
+    </.tooltip>
     <div
       :if={@disabled_message && @exceeded_plan_limits == []}
       class="pt-2 text-sm w-full text-red-700 dark:text-red-500 text-center"

lib/plausible_web/components/first_dashboard_launch_banner.ex

@@ -2,8 +2,8 @@ defmodule PlausibleWeb.Components.FirstDashboardLaunchBanner do
   @moduledoc """
   A banner that appears on the first dashboard launch
   """
-  use Phoenix.Component
-  use Phoenix.HTML
+
+  use PlausibleWeb, :component
 
   attr(:site, Plausible.Site, required: true)
 
@@ -28,10 +28,9 @@ defmodule PlausibleWeb.Components.FirstDashboardLaunchBanner do
       x-bind:class="! show ? 'hidden' : ''"
       x-init={x_init(@site)}
     >
-      <%= link("Team members, email reports and GA import. Explore more →",
-        to: "/#{URI.encode_www_form(@site.domain)}/settings/email-reports",
-        class: "py-2 block"
-      ) %>
+      <.styled_link href={"/#{URI.encode_www_form(@site.domain)}/settings/email-reports"}>
+        Team members, email reports and GA import. Explore more →
+      </.styled_link>
     </div>
     """
   end

lib/plausible_web/components/generic.ex

@@ -40,7 +40,7 @@ defmodule PlausibleWeb.Components.Generic do
   attr(:class, :string, default: "")
   attr(:disabled, :boolean, default: false)
   attr(:mt?, :boolean, default: true)
-  attr(:rest, :global)
+  attr(:rest, :global, include: ~w(name))
 
   slot(:inner_block)
 
@@ -285,7 +285,7 @@ defmodule PlausibleWeb.Components.Generic do
 
   attr(:href, :string, required: true)
   attr(:new_tab, :boolean, default: false)
-  attr(:class, :string, default: "")
+  attr(:class, :string, default: nil)
   attr(:rest, :global)
   attr(:method, :string, default: "get")
   slot(:inner_block)
@@ -325,9 +325,7 @@ defmodule PlausibleWeb.Components.Generic do
       """
     else
       ~H"""
-      <.link class={@class} href={@href} {@extra} {@rest}>
-        <%= render_slot(@inner_block) %>
-      </.link>
+      <.link class={@class} href={@href} {@extra} {@rest}><%= render_slot(@inner_block) %></.link>
       """
     end
   end

lib/plausible_web/components/google.ex

@@ -2,23 +2,26 @@ defmodule PlausibleWeb.Components.Google do
   @moduledoc """
   Google-related components
   """
-  use Phoenix.Component
-  use Phoenix.HTML
+  use PlausibleWeb, :component
 
   attr(:to, :string, required: true)
   attr(:id, :string, required: true)
 
   def button(assigns) do
     ~H"""
-    <%= button(id: @id, to: @to, class: "inline-flex pr-4 items-center border border-gray-100 shadow rounded-md focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-200 mt-8 hover:bg-gray-50 dark:hover:bg-gray-700") do %>
+    <.unstyled_link
+      id={@id}
+      href={@to}
+      class="inline-flex pr-4 items-center border border-gray-100 shadow rounded-md focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-200 mt-8 hover:bg-gray-50 dark:hover:bg-gray-700"
+    >
       <.logo />
       <span
         style="font-family: Roboto, system-ui"
         class="text-sm font-medium text-gray-600 dark:text-gray-50"
       >
         Continue with Google
       </span>
-    <% end %>
+    </.unstyled_link>
     """
   end
 

lib/plausible_web/components/settings.ex

@@ -2,11 +2,7 @@ defmodule PlausibleWeb.Components.Settings do
   @moduledoc """
   An umbrella module for the Integrations settings section
   """
-  use Phoenix.Component
-  use Phoenix.HTML
-
-  import PlausibleWeb.Components.Generic
-  alias PlausibleWeb.Router.Helpers, as: Routes
+  use PlausibleWeb, :component
 
   embed_templates("../templates/site/settings_search_console.html")
 end

lib/plausible_web/components/site/feature.ex

@@ -25,12 +25,9 @@ defmodule PlausibleWeb.Components.Site.Feature do
         for={nil}
         class={@class}
       >
-        <PlausibleWeb.Components.Generic.toggle_submit
-          set_to={@current_setting}
-          disabled?={@disabled?}
-        >
+        <.toggle_submit set_to={@current_setting} disabled?={@disabled?}>
           Show <%= @feature_mod.display_name() %> in the Dashboard
-        </PlausibleWeb.Components.Generic.toggle_submit>
+        </.toggle_submit>
       </.form>
 
       <div :if={@current_setting}>

lib/plausible_web/components/two_factor.ex

@@ -2,8 +2,7 @@ defmodule PlausibleWeb.Components.TwoFactor do
   @moduledoc """
   Reusable components specific to 2FA
   """
-  use Phoenix.Component, global_prefixes: ~w(x-)
-  import PlausibleWeb.Components.Generic
+  use PlausibleWeb, :component
 
   attr :text, :string, required: true
   attr :scale, :integer, default: 4
@@ -58,7 +57,7 @@ defmodule PlausibleWeb.Components.TwoFactor do
         value: "",
         required: "required"
       ) %>
-      <PlausibleWeb.Components.Generic.button
+      <.button
         :if={@show_button?}
         type="submit"
         id={@id}
@@ -70,10 +69,9 @@ defmodule PlausibleWeb.Components.TwoFactor do
         </span>
 
         <span class="label-disabled">
-          <PlausibleWeb.Components.Generic.spinner class="inline-block h-5 w-5 mr-2 text-white dark:text-gray-400" />
-          Verifying...
+          <.spinner class="inline-block h-5 w-5 mr-2 text-white dark:text-gray-400" /> Verifying...
         </span>
-      </PlausibleWeb.Components.Generic.button>
+      </.button>
     </div>
     """
   end
@@ -130,7 +128,7 @@ defmodule PlausibleWeb.Components.TwoFactor do
           x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           class="inline-block align-bottom bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         >
-          <%= Phoenix.HTML.Form.form_for @form_data, @form_target, [onsubmit: @onsubmit], fn f -> %>
+          <.form :let={f} for={@form_data} action={@form_target} onsubmit={@onsubmit}>
             <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
                 <a
@@ -166,7 +164,7 @@ defmodule PlausibleWeb.Components.TwoFactor do
                 Cancel
               </.button>
             </div>
-          <% end %>
+          </.form>
         </div>
       </div>
     </div>

lib/plausible_web/live/components/combo_box.ex

@@ -36,8 +36,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
   ComboBox own test suite, so there is no need for additional
   verification.
   """
-  use Phoenix.LiveComponent, global_prefixes: ~w(x-)
-  alias Phoenix.LiveView.JS
+  use PlausibleWeb, :live_component
 
   @default_suggestions_limit 15
 
@@ -115,11 +114,8 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
             required={@required}
           />
 
-          <PlausibleWeb.Components.Generic.spinner class="spinner hidden absolute inset-y-3 right-8" />
-          <PlausibleWeb.Components.Generic.spinner
-            x-show="selectionInProgress"
-            class="spinner absolute inset-y-3 right-8"
-          />
+          <.spinner class="spinner hidden absolute inset-y-3 right-8" />
+          <.spinner x-show="selectionInProgress" class="spinner absolute inset-y-3 right-8" />
 
           <.dropdown_anchor id={@id} />
 
@@ -133,7 +129,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
           />
         </div>
 
-        <.dropdown
+        <.combo_dropdown
           ref={@id}
           suggest_fun={@suggest_fun}
           suggestions={@suggestions}
@@ -176,7 +172,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
   attr(:creatable, :boolean, required: true)
   attr(:display_value, :string, required: true)
 
-  def dropdown(assigns) do
+  def combo_dropdown(assigns) do
     ~H"""
     <ul
       tabindex="-1"