Convert (L)EEx to HEEx

lib/drops_web/live/component_uploads_live.ex

@@ -8,21 +8,21 @@ defmodule DropsWeb.ComponentUploadsLive do
 
   @impl true
   def render(assigns) do
-    ~L"""
+    ~H"""
     <h1>Component Uploads Example</h1>
     <p>In this demo, the upload form lives within a
       <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html">LiveComponent</a>.</p>
 
     <section class="row upload-demo">
       <article class="column">
         <h2>Upload</h2>
-        <%= live_component(@socket, DropsWeb.UploadComponent, id: :avatar) %>
+        <%= live_component(DropsWeb.UploadComponent, id: :avatar) %>
       </article>
       <article class="column avatar">
       <%= if @avatar_path do %>
         <h2>Complete!</h2>
         <figure>
-          <img src="<%= @avatar_path %>" />
+          <img src={@avatar_path} />
         </figure>
       <% end %>
       </article>

lib/drops_web/live/components/file_component.ex

@@ -3,10 +3,10 @@ defmodule DropsWeb.FileComponent do
 
   @impl true
   def render(assigns) do
-    ~L"""
+    ~H"""
     <div class="file-component"><%= for entry <- @file.entries do %>
       <div class="upload-entry">
-        <progress value="<%= entry.progress %>" class="upload-entry__progress" id="<%= entry.ref %>-progress" max="100"> <%= entry.progress %>% </progress>
+        <progress value={entry.progress} class="upload-entry__progress" id={"#{entry.ref}-progress"} max="100"> <%= entry.progress %>% </progress>
       </div><% end %>
       <%= live_file_input(@file) %>
     </div>

lib/drops_web/live/components/upload_component.ex

@@ -10,25 +10,25 @@ defmodule DropsWeb.UploadComponent do
 
   @impl true
   def render(assigns) do
-    ~L"""
-    <form id="<% @id %>-upload-form"
+    ~H"""
+    <form id={"#{@id}-upload-form"}
           class="upload-component"
           action="#"
           phx-change="validate"
-          phx-drop-target="<%= @uploads.upload_component_file.ref %>"
+          phx-drop-target={@uploads.upload_component_file.ref}
           phx-submit="save"
-          phx-target="<%= @myself %>">
+          phx-target={@myself}>
 
       <%= live_file_input @uploads.upload_component_file %>
       <button type="submit">Upload</button>
 
       <section class="upload-entries">
         <h2>Preview</h2>
-        <div class="upload-entry__details"><%= for entry <- @uploads.upload_component_file.entries do %>
+        <%= for entry <- @uploads.upload_component_file.entries do %><div class="upload-entry__details">
           <%# live_img_preview/2 uses an internal hook to render a client-side image preview %>
           <%= live_img_preview entry, class: "preview" %>
           <%# review the handle_event("cancel") callback %>
-          <a href="#" phx-click="cancel" phx-target="<%= @myself %>" phx-value-ref="<%= entry.ref %>" class="upload-entry__cancel">&times;</a>
+          <a href="#" phx-click="cancel" phx-target={@myself} phx-value-ref={entry.ref} class="upload-entry__cancel">&times;</a>
         </div><% end %>
       </section>
     </form>

lib/drops_web/live/external_live/auto.html.leex → lib/drops_web/live/external_live/auto.html.heex

@@ -17,7 +17,7 @@
       <%= live_file_input @uploads.exhibit %>
     </form>
 
-    <section class="pending-uploads" phx-drop-target="<%= @uploads.exhibit.ref %>" style="min-height: 100%;">
+    <section class="pending-uploads" phx-drop-target={@uploads.exhibit.ref} style="min-height: 100%;">
 
       <h3>Pending Uploads (<%= length(@uploads.exhibit.entries) %>)</h3>
 
@@ -33,7 +33,7 @@
   <section class="column">
     <h2>UUIDs (<%= length(@uploaded_files) %>)</h2>
 
-    <output form="external-auto-form" for="<%= @uploads.exhibit.ref %>"><%= for uuid <- @uploaded_files do %>
+    <output form="external-auto-form" for={@uploads.exhibit.ref}><%= for uuid <- @uploaded_files do %>
       <p><%= uuid %></p>
    <% end %></output>
 

lib/drops_web/live/multi_input_uploads_live.html.leex → lib/drops_web/live/multi_input_uploads_live.html.heex

@@ -1,11 +1,11 @@
 <h1>Multiple File Inputs Example</h1>
 
-<p>The demo showcases multiple <code>live_file_input</code> fields on a single form:<p>
+<p>The demo showcases multiple <code>live_file_input</code> fields on a single form:</p>
 
 <section class="row upload-demo upload-demo__multi-input" style="min-height:100vh;">
 
-  <article class="column" phx-drop-target="<%= @uploads.images.ref %>" style="min-height:100vh;">
-    <label for="<%= @uploads.images.ref %>">Images (up to <%= @uploads.images.max_entries %>)</label>
+  <article class="column" phx-drop-target={@uploads.images.ref} style="min-height:100vh;">
+    <label for={@uploads.images.ref}>Images (up to <%= @uploads.images.max_entries %>)</label>
 
     <%= for error <- upload_errors(@uploads.images) do %>
       <div class="alert alert-danger"><%= upload_error_to_string(error) %></div>
@@ -17,8 +17,8 @@
         <span class="upload-entry__text"><%= entry.client_name %> - <%= entry.progress %>%</span>
         <a href="#"
            phx-click="cancel-upload"
-           phx-value-upload="<%= entry.upload_config %>"
-           phx-value-ref="<%= entry.ref %>"
+           phx-value-upload={entry.upload_config}
+           phx-value-ref={entry.ref}
            class="upload-entry__cancel">&times;</a>
 
       <%= for error <- upload_errors(@uploads.images, entry) do %>
@@ -29,8 +29,8 @@
 
   </article>
 
-  <article class="column" phx-drop-target="<%= @uploads.anything.ref %>" style="min-height:100vh;">
-    <label for="<%= @uploads.anything.ref %>">Any Files (up to <%= @uploads.anything.max_entries %>)</label>
+  <article class="column" phx-drop-target={@uploads.anything.ref} style="min-height:100vh;">
+    <label for={@uploads.anything.ref}>Any Files (up to <%= @uploads.anything.max_entries %>)</label>
 
     <%= for error <- upload_errors(@uploads.anything) do %>
       <div class="alert alert-danger"><%= upload_error_to_string(error) %></div>
@@ -41,8 +41,8 @@
         <span class="upload-entry__text"><%= entry.client_name %> - <%= entry.progress %>%</span>
         <a href="#"
            phx-click="cancel-upload"
-           phx-value-upload="<%= entry.upload_config %>"
-           phx-value-ref="<%= entry.ref %>"
+           phx-value-upload={entry.upload_config}
+           phx-value-ref={entry.ref}
            class="upload-entry__cancel">&times;</a>
 
       <%= for error <- upload_errors(@uploads.anything, entry) do %>
@@ -60,6 +60,6 @@
     </form>
     <ul><%= for path <- @uploaded_files do %><li>
       <%= path %>
-    <% end %></ul>
+    </li><% end %></ul>
   </article>
 </section>

lib/drops_web/live/uploader_live/demo.html.leex → lib/drops_web/live/uploader_live/demo.html.heex

@@ -3,7 +3,7 @@
   <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html">LiveComponent</a>.</p>
 <p>You can start and stop the demo multiple times.</p>
 
-<section class="row upload-demo <%= @live_action %>">
+<section class={["row", "upload-demo", @live_action]}>
     <article class="column">
     <%= if @live_action == :index do %>
       <h2>Welcome!</h2>
@@ -12,15 +12,15 @@
 
     <%= if @live_action == :start do %>
       <h2>Upload</h2>
-      <%= live_component(@socket, DropsWeb.UploadComponent, id: :file) %>
+      <%= live_component(DropsWeb.UploadComponent, id: :file) %>
       <%= live_patch("Close", to: Routes.uploader_demo_path(@socket, :index)) %>
     <% end %>
 
     <%= if @live_action == :done do %>
       <h2>You did it!</h2>
 
       <figure>
-        <img src="<%= @file %>" />
+        <img src={@file} />
         <figcaption>DONE:<%= @file %></figcaption>
       </figure>
 

lib/drops_web/live/uploads_live/auto.html.leex → lib/drops_web/live/uploads_live/auto.html.heex

@@ -17,12 +17,12 @@
       <%= live_file_input @uploads.exhibit %>
     </form>
 
-    <section class="pending-uploads" phx-drop-target="<%= @uploads.exhibit.ref %>" style="min-height: 100%;">
+    <section class="pending-uploads" phx-drop-target={@uploads.exhibit.ref} style="min-height: 100%;">
 
       <h3>Pending Uploads (<%= length(@uploads.exhibit.entries) %>)</h3>
 
       <%= for entry <- @uploads[:exhibit].entries do %>
-        <a href="#" phx-click="cancel-upload" phx-value-ref="<%= entry.ref %>" class="upload-entry__cancel">Cancel Upload</a>
+        <a href="#" phx-click="cancel-upload" phx-value-ref={entry.ref} class="upload-entry__cancel">Cancel Upload</a>
         <pre class="upload-entry"><code><%= inspect entry, pretty: true %></code></pre>
       <% end %>
 
@@ -34,7 +34,7 @@
   <section class="column">
     <h2>UUIDs (<%= length(@uploaded_files) %>)</h2>
 
-    <output form="auto-form" for="<%= @uploads.exhibit.ref %>"><%= for uuid <- @uploaded_files do %>
+    <output form="auto-form" for={@uploads.exhibit.ref}><%= for uuid <- @uploaded_files do %>
       <p><%= uuid %></p>
    <% end %></output>
 

lib/drops_web/live/uploads_live/element.html.leex → lib/drops_web/live/uploads_live/element.html.heex

@@ -6,7 +6,7 @@
   <%= inspect @selected_file %>
   <button type="button" phx-click="remove" phx-disable-with="Removing...">Remove</button>
 <% else %>
-<%= live_component(@socket, DropsWeb.FileComponent, file: @uploads.file) %>
+<%= live_component(DropsWeb.FileComponent, file: @uploads.file) %>
 <% end %>
-<button type="submit" phx-disable-with="Uploading..."<%= if @selected_file, do: " disabled" %>>Upload</button>
+<button type="submit" phx-disable-with="Uploading..." {%{disabled: @selected_file}}>Upload</button>
 </form>

lib/drops_web/templates/layout/root.html.leex → lib/drops_web/templates/layout/root.html.heex

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] || "Drops", suffix: " · Phoenix Framework" %>
-    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
-    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
+    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
+    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
   </head>
   <body>
     <header>
@@ -19,7 +19,7 @@
           </ul>
         </nav>
         <a href="https://phoenixframework.org/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
+          <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
         </a>
       </section>
     </header>