phoenix_live_view 0.18.15 → 0.18.17

package/README.md

@@ -134,6 +134,8 @@ $ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill fo
 
 Note: The `shim-keyboard-event-key` polyfill is also required for [MS Edge 12-18](https://caniuse.com/#feat=keyboardevent-key).
 
+Note: The `event-submitter-polyfill` package is also required for [MS Edge 12-80 & Safari < 15.4](https://caniuse.com/mdn-api_submitevent_submitter).
+
 ```
 // assets/js/app.js
 import "mdn-polyfills/Object.assign"
@@ -153,6 +155,7 @@ import "classlist-polyfill"
 import "new-event-polyfill"
 import "@webcomponents/template"
 import "shim-keyboard-event-key"
+import "event-submitter-polyfill"
 import "core-js/features/set"
 import "core-js/features/url"
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -98,7 +98,6 @@ export default class DOMPatch {
     this.trackBefore("updated", container, container)
 
     liveSocket.time("morphdom", () => {
-
       this.streams.forEach(([inserts, deleteIds]) => {
         this.streamInserts = Object.assign(this.streamInserts, inserts)
         deleteIds.forEach(id => {
@@ -124,8 +123,7 @@ export default class DOMPatch {
           let streamAt = child.id ? this.streamInserts[child.id] : undefined
           if(streamAt === undefined) { return parent.appendChild(child) }
 
-          //streaming
-          DOM.putPrivate(child, PHX_STREAM, true)
+          // streaming
           if(streamAt === 0){
             parent.insertAdjacentElement("afterbegin", child)
           } else if(streamAt === -1){
@@ -160,10 +158,13 @@ export default class DOMPatch {
         onNodeDiscarded: (el) => this.onNodeDiscarded(el),
         onBeforeNodeDiscarded: (el) => {
           if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }
-          if(DOM.private(el, PHX_STREAM)){ return false }
-          if(el.parentElement !== null && DOM.isPhxUpdate(el.parentElement, phxUpdate, ["append", "prepend"]) && el.id){ return false }
+          if(el.parentElement !== null && el.id &&
+             DOM.isPhxUpdate(el.parentElement, phxUpdate, [PHX_STREAM, "append", "prepend"])){
+            return false
+          }
           if(this.maybePendingRemove(el)){ return false }
           if(this.skipCIDSibling(el)){ return false }
+
           return true
         },
         onElUpdated: (el) => {
@@ -270,7 +271,6 @@ export default class DOMPatch {
     let streamAt = el.id ? this.streamInserts[el.id] : undefined
     if(streamAt === undefined){ return }
 
-    DOM.putPrivate(el, PHX_STREAM, true)
     if(streamAt === 0){
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild)
     } else if(streamAt > 0){

package/assets/js/phoenix_live_view/js.js

@@ -47,7 +47,8 @@ let JS = {
         if(_target){ pushOpts._target = _target }
         targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback)
       } else if(eventType === "submit"){
-        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, pushOpts)
+        let {submitter} = args
+        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, submitter, pushOpts)
       } else {
         targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts)
       }

package/assets/js/phoenix_live_view/live_socket.js

@@ -822,7 +822,7 @@ export default class LiveSocket {
       e.preventDefault()
       e.target.disabled = true
       this.withinOwners(e.target, view => {
-        JS.exec("submit", phxEvent, view, e.target, ["push", {}])
+        JS.exec("submit", phxEvent, view, e.target, ["push", {submitter: e.submitter}])
       })
     }, false)
 

package/assets/js/phoenix_live_view/view.js

@@ -51,8 +51,18 @@ import Rendered from "./rendered"
 import ViewHook from "./view_hook"
 import JS from "./js"
 
-let serializeForm = (form, meta, onlyNames = []) => {
+let serializeForm = (form, metadata, onlyNames = []) => {
+  let {submitter, ...meta} = metadata
+
+  // TODO: Replace with `new FormData(form, submitter)` when supported by latest browsers,
+  //       and mention `formdata-submitter-polyfill` in the docs.
   let formData = new FormData(form)
+
+  // TODO: Remove when FormData constructor supports the submitter argument.
+  if (submitter && submitter.form && submitter.form === form){
+    formData.append(submitter.name, submitter.value)
+  }
+
   let toRemove = []
 
   formData.forEach((val, key, _index) => {
@@ -632,7 +642,10 @@ export default class View {
   }
 
   onJoinError(resp){
-    if(resp.reason === "unauthorized" || resp.reason === "stale"){
+    if(resp.reason === "reload"){
+      this.log("error", () => [`failed mount with ${resp.status}. Falling back to page request`, resp])
+      return this.onRedirect({to: this.href})
+    } else if(resp.reason === "unauthorized" || resp.reason === "stale"){
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp])
       return this.onRedirect({to: this.href})
     }
@@ -951,18 +964,18 @@ export default class View {
     return this.putRef([formEl].concat(disables).concat(buttons).concat(inputs), "submit", opts)
   }
 
-  pushFormSubmit(formEl, targetCtx, phxEvent, opts, onReply){
+  pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply){
     let refGenerator = () => this.disableForm(formEl, opts)
     let cid = this.targetComponentID(formEl, targetCtx)
     if(LiveUploader.hasUploadsInProgress(formEl)){
       let [ref, _els] = refGenerator()
-      let push = () => this.pushFormSubmit(formEl, targetCtx, phxEvent, opts, onReply)
+      let push = () => this.pushFormSubmit(formEl, submitter, targetCtx, phxEvent, opts, onReply)
       return this.scheduleSubmit(formEl, ref, opts, push)
     } else if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
       let [ref, els] = refGenerator()
       let proxyRefGen = () => [ref, els, opts]
       this.uploadFiles(formEl, targetCtx, ref, cid, (_uploads) => {
-        let formData = serializeForm(formEl, {})
+        let formData = serializeForm(formEl, {submitter})
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
@@ -971,7 +984,7 @@ export default class View {
         }, onReply)
       })
     } else {
-      let formData = serializeForm(formEl, {})
+      let formData = serializeForm(formEl, {submitter})
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
@@ -1124,13 +1137,13 @@ export default class View {
       (!parentViewEl && this.isDead)
   }
 
-  submitForm(form, targetCtx, phxEvent, opts = {}){
+  submitForm(form, targetCtx, phxEvent, submitter, opts = {}){
     DOM.putPrivate(form, PHX_HAS_SUBMITTED, true)
     let phxFeedback = this.liveSocket.binding(PHX_FEEDBACK_FOR)
     let inputs = Array.from(form.elements)
     inputs.forEach(input => DOM.putPrivate(input, PHX_HAS_SUBMITTED, true))
     this.liveSocket.blurActiveElement(this)
-    this.pushFormSubmit(form, targetCtx, phxEvent, opts, () => {
+    this.pushFormSubmit(form, targetCtx, phxEvent, submitter, opts, () => {
       inputs.forEach(input => DOM.showError(input, phxFeedback))
       this.liveSocket.restorePreviouslyActiveFocus()
     })

package/assets/package.json

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

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -1662,7 +1662,6 @@ var DOMPatch = class {
           if (streamAt === void 0) {
             return parent.appendChild(child);
           }
-          dom_default.putPrivate(child, PHX_STREAM, true);
           if (streamAt === 0) {
             parent.insertAdjacentElement("afterbegin", child);
           } else if (streamAt === -1) {
@@ -1696,10 +1695,7 @@ var DOMPatch = class {
           if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {
             return true;
           }
-          if (dom_default.private(el, PHX_STREAM)) {
-            return false;
-          }
-          if (el.parentElement !== null && dom_default.isPhxUpdate(el.parentElement, phxUpdate, ["append", "prepend"]) && el.id) {
+          if (el.parentElement !== null && el.id && dom_default.isPhxUpdate(el.parentElement, phxUpdate, [PHX_STREAM, "append", "prepend"])) {
             return false;
           }
           if (this.maybePendingRemove(el)) {
@@ -1813,7 +1809,6 @@ var DOMPatch = class {
     if (streamAt === void 0) {
       return;
     }
-    dom_default.putPrivate(el, PHX_STREAM, true);
     if (streamAt === 0) {
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
     } else if (streamAt > 0) {
@@ -2232,7 +2227,8 @@ var JS = {
         }
         targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback);
       } else if (eventType === "submit") {
-        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, pushOpts);
+        let { submitter } = args;
+        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, submitter, pushOpts);
       } else {
         targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts);
       }
@@ -2396,8 +2392,12 @@ var JS = {
 var js_default = JS;
 
 // js/phoenix_live_view/view.js
-var serializeForm = (form, meta, onlyNames = []) => {
+var serializeForm = (form, metadata, onlyNames = []) => {
+  let { submitter, ...meta } = metadata;
   let formData = new FormData(form);
+  if (submitter && submitter.form && submitter.form === form) {
+    formData.append(submitter.name, submitter.value);
+  }
   let toRemove = [];
   formData.forEach((val, key, _index) => {
     if (val instanceof File) {
@@ -2942,7 +2942,10 @@ var View = class {
     });
   }
   onJoinError(resp) {
-    if (resp.reason === "unauthorized" || resp.reason === "stale") {
+    if (resp.reason === "reload") {
+      this.log("error", () => [`failed mount with ${resp.status}. Falling back to page request`, resp]);
+      return this.onRedirect({ to: this.href });
+    } else if (resp.reason === "unauthorized" || resp.reason === "stale") {
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp]);
       return this.onRedirect({ to: this.href });
     }
@@ -3277,18 +3280,18 @@ var View = class {
     formEl.setAttribute(this.binding(PHX_PAGE_LOADING), "");
     return this.putRef([formEl].concat(disables).concat(buttons).concat(inputs), "submit", opts);
   }
-  pushFormSubmit(formEl, targetCtx, phxEvent, opts, onReply) {
+  pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply) {
     let refGenerator = () => this.disableForm(formEl, opts);
     let cid = this.targetComponentID(formEl, targetCtx);
     if (LiveUploader.hasUploadsInProgress(formEl)) {
       let [ref, _els] = refGenerator();
-      let push = () => this.pushFormSubmit(formEl, targetCtx, phxEvent, opts, onReply);
+      let push = () => this.pushFormSubmit(formEl, submitter, targetCtx, phxEvent, opts, onReply);
       return this.scheduleSubmit(formEl, ref, opts, push);
     } else if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
       let [ref, els] = refGenerator();
       let proxyRefGen = () => [ref, els, opts];
       this.uploadFiles(formEl, targetCtx, ref, cid, (_uploads) => {
-        let formData = serializeForm(formEl, {});
+        let formData = serializeForm(formEl, { submitter });
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
@@ -3297,7 +3300,7 @@ var View = class {
         }, onReply);
       });
     } else {
-      let formData = serializeForm(formEl, {});
+      let formData = serializeForm(formEl, { submitter });
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
@@ -3425,13 +3428,13 @@ var View = class {
     let parentViewEl = el.closest(PHX_VIEW_SELECTOR);
     return el.getAttribute(PHX_PARENT_ID) === this.id || parentViewEl && parentViewEl.id === this.id || !parentViewEl && this.isDead;
   }
-  submitForm(form, targetCtx, phxEvent, opts = {}) {
+  submitForm(form, targetCtx, phxEvent, submitter, opts = {}) {
     dom_default.putPrivate(form, PHX_HAS_SUBMITTED, true);
     let phxFeedback = this.liveSocket.binding(PHX_FEEDBACK_FOR);
     let inputs = Array.from(form.elements);
     inputs.forEach((input) => dom_default.putPrivate(input, PHX_HAS_SUBMITTED, true));
     this.liveSocket.blurActiveElement(this);
-    this.pushFormSubmit(form, targetCtx, phxEvent, opts, () => {
+    this.pushFormSubmit(form, targetCtx, phxEvent, submitter, opts, () => {
       inputs.forEach((input) => dom_default.showError(input, phxFeedback));
       this.liveSocket.restorePreviouslyActiveFocus();
     });
@@ -4156,7 +4159,7 @@ var LiveSocket = class {
       e.preventDefault();
       e.target.disabled = true;
       this.withinOwners(e.target, (view) => {
-        js_default.exec("submit", phxEvent, view, e.target, ["push", {}]);
+        js_default.exec("submit", phxEvent, view, e.target, ["push", { submitter: e.submitter }]);
       });
     }, false);
     for (let type of ["change", "input"]) {