Release 0.20.0

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 0.20-dev
+## 0.20.0 (2023-09-22)
 
 ### Deprecations
   * Deprecate the `~L` sigil in favor of `~H`
@@ -15,6 +15,23 @@
   * Remove previously deprecated `live_img_preview/2` in favor of `<.live_img_preview />`
   * Remove previously deprecated `live_file_input/2` in favor of `<.live_file_input />`
 
+### Bug fixes
+  * Fix uploads with `auto_upload: true` failing to propegate errors when any individual entry is invalid
+  * Fix uploads with `auto_upload: true` failing to auto upload valid entries errors when any individual entry is invalid
+  * Fix error on form recovery with `auto_upload: true`
+  * Fix issue on form recovery where hidden inputs would be selected by mistake
+  * Fix form recovery when phx-change is a JS command
+  * Fix stream reset on nested live components with nested streams.
+  * Fix window location resetting to null when using nested LiveView on connection error
+  * Fix anchors within contenteditable causing LiveSocket disconnects
+
+### Enhancements
+  * Add heex debug annotations via `config :phoenix_live_view, :debug_heex_annotations: true`, which provides special HTML comments that wrap around rendered components to help you identify where markup in your HTML document is rendered within your function component tree
+  * Add `assync_async`, `start_async`, `<.async_result>` and, `AsyncResult` for declaratively handling async operations in a LiveView or LiveComponent.
+  * Supporting passing `@myself` for `Phoenix.LiveView.send_update/3`
+  * Support change tracking on Access.get
+  * Allow overriding `id` of `<.live_img_preview>`
+
 ## 0.19.5 (2023-07-19)
 
 ### Backwards incompatible changes

assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.19.5",
+  "version": "0.20.0",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

lib/phoenix_live_view.ex

@@ -1456,7 +1456,7 @@ defmodule Phoenix.LiveView do
         ...
         pid = self()
 
-        Task.start(fn ->
+        Task.Supervisor.start_child(MyTaskSup, fn ->
           # Do something asynchronously
           send_update(pid, Cart, id: "cart", status: "cancelled")
         end)

mix.exs

@@ -1,7 +1,7 @@
 defmodule Phoenix.LiveView.MixProject do
   use Mix.Project
 
-  @version "0.19.5"
+  @version "0.20.0"
 
   def project do
     [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.19.5",
+  "version": "0.20.0",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

priv/static/phoenix_live_view.js

@@ -352,7 +352,12 @@ var LiveView = (() => {
       return wantsNewTab || isTargetBlank || isDownload;
     },
     isUnloadableFormSubmit(e) {
-      return !e.defaultPrevented && !this.wantsNewTab(e);
+      let isDialogSubmit = e.target && e.target.getAttribute("method") === "dialog" || e.submitter && e.submitter.getAttribute("formmethod") === "dialog";
+      if (isDialogSubmit) {
+        return false;
+      } else {
+        return !e.defaultPrevented && !this.wantsNewTab(e);
+      }
     },
     isNewPageClick(e, currentLocation) {
       let href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute("href") : null;
@@ -1982,7 +1987,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.transitionPendingRemoves();
       if (externalFormTriggered) {
         liveSocket.unload();
-        externalFormTriggered.submit();
+        Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered);
       }
       return true;
     }
@@ -2204,7 +2209,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return merged;
     }
     componentToString(cid) {
-      let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid);
+      let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null, false);
       return [str, streams];
     }
     pruneCIDs(cids) {
@@ -2265,7 +2270,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         output.buffer += rendered;
       }
     }
-    recursiveCIDToString(components, cid, onlyCids) {
+    recursiveCIDToString(components, cid, onlyCids, allowRootComments = true) {
       let component = components[cid] || logError(`no component for CID ${cid}`, components);
       let template = document.createElement("template");
       let [html, streams] = this.recursiveToString(component, components, onlyCids);
@@ -2286,6 +2291,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             child.innerHTML = "";
           }
           return [true, hasComponents];
+        } else if (child.nodeType === Node.COMMENT_NODE) {
+          if (!allowRootComments) {
+            child.remove();
+          }
+          return [hasNodes, hasComponents];
         } else {
           if (child.nodeValue.trim() !== "") {
             logError(`only HTML element tags are allowed at the root of components.
@@ -2565,10 +2575,16 @@ within:
       }
     },
     addOrRemoveClasses(el, adds, removes, transition, time, view) {
-      let [transition_run, transition_start, transition_end] = transition || [[], [], []];
-      if (transition_run.length > 0) {
-        let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(transition_run), []);
-        let onDone = () => this.addOrRemoveClasses(el, adds.concat(transition_end), removes.concat(transition_run).concat(transition_start));
+      let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []];
+      if (transitionRun.length > 0) {
+        let onStart = () => {
+          this.addOrRemoveClasses(el, transitionStart, [].concat(transitionRun).concat(transitionEnd));
+          window.requestAnimationFrame(() => {
+            this.addOrRemoveClasses(el, transitionRun, []);
+            window.requestAnimationFrame(() => this.addOrRemoveClasses(el, transitionEnd, transitionStart));
+          });
+        };
+        let onDone = () => this.addOrRemoveClasses(el, adds.concat(transitionEnd), removes.concat(transitionRun).concat(transitionStart));
         return view.transition(time, onStart, onDone);
       }
       window.requestAnimationFrame(() => {