merge develop

Author: enricoprazeres

.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/hooks/qr_reading.js

@@ -14,8 +14,9 @@ function parseURL(url) {
 export const QrScanner = {
 
   mounted() {
-    const config = { fps: 4, qrbox: (width, height) => {return { width: width * 0.8, height: height * 0.9 }}};
-    this.scanner = new Html5Qrcode(this.el.id, { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
+    const config = { fps: 4, qrbox: (width, height) => { return { width: width * 0.8, height: height * 0.9 } } };
+    this.scanner = new Html5Qrcode(this.el.id, { formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE] });
+    this.isScanning = false;
 
     const onScanSuccess = (decodedText, decodedResult) => {
       const pathname = parseURL(decodedText);
@@ -28,13 +29,16 @@ export const QrScanner = {
 
     const startScanner = () => {
       this.scanner.start({ facingMode: "environment" }, config, onScanSuccess)
-      .then((_) => {
-        if (this.el.dataset.on_start)
-          Function("hook", this.el.dataset.on_start)(this);
-      }, (e) => {
-        if (this.el.dataset.on_error)
-          Function("hook", this.el.dataset.on_error)(this);
-      });
+        .then((_) => {
+          this.isScanning = true;
+          if (this.el.dataset.on_start)
+            Function("hook", this.el.dataset.on_start)(this);
+        })
+        .catch((e) => {
+          this.isScanning = false;
+          if (this.el.dataset.on_error)
+            Function("hook", this.el.dataset.on_error)(this);
+        });
     }
 
     if (this.el.dataset.ask_perm) {
@@ -46,9 +50,13 @@ export const QrScanner = {
   },
 
   destroyed() {
-    this.scanner.stop().then((_) => {
-      if (this.el.dataset.on_stop)
-        Function("hook", this.el.dataset.on_stop)(this);
-    });
+    if (this.isScanning) {
+      this.scanner.stop().then((_) => {
+        if (this.el.dataset.on_stop)
+          Function("hook", this.el.dataset.on_stop)(this);
+      }).catch((e) => {
+        console.warn("Failed to stop the scanner:", e);
+      });
+    }
   }
 }

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)
+    }
+  }
+}

assets/tailwind.config.js

@@ -15,7 +15,19 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: colors.orange,
+        primary: {
+          '50': '#fef4ee',
+          '100': '#fce6d8',
+          '200': '#f8c9b0',
+          '300': '#f3a47e',
+          '400': '#ed7950',
+          '500': '#e85227',
+          '600': '#d9391d',
+          '700': '#b42a1a',
+          '800': '#90231c',
+          '900': '#74201a',
+          '950': '#3e0e0c',
+        },
         secondary: colors.sky,
         success: colors.green,
         danger: colors.red,

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/accounts.ex

@@ -491,7 +491,7 @@ defmodule Atomic.Accounts do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_user(%User{} = user, attrs \\ %{}, _after_save \\ &{:ok, &1}) do
+  def update_user(%User{} = user, attrs \\ %{}) do
     user
     |> User.changeset(attrs)
     |> Repo.update()