build: upgrade to Phoenix LiveView 1.0 (#566)

Author: joaodiaslobo

.formatter.exs

@@ -1,6 +1,6 @@
 [
   import_deps: [:ecto, :phoenix],
-  plugins: [Phoenix.LiveView.HTMLFormatter, TailwindFormatter.MultiFormatter, DoctestFormatter],
+  plugins: [TailwindFormatter, DoctestFormatter, Phoenix.LiveView.HTMLFormatter],
   heex_line_length: 300,
   inputs: [
     "*.{heex,ex,exs}",

.github/workflows/style.yml

@@ -16,8 +16,8 @@ jobs:
 
     strategy:
       matrix:
-        otp: [26.x]
-        elixir: [1.14.x]
+        otp: [27.x]
+        elixir: [1.17.x]
 
     steps:
       - name: ☁️ Checkout repository

.github/workflows/test.yml

@@ -23,8 +23,8 @@ jobs:
 
     strategy:
       matrix:
-        otp: [26.x]
-        elixir: [1.14.x]
+        otp: [27.x]
+        elixir: [1.17.x]
 
     services:
       db:

.tool-versions

@@ -1,2 +1,2 @@
-elixir 1.14.4-otp-26
-erlang 26.1.1
+elixir 1.17.2-otp-27
+erlang 27.0

assets/js/app.js

@@ -25,6 +25,7 @@ import {LiveSocket} from "phoenix_live_view"
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar"
 import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
+import phxFeedbackDom from "./shims/phx_feedback_dom.js"
 
 let Hooks = {
   QrScanner: QrScanner,
@@ -37,16 +38,13 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
     hooks: Hooks,
-    dom: {
+    dom:  phxFeedbackDom({
       onBeforeElUpdated(from, to) {
-        // If the element we are updating is an Alpine component...
         if (from._x_dataStack) {
-          // Then temporarily clone it (with it's data) to the "to" element.
-          // This should simulate LiveView being aware of Alpine changes.
           window.Alpine.clone(from, to);
         }
-      },
-    },
+      }
+    }),
   });
 
 // Show progress bar on live navigation and form submits

assets/js/shims/phx_feedback_dom.js

@@ -0,0 +1,61 @@
+// https://gist.github.com/chrismccord/c4c60328c6ac5ec29e167bb115315d82
+// maintain backwards compatibility of phx-feedback-for, which was removed in LiveView 1.0
+// find all phx-feedback-for containers and show/hide phx-no-feedback class based on used inputs
+import {isUsedInput} from "phoenix_live_view"
+
+let resetFeedbacks = (container, feedbacks) => {
+  feedbacks = feedbacks || Array.from(container.querySelectorAll("[phx-feedback-for]"))
+    .map(el => [el, el.getAttribute("phx-feedback-for")])
+
+  feedbacks.forEach(([feedbackEl, name]) => {
+    let query = `[name="${name}"], [name="${name}[]"]`
+    let isUsed = Array.from(container.querySelectorAll(query)).find(input => isUsedInput(input))
+    if(isUsed || !feedbackEl.hasAttribute("phx-feedback-for")){
+      feedbackEl.classList.remove("phx-no-feedback")
+    } else {
+      feedbackEl.classList.add("phx-no-feedback")
+    }
+  })
+}
+
+export default phxFeedbackDom = (dom) => {
+  window.addEventListener("reset", e => resetFeedbacks(document))
+  let feedbacks
+  let submitPending = false
+  let inputPending = false
+  window.addEventListener("submit", e => submitPending = e.target)
+  window.addEventListener("input", e => inputPending = e.target)
+  // extend provided dom options with our own.
+  // accumulate phx-feedback-for containers for each patch and reset feedbacks when patch ends
+  return {
+    onPatchStart(container){
+      feedbacks = []
+      dom.onPatchStart && dom.onPatchStart(container)
+    },
+    onNodeAdded(node){
+      if(node.hasAttribute && node.hasAttribute("phx-feedback-for")){
+        feedbacks.push([node, node.getAttribute("phx-feedback-for")])
+      }
+      dom.onNodeAdded && dom.onNodeAdded(node)
+    },
+    onBeforeElUpdated(from, to){
+      let fromFor = from.getAttribute("phx-feedback-for")
+      let toFor = to.getAttribute("phx-feedback-for")
+      if(fromFor || toFor){ feedbacks.push([from, fromFor || toFor], [to, toFor || fromFor]) }
+
+      dom.onBeforeElUpdated && dom.onBeforeElUpdated(from, to)
+    },
+    onPatchEnd(container){
+      resetFeedbacks(container, feedbacks)
+      // we might not find some feedback nodes if they are skipped in the patch
+      // therefore we explicitly reset feedbacks for all nodes when the patch
+      // follows a submit or input event
+      if(inputPending || submitPending){
+        resetFeedbacks(container)
+        inputPending = null
+        submitPending = null
+      }
+      dom.onPatchEnd && dom.onPatchEnd(container)
+    }
+  }
+}

config/dev.exs

@@ -77,5 +77,9 @@ config :phoenix, :stacktrace_depth, 20
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
 
+config :phoenix_live_view,
+  # Include HEEx debug annotations as HTML comments in rendered markup
+  debug_heex_annotations: true
+
 # Other configurations for the app
 config :pdf_generator, raise_on_missing_wkhtmltopdf_binary: false

lib/atomic/organizations/collaborator.ex

@@ -19,8 +19,10 @@ defmodule Atomic.Organizations.Collaborator do
       order_by: [:inserted_at],
       order_directions: [:desc]
     },
-    join_fields: [
-      collaborator_name: [binding: :user, field: :name, path: [:user, :name]]
+    adapter_opts: [
+      join_fields: [
+        collaborator_name: [binding: :user, field: :name, path: [:user, :name]]
+      ]
     ]
   }
 

lib/atomic_web.ex

@@ -98,8 +98,9 @@ defmodule AtomicWeb do
 
   defp view_helpers do
     quote do
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
+      import Phoenix.HTML
+      import Phoenix.HTML.Form
+      use PhoenixHTMLHelpers
 
       # Import LiveView and .heex helpers (<.link>, <.form>, etc)
       import Phoenix.LiveView.Helpers

lib/atomic_web/components/activity.ex

@@ -21,19 +21,19 @@ defmodule AtomicWeb.Components.Activity do
           <object>
             <.link navigate={~p"/organizations/#{@activity.organization.id}"}>
               <span class="text-sm font-medium text-zinc-900 hover:underline focus:outline-none">
-                <%= @activity.organization.name %>
+                {@activity.organization.name}
               </span>
             </.link>
           </object>
           <p class="text-sm text-zinc-500">
             <span class="sr-only">Published on</span>
-            <time><%= relative_datetime(@activity.inserted_at) %></time>
+            <time>{relative_datetime(@activity.inserted_at)}</time>
           </p>
         </div>
       </div>
-      <h2 class="mt-3 text-base font-semibold text-zinc-900"><%= @activity.title %></h2>
+      <h2 class="mt-3 text-base font-semibold text-zinc-900">{@activity.title}</h2>
       <div class="overflow-hidden break-words text-justify text-sm text-zinc-700">
-        <p><%= maybe_slice_string(@activity.description, 300) %></p>
+        <p>{maybe_slice_string(@activity.description, 300)}</p>
       </div>
       <!-- Image -->
       <%= if @activity.image do %>
@@ -47,21 +47,21 @@ defmodule AtomicWeb.Components.Activity do
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
-              <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+              <span class="font-medium text-zinc-900">{pretty_display_date(@activity.start)}</span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-user-group-solid" class="size-5" />
-              <span class="font-medium text-zinc-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
+              <span class="font-medium text-zinc-900">{@activity.enrolled}/{@activity.maximum_entries}</span>
               <span class="sr-only text-zinc-400">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-map-pin-solid" class="size-5" />
-              <span class="font-medium text-zinc-900"><%= @activity.location.name %></span>
+              <span class="font-medium text-zinc-900">{@activity.location.name}</span>
               <span class="sr-only">location</span>
             </span>
           </span>