phoenix_live_view 1.0.5 → 1.0.7

package/assets/js/phoenix_live_view/constants.js

@@ -67,6 +67,7 @@ export const PHX_RELOAD_STATUS = "__phoenix_reload_status__"
 export const LOADER_TIMEOUT = 1
 export const MAX_CHILD_JOIN_ATTEMPTS = 3
 export const BEFORE_UNLOAD_LOADER_TIMEOUT = 200
+export const DISCONNECTED_TIMEOUT = 500
 export const BINDING_PREFIX = "phx-"
 export const PUSH_TIMEOUT = 30000
 export const LINK_HEADER = "x-requested-with"

package/assets/js/phoenix_live_view/dom.js

@@ -234,10 +234,11 @@ let DOM = {
       case null: return callback()
 
       case "blur":
+        this.incCycle(el, "debounce-blur-cycle", () => {
+          if(asyncFilter()){ callback() }
+        })
         if(this.once(el, "debounce-blur")){
-          el.addEventListener("blur", () => {
-            if(asyncFilter()){ callback() }
-          })
+          el.addEventListener("blur", () => this.triggerCycle(el, "debounce-blur-cycle"))
         }
         return
 

package/assets/js/phoenix_live_view/live_socket.js

@@ -28,6 +28,8 @@
  * @param {Object} [opts.uploaders] - The optional object for referencing LiveView uploader callbacks.
  * @param {integer} [opts.loaderTimeout] - The optional delay in milliseconds to wait before apply
  * loading states.
+ * @param {integer} [opts.disconnectedTimeout] - The delay in milliseconds to wait before
+ * executing phx-disconnected commands. Defaults to 500.
  * @param {integer} [opts.maxReloads] - The maximum reloads before entering failsafe mode.
  * @param {integer} [opts.reloadJitterMin] - The minimum time between normal reload attempts.
  * @param {integer} [opts.reloadJitterMax] - The maximum time between normal reload attempts.
@@ -78,6 +80,7 @@ import {
   DEFAULTS,
   FAILSAFE_JITTER,
   LOADER_TIMEOUT,
+  DISCONNECTED_TIMEOUT,
   MAX_RELOADS,
   PHX_DEBOUNCE,
   PHX_DROP_TARGET,
@@ -152,6 +155,7 @@ export default class LiveSocket {
     this.hooks = opts.hooks || {}
     this.uploaders = opts.uploaders || {}
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT
+    this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT
     this.reloadWithJitterTimer = null
     this.maxReloads = opts.maxReloads || MAX_RELOADS
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN

package/assets/js/phoenix_live_view/view.js

@@ -67,8 +67,8 @@ export let prependFormDataKey = (key, prefix) => {
   return baseKey
 }
 
-let serializeForm = (form, metadata, onlyNames = []) => {
-  const {submitter, ...meta} = metadata
+let serializeForm = (form, opts, onlyNames = []) => {
+  const {submitter} = opts
 
   // We must inject the submitter in the order that it exists in the DOM
   // relative to other inputs. For example, for checkbox groups, the order must be maintained.
@@ -100,12 +100,26 @@ let serializeForm = (form, metadata, onlyNames = []) => {
 
   const params = new URLSearchParams()
 
-  let elements = Array.from(form.elements)
+  const {inputsUnused, onlyHiddenInputs} = Array.from(form.elements).reduce((acc, input) => {
+    const {inputsUnused, onlyHiddenInputs} = acc
+    const key = input.name
+    if(!key){ return acc }
+
+    if(inputsUnused[key] === undefined){ inputsUnused[key] = true }
+    if(onlyHiddenInputs[key] === undefined){ onlyHiddenInputs[key] = true }
+
+    const isUsed = DOM.private(input, PHX_HAS_FOCUSED) || DOM.private(input, PHX_HAS_SUBMITTED)
+    const isHidden = input.type === "hidden"
+    inputsUnused[key] = inputsUnused[key] && !isUsed
+    onlyHiddenInputs[key] = onlyHiddenInputs[key] && isHidden
+
+    return acc
+  }, {inputsUnused: {}, onlyHiddenInputs: {}})
+
   for(let [key, val] of formData.entries()){
     if(onlyNames.length === 0 || onlyNames.indexOf(key) >= 0){
-      let inputs = elements.filter(input => input.name === key)
-      let isUnused = !inputs.some(input => (DOM.private(input, PHX_HAS_FOCUSED) || DOM.private(input, PHX_HAS_SUBMITTED)))
-      let hidden = inputs.every(input => input.type === "hidden")
+      let isUnused = inputsUnused[key]
+      let hidden = onlyHiddenInputs[key]
       if(isUnused && !(submitter && submitter.name == key) && !hidden){
         params.append(prependFormDataKey(key, "_unused_"), "")
       }
@@ -119,8 +133,6 @@ let serializeForm = (form, metadata, onlyNames = []) => {
     submitter.parentElement.removeChild(injectedElement)
   }
 
-  for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }
-
   return params.toString()
 }
 
@@ -143,6 +155,7 @@ export default class View {
     this.lastAckRef = null
     this.childJoins = 0
     this.loaderTimer = null
+    this.disconnectedTimer = null
     this.pendingDiffs = []
     this.pendingForms = new Set()
     this.redirect = false
@@ -254,6 +267,7 @@ export default class View {
 
   hideLoader(){
     clearTimeout(this.loaderTimer)
+    clearTimeout(this.disconnectedTimer)
     this.setContainerClasses(PHX_CONNECTED_CLASS)
     this.execAll(this.binding("connected"))
   }
@@ -740,6 +754,12 @@ export default class View {
   }
 
   applyPendingUpdates(){
+    // prevent race conditions where we might still be pending a new
+    // navigation after applying the current one;
+    // if we call update and a pendingDiff is not applied, it would
+    // be silently dropped otherwise, as update would push it back to
+    // pendingDiffs, but we clear it immediately after
+    if(this.liveSocket.hasPendingLink() && this.root.isMain()){ return }
     this.pendingDiffs.forEach(({diff, events}) => this.update(diff, events))
     this.pendingDiffs = []
     this.eachChild(child => child.applyPendingUpdates())
@@ -891,7 +911,13 @@ export default class View {
     if(this.isMain()){ DOM.dispatchEvent(window, "phx:page-loading-start", {detail: {to: this.href, kind: "error"}}) }
     this.showLoader()
     this.setContainerClasses(...classes)
-    this.execAll(this.binding("disconnected"))
+    this.delayedDisconnected()
+  }
+
+  delayedDisconnected(){
+    this.disconnectedTimer = setTimeout(() => {
+      this.execAll(this.binding("disconnected"))
+    }, this.liveSocket.disconnectedTimeout)
   }
 
   wrapPush(callerPush, receives){
@@ -1171,12 +1197,13 @@ export default class View {
       ], phxEvent, "change", opts)
     }
     let formData
-    let meta  = this.extractMeta(inputEl.form)
-    if(inputEl instanceof HTMLButtonElement){ meta.submitter = inputEl }
+    let meta = this.extractMeta(inputEl.form, {}, opts.value)
+    let serializeOpts = {}
+    if(inputEl instanceof HTMLButtonElement){ serializeOpts.submitter = inputEl }
     if(inputEl.getAttribute(this.binding("change"))){
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta}, [inputEl.name])
+      formData = serializeForm(inputEl.form, serializeOpts, [inputEl.name])
     } else {
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta})
+      formData = serializeForm(inputEl.form, serializeOpts)
     }
     if(DOM.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0){
       LiveUploader.trackFiles(inputEl, Array.from(inputEl.files))
@@ -1187,6 +1214,7 @@ export default class View {
       type: "form",
       event: phxEvent,
       value: formData,
+      meta: {_target: opts._target, ...meta},
       uploads: uploads,
       cid: cid
     }
@@ -1300,22 +1328,24 @@ export default class View {
         if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
           return this.undoRefs(ref, phxEvent)
         }
-        let meta = this.extractMeta(formEl)
-        let formData = serializeForm(formEl, {submitter, ...meta})
+        let meta = this.extractMeta(formEl, {}, opts.value)
+        let formData = serializeForm(formEl, {submitter})
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
           value: formData,
+          meta: meta,
           cid: cid
         }).then(({resp}) => onReply(resp))
       })
     } else if(!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))){
-      let meta = this.extractMeta(formEl)
-      let formData = serializeForm(formEl, {submitter, ...meta})
+      let meta = this.extractMeta(formEl, {}, opts.value)
+      let formData = serializeForm(formEl, {submitter})
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
         value: formData,
+        meta: meta,
         cid: cid
       }).then(({resp}) => onReply(resp))
     }

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -100,6 +100,7 @@ var PHX_RELOAD_STATUS = "__phoenix_reload_status__";
 var LOADER_TIMEOUT = 1;
 var MAX_CHILD_JOIN_ATTEMPTS = 3;
 var BEFORE_UNLOAD_LOADER_TIMEOUT = 200;
+var DISCONNECTED_TIMEOUT = 500;
 var BINDING_PREFIX = "phx-";
 var PUSH_TIMEOUT = 3e4;
 var DEBOUNCE_TRIGGER = "debounce-trigger";
@@ -515,12 +516,13 @@ var DOM = {
       case null:
         return callback();
       case "blur":
+        this.incCycle(el, "debounce-blur-cycle", () => {
+          if (asyncFilter()) {
+            callback();
+          }
+        });
         if (this.once(el, "debounce-blur")) {
-          el.addEventListener("blur", () => {
-            if (asyncFilter()) {
-              callback();
-            }
-          });
+          el.addEventListener("blur", () => this.triggerCycle(el, "debounce-blur-cycle"));
         }
         return;
       default:
@@ -3358,8 +3360,8 @@ var prependFormDataKey = (key, prefix) => {
   }
   return baseKey;
 };
-var serializeForm = (form, metadata, onlyNames = []) => {
-  const { submitter, ...meta } = metadata;
+var serializeForm = (form, opts, onlyNames = []) => {
+  const { submitter } = opts;
   let injectedElement;
   if (submitter && submitter.name) {
     const input = document.createElement("input");
@@ -3382,12 +3384,28 @@ var serializeForm = (form, metadata, onlyNames = []) => {
   });
   toRemove.forEach((key) => formData.delete(key));
   const params = new URLSearchParams();
-  let elements = Array.from(form.elements);
+  const { inputsUnused, onlyHiddenInputs } = Array.from(form.elements).reduce((acc, input) => {
+    const { inputsUnused: inputsUnused2, onlyHiddenInputs: onlyHiddenInputs2 } = acc;
+    const key = input.name;
+    if (!key) {
+      return acc;
+    }
+    if (inputsUnused2[key] === void 0) {
+      inputsUnused2[key] = true;
+    }
+    if (onlyHiddenInputs2[key] === void 0) {
+      onlyHiddenInputs2[key] = true;
+    }
+    const isUsed = dom_default.private(input, PHX_HAS_FOCUSED) || dom_default.private(input, PHX_HAS_SUBMITTED);
+    const isHidden = input.type === "hidden";
+    inputsUnused2[key] = inputsUnused2[key] && !isUsed;
+    onlyHiddenInputs2[key] = onlyHiddenInputs2[key] && isHidden;
+    return acc;
+  }, { inputsUnused: {}, onlyHiddenInputs: {} });
   for (let [key, val] of formData.entries()) {
     if (onlyNames.length === 0 || onlyNames.indexOf(key) >= 0) {
-      let inputs = elements.filter((input) => input.name === key);
-      let isUnused = !inputs.some((input) => dom_default.private(input, PHX_HAS_FOCUSED) || dom_default.private(input, PHX_HAS_SUBMITTED));
-      let hidden = inputs.every((input) => input.type === "hidden");
+      let isUnused = inputsUnused[key];
+      let hidden = onlyHiddenInputs[key];
       if (isUnused && !(submitter && submitter.name == key) && !hidden) {
         params.append(prependFormDataKey(key, "_unused_"), "");
       }
@@ -3397,9 +3415,6 @@ var serializeForm = (form, metadata, onlyNames = []) => {
   if (submitter && injectedElement) {
     submitter.parentElement.removeChild(injectedElement);
   }
-  for (let metaKey in meta) {
-    params.append(metaKey, meta[metaKey]);
-  }
   return params.toString();
 };
 var View = class _View {
@@ -3420,6 +3435,7 @@ var View = class _View {
     this.lastAckRef = null;
     this.childJoins = 0;
     this.loaderTimer = null;
+    this.disconnectedTimer = null;
     this.pendingDiffs = [];
     this.pendingForms = /* @__PURE__ */ new Set();
     this.redirect = false;
@@ -3528,6 +3544,7 @@ var View = class _View {
   }
   hideLoader() {
     clearTimeout(this.loaderTimer);
+    clearTimeout(this.disconnectedTimer);
     this.setContainerClasses(PHX_CONNECTED_CLASS);
     this.execAll(this.binding("connected"));
   }
@@ -3947,6 +3964,9 @@ var View = class _View {
     delete this.viewHooks[hookId];
   }
   applyPendingUpdates() {
+    if (this.liveSocket.hasPendingLink() && this.root.isMain()) {
+      return;
+    }
     this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
     this.pendingDiffs = [];
     this.eachChild((child) => child.applyPendingUpdates());
@@ -4102,7 +4122,12 @@ var View = class _View {
     }
     this.showLoader();
     this.setContainerClasses(...classes);
-    this.execAll(this.binding("disconnected"));
+    this.delayedDisconnected();
+  }
+  delayedDisconnected() {
+    this.disconnectedTimer = setTimeout(() => {
+      this.execAll(this.binding("disconnected"));
+    }, this.liveSocket.disconnectedTimeout);
   }
   wrapPush(callerPush, receives) {
     let latency = this.liveSocket.getLatencySim();
@@ -4392,14 +4417,15 @@ var View = class _View {
       ], phxEvent, "change", opts);
     };
     let formData;
-    let meta = this.extractMeta(inputEl.form);
+    let meta = this.extractMeta(inputEl.form, {}, opts.value);
+    let serializeOpts = {};
     if (inputEl instanceof HTMLButtonElement) {
-      meta.submitter = inputEl;
+      serializeOpts.submitter = inputEl;
     }
     if (inputEl.getAttribute(this.binding("change"))) {
-      formData = serializeForm(inputEl.form, { _target: opts._target, ...meta }, [inputEl.name]);
+      formData = serializeForm(inputEl.form, serializeOpts, [inputEl.name]);
     } else {
-      formData = serializeForm(inputEl.form, { _target: opts._target, ...meta });
+      formData = serializeForm(inputEl.form, serializeOpts);
     }
     if (dom_default.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0) {
       LiveUploader.trackFiles(inputEl, Array.from(inputEl.files));
@@ -4409,6 +4435,7 @@ var View = class _View {
       type: "form",
       event: phxEvent,
       value: formData,
+      meta: { _target: opts._target, ...meta },
       uploads,
       cid
     };
@@ -4507,22 +4534,24 @@ var View = class _View {
         if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
           return this.undoRefs(ref, phxEvent);
         }
-        let meta = this.extractMeta(formEl);
-        let formData = serializeForm(formEl, { submitter, ...meta });
+        let meta = this.extractMeta(formEl, {}, opts.value);
+        let formData = serializeForm(formEl, { submitter });
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
           value: formData,
+          meta,
           cid
         }).then(({ resp }) => onReply(resp));
       });
     } else if (!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))) {
-      let meta = this.extractMeta(formEl);
-      let formData = serializeForm(formEl, { submitter, ...meta });
+      let meta = this.extractMeta(formEl, {}, opts.value);
+      let formData = serializeForm(formEl, { submitter });
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
         value: formData,
+        meta,
         cid
       }).then(({ resp }) => onReply(resp));
     }
@@ -4742,6 +4771,7 @@ var LiveSocket = class {
     this.hooks = opts.hooks || {};
     this.uploaders = opts.uploaders || {};
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;
+    this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT;
     this.reloadWithJitterTimer = null;
     this.maxReloads = opts.maxReloads || MAX_RELOADS;
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;
@@ -4775,7 +4805,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.5";
+    return "1.0.7";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";