Update dependency phoenix_live_view to v1

assets/tailwind.config.js

@@ -39,7 +39,6 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({ addVariant }) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
     plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),

lib/share_secret_web/components/core_components.ex

@@ -93,9 +93,11 @@ defmodule ShareSecretWeb.CoreComponents do
   slot :inner_block
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
+
     assigns
     |> assign(field: nil, id: assigns.id || field.id)
-    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
+    |> assign(:errors, Enum.map(errors, &translate_error(&1)))
     |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
     |> assign_new(:value, fn -> field.value end)
     |> input()
@@ -108,11 +110,11 @@ defmodule ShareSecretWeb.CoreComponents do
       end)
 
     ~H"""
-    <div phx-feedback-for={@name}>
+    <div>
       <div class="form-control">
         <label for={@id} class="label cursor-pointer">
           <span :if={@label} class="label-text">
-            <%= @label %>
+            {@label}
           </span>
           <input type="hidden" name={@name} value="false" />
           <input
@@ -126,78 +128,78 @@ defmodule ShareSecretWeb.CoreComponents do
           />
         </label>
       </div>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
+    <div>
       <div class="form-control">
         <label for={@id} class="label">
           <span :if={@label} class="label-text">
-            <%= @label %>
+            {@label}
           </span>
         </label>
         <select
           id={@id}
           name={@name}
           multiple={@multiple}
-          class={["select phx-no-feedback:select-bordered", @class, @errors == [] && "select-bordered", @errors != [] && "select-error"]}
+          class={["select", @class, @errors == [] && "select-bordered", @errors != [] && "select-error"]}
         >
-          <option :if={@prompt} value=""><%= @prompt %></option>
-          <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+          <option :if={@prompt} value="">{@prompt}</option>
+          {Phoenix.HTML.Form.options_for_select(@options, @value)}
         </select>
       </div>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
+    <div>
       <div class="form-control">
         <label for={@id} class="label">
           <span :if={@label} class="label-text">
-            <%= @label %>
+            {@label}
           </span>
         </label>
         <textarea
           id={@id}
           phx-hook="DynamicTextArea"
           name={@name}
-          class={["textarea h-[100px] phx-no-feedback:textarea-bordered", @class, @errors == [] && "textarea-bordered", @errors != [] && "textarea-error"]}
+          class={["textarea h-[100px]", @class, @errors == [] && "textarea-bordered", @errors != [] && "textarea-error"]}
           data-default-height={100}
           {@rest}
         ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
       </div>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
+    <div>
       <div class="form-control">
         <label for={@id} class="label">
           <span :if={@label} class="label-text">
-            <%= @label %>
+            {@label}
           </span>
         </label>
         <input
           type={@type}
           name={@name}
           id={@id}
           value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-          class={["input phx-no-feedback:input-bordered", @class, @errors == [] && "input-bordered", @errors != [] && "input-error"]}
+          class={["input", @class, @errors == [] && "input-bordered", @errors != [] && "input-error"]}
           {@rest}
         />
       </div>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -209,9 +211,9 @@ defmodule ShareSecretWeb.CoreComponents do
 
   def error(assigns) do
     ~H"""
-    <p class="text-error mt-3 flex gap-3 text-sm leading-6 phx-no-feedback:hidden">
+    <p class="text-error mt-3 flex gap-3 text-sm leading-6">
       <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </p>
     """
   end
@@ -262,13 +264,13 @@ defmodule ShareSecretWeb.CoreComponents do
           <button class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2">✕</button>
         </form>
         <h3 if={@header} class="text-base-content text-lg font-bold">
-          <%= @header %>
+          {@header}
         </h3>
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </div>
       <form method="dialog" class="modal-backdrop">
         <button>
-          <%= gettext("close") %>
+          {gettext("close")}
         </button>
       </form>
     </dialog>
@@ -287,7 +289,7 @@ defmodule ShareSecretWeb.CoreComponents do
     <div class={["alert alert-error", @class]}>
       <.icon name="hero-exclamation-triangle" />
       <p>
-        <%= @text %>
+        {@text}
       </p>
     </div>
     """
@@ -298,7 +300,7 @@ defmodule ShareSecretWeb.CoreComponents do
     <div class={["alert alert-info", @class]}>
       <.icon name="hero-information-circle" />
       <p>
-        <%= @text %>
+        {@text}
       </p>
     </div>
     """
@@ -309,7 +311,7 @@ defmodule ShareSecretWeb.CoreComponents do
     <div class={["alert alert-warning", @class]}>
       <.icon name="hero-exclamation-triangle" />
       <p>
-        <%= @text %>
+        {@text}
       </p>
     </div>
     """
@@ -380,24 +382,24 @@ defmodule ShareSecretWeb.CoreComponents do
       <div class="bg-base-100 text-base-content space-y-2">
         <p class="mt-4">
           <span class="font-semibold">Share a Secret</span>
-          <%= gettext(
+          {gettext(
             "lets you securely share information with trusted people through a link. This can be anything - a message, a password or a piece of information you want to share discreetly."
-          ) %>
+          )}
         </p>
         <p>
-          <%= gettext(
+          {gettext(
             "Once you have entered a secret, you can configure how many links you need and how long the secret will be available. This will generate links that you can copy and give to trusted people. Once they have accessed the secret, the link is no longer valid."
-          ) %>
+          )}
         </p>
         <p>
-          <%= gettext(
+          {gettext(
             "The secret is stored in the database in an encrypted form. The decryption key is part of the URL, adding an extra layer of security. Only the person with the link can decrypt the secret, ensuring it is securely delivered to the intended recipient. This means that even if someone gains access to the secret itself, they won't be able to decrypt it without the specific key in the URL."
-          ) %>
+          )}
         </p>
         <p>
-          <%= gettext(
+          {gettext(
             "The URLs are not stored. This means that as long as you keep the links private, it is impossible for anyone to access the decrypted secret."
-          ) %>
+          )}
         </p>
       </div>
     </.modal>
@@ -425,18 +427,18 @@ defmodule ShareSecretWeb.CoreComponents do
           <div class="menu menu-horizontal items-center">
             <div class="dropdown dropdown-end">
               <label tabindex="0" class="btn btn-ghost text-sm normal-case">
-                <%= gettext("Theme") %> <.icon name="hero-chevron-down" class="h-4 w-4" />
+                {gettext("Theme")} <.icon name="hero-chevron-down" class="h-4 w-4" />
               </label>
               <div
                 tabindex="0"
                 class="dropdown-content z-[1] menu bg-base-200 rounded-box w-32 p-2 shadow"
               >
                 <button class="btn btn-sm mb-1 text-sm normal-case" data-set-theme="light">
-                  <.icon name="hero-sun" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Light") %>
+                  <.icon name="hero-sun" class="mr-1 inline-block h-4 w-4" /> {gettext("Light")}
                 </button>
 
                 <button class="btn btn-sm text-sm normal-case" data-set-theme="dark">
-                  <.icon name="hero-moon" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Dark") %>
+                  <.icon name="hero-moon" class="mr-1 inline-block h-4 w-4" /> {gettext("Dark")}
                 </button>
               </div>
             </div>
@@ -500,10 +502,10 @@ defmodule ShareSecretWeb.CoreComponents do
       {@rest}
     >
       <span x-show="!copyNotification">
-        <%= render_slot(@idle) %>
+        {render_slot(@idle)}
       </span>
       <span x-show="copyNotification" x-cloak>
-        <%= render_slot(@active) %>
+        {render_slot(@active)}
       </span>
     </button>
     """

lib/share_secret_web/components/layouts/app.html.heex

@@ -4,13 +4,13 @@
 </header>
 <main class="mx-auto max-w-7xl">
   <div class="px-6 py-8">
-    <%= @inner_content %>
+    {@inner_content}
   </div>
 </main>
 <footer class="mx-auto max-w-7xl pb-4 text-center">
-  <%= gettext("powered by") %> <.github_icon class="inline w-4 fill-current" />
+  {gettext("powered by")} <.github_icon class="inline w-4 fill-current" />
   <.link href="https://github.com/Flo0807/share-a-secret" target="_blank" class="link">
     share-a-secret
   </.link>
-  v<%= Application.spec(:share_secret)[:vsn] %>
+  v{Application.spec(:share_secret)[:vsn]}
 </footer>

lib/share_secret_web/components/layouts/root.html.heex

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title>
-      <%= assigns[:page_title] || "Share a Secret" %>
+      {assigns[:page_title] || "Share a Secret"}
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
   <body class="antialiased">
-    <%= @inner_content %>
+    {@inner_content}
     <.analytics current_url={@current_url} />
   </body>
 </html>

lib/share_secret_web/live/home_live/index.html.heex

@@ -34,17 +34,17 @@
   />
 
   <button class="btn btn-primary mt-4 self-start" aria-disabled={@loading} type="submit">
-    <%= gettext("Generate links") %>
+    {gettext("Generate links")}
     <span :if={@loading} class="loading loading-spinner"></span>
   </button>
 
   <p :if={@error} class="text-error mt-4 italic">
-    <%= @error %>
+    {@error}
   </p>
 </.form>
 
 <div :if={@links != []}>
-  <h1 class="text-3xl"><%= gettext("Your links") %></h1>
+  <h1 class="text-3xl">{gettext("Your links")}</h1>
 
   <.alert
     class="mt-4"

lib/share_secret_web/live/home_live/show.html.heex

@@ -1,5 +1,5 @@
 <h1 class="text-3xl">
-  <%= gettext("Reveal a secret") %>
+  {gettext("Reveal a secret")}
 </h1>
 
 <.alert :if={@error} class="mt-4" type={:error} text={@error} />
@@ -31,20 +31,20 @@
     >
       <:active>
         <div class="text-success flex items-center space-x-2">
-          <p><%= gettext("Copy secret") %></p>
+          <p>{gettext("Copy secret")}</p>
           <.icon name="hero-clipboard-document-check" />
         </div>
       </:active>
       <:idle>
         <div class="flex items-center space-x-2">
-          <p><%= gettext("Copy secret") %></p>
+          <p>{gettext("Copy secret")}</p>
           <.icon name="hero-clipboard" />
         </div>
       </:idle>
     </.copy_to_clipboard>
 
     <button :if={!@secret} class="btn btn-primary" phx-click="reveal-secret">
-      <%= gettext("Reveal") %>
+      {gettext("Reveal")}
     </button>
   </div>
 </div>

mix.exs

@@ -39,7 +39,7 @@ defmodule ShareSecret.MixProject do
       {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 4.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.20.1"},
+      {:phoenix_live_view, "~> 1.0.0"},
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.8.0"},
       {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},