Update LiveView to 1.1

Author: andreasknoepfle

.tool-versions

@@ -1,3 +1,3 @@
-elixir 1.14.5
+elixir 1.16.3
 erlang 25.1.2
 nodejs 16.13.0

lib/bitstyles_phoenix/component/error.ex

@@ -1,6 +1,5 @@
 defmodule BitstylesPhoenix.Component.Error do
   use BitstylesPhoenix.Component
-  alias Phoenix.HTML.Form, as: PhxForm
 
   @moduledoc """
   Component for showing UI errors.
@@ -33,28 +32,28 @@ defmodule BitstylesPhoenix.Component.Error do
     """,
     "6.0.0": """
         \"""
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""
     """,
     "5.0.1": """
         \"""
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""
     """,
     "4.3.0": """
         \"""
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""
     """,
     "3.0.0": """
         \"""
-        <span class="u-fg--warning" phx-feedback-for="user[name]">
+        <span class="u-fg--warning">
           is too short
         </span>
         \"""
@@ -73,12 +72,12 @@ defmodule BitstylesPhoenix.Component.Error do
         \"""
         <ul class="u-padding-l3-left">
           <li>
-            <span class="u-fg-warning" phx-feedback-for="user[email]">
+            <span class="u-fg-warning">
               is invalid
             </span>
           </li>
           <li>
-            <span class="u-fg-warning" phx-feedback-for="user[email]">
+            <span class="u-fg-warning">
               must end with @bitcrowd.net
             </span>
           </li>
@@ -87,9 +86,10 @@ defmodule BitstylesPhoenix.Component.Error do
     """
   )
 
-  def ui_errors(assigns) do
-    assigns.form.errors
-    |> Keyword.get_values(assigns.field)
+  def ui_errors(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
+
+    errors
     |> case do
       [] ->
         ~H""
@@ -100,7 +100,6 @@ defmodule BitstylesPhoenix.Component.Error do
         ~H"""
           <.ui_error
             error={@error}
-            phx-feedback-for={PhxForm.input_name(assigns.form, assigns.field)}
             class={assigns[:error_class]} />
         """
 
@@ -114,7 +113,6 @@ defmodule BitstylesPhoenix.Component.Error do
               <li>
                 <.ui_error
                   error={error}
-                  phx-feedback-for={PhxForm.input_name(assigns.form, assigns.field)}
                   class={assigns[:error_class]} />
               </li>
             <% end %>
@@ -123,6 +121,10 @@ defmodule BitstylesPhoenix.Component.Error do
     end
   end
 
+  def ui_errors(%{field: field, form: form} = assigns) do
+    assigns |> assign(:field, form[field]) |> ui_errors()
+  end
+
   @doc """
   Generates tag for custom errors.
 
@@ -180,12 +182,12 @@ defmodule BitstylesPhoenix.Component.Error do
     """
         iex> assigns = %{error: {"Foo error", []}}
         ...> render ~H\"""
-        ...> <.ui_error error={@error} phx-feedback-for="foo" class="bar" />
+        ...> <.ui_error error={@error} class="bar" />
         ...> \"""
     """,
     """
         \"""
-        <span class="u-fg-warning bar" phx-feedback-for="foo">
+        <span class="u-fg-warning bar">
           Foo error
         </span>
         \"""

lib/bitstyles_phoenix/component/form.ex

@@ -124,8 +124,8 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_name">
           Name
         </label>
-        <input id="user_name" name="user[name]" type="text" maxlength="255"/>
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <input id="user_name" name="user[name]" type="text" maxlength="255" value="funky"/>
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""
@@ -145,15 +145,15 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_email">
           Email
         </label>
-        <input id="user_email" name="user[email]" type="text" maxlength="255"/>
+        <input id="user_email" name="user[email]" type="text" maxlength="255" value="foo@bar"/>
         <ul class=\"u-padding-l3-left\">
           <li>
-            <span class=\"u-fg-warning\" phx-feedback-for=\"user[email]\">
+            <span class=\"u-fg-warning\">
               is invalid
             </span>
           </li>
           <li>
-            <span class=\"u-fg-warning\" phx-feedback-for=\"user[email]\">
+            <span class=\"u-fg-warning\">
               must end with @bitcrowd.net
             </span>
           </li>
@@ -516,8 +516,9 @@ defmodule BitstylesPhoenix.Component.Form do
           Name
         </label>
         <textarea id="user_name" name="user[name]">
+          funky
         </textarea>
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""
@@ -740,7 +741,7 @@ defmodule BitstylesPhoenix.Component.Form do
         </label>
         Custom content
         <input type="text" whatever="foo"/>
-        <span class="u-fg-warning" phx-feedback-for="user[name]">
+        <span class="u-fg-warning">
           is too short
         </span>
         \"""

lib/bitstyles_phoenix/component/heading.ex

@@ -282,7 +282,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     ~H"""
       <div class={@class} {@extra}>
         <div class={classnames("u-flex u-items-center")}>
-          <.dynamic_tag name={@tag} class={classnames(["u-margin-0 u-margin-m-right u-break-text", assigns[:heading_class]])}>
+          <.dynamic_tag tag_name={Atom.to_string(@tag)} class={classnames(["u-margin-0 u-margin-m-right u-break-text", assigns[:heading_class]])}>
             <%= render_slot(@inner_block) %>
           </.dynamic_tag>
           <%= assigns[:title_extra] && render_slot(@title_extra) %>

lib/bitstyles_phoenix/helper/test_fixtures.ex

@@ -10,10 +10,16 @@ defmodule BitstylesPhoenix.Helper.TestFixtures do
   end
 
   def form_with_errors do
-    Phoenix.Component.to_form(%{},
+    Phoenix.Component.to_form(
+      %{
+        "name" => "funky",
+        "email" => "foo@bar",
+        "_unused_password" => ""
+      },
       as: :user,
       errors: [
         name: {"is too short", []},
+        password: {"too short", []},
         email: {"is invalid", []},
         email: "must end with @bitcrowd.net"
       ]

mix.exs

@@ -52,8 +52,8 @@ defmodule BitstylesPhoenix.MixProject do
   defp deps do
     [
       {:jason, "~> 1.0"},
-      {:phoenix_live_view, "~> 0.18.12 or ~> 0.19.0 or ~> 0.20.0"},
-      {:phoenix_html, "~> 3.3 or ~> 4.0"},
+      {:phoenix_live_view, "~> 0.20.0 or ~> 1.0"},
+      {:phoenix_html, "~> 4.0"},
       {:floki, "~> 0.38", only: [:test, :dev]},
       {:ex_doc, ">= 0.0.0", only: :dev, runtime: false},
       {:credo, ">= 0.0.0", only: :dev, runtime: false}