phoenix_live_view 0.18.2 → 0.18.4

package/priv/static/phoenix_live_view.esm.js

@@ -463,7 +463,7 @@ var DOM = {
     if (!input) {
       return;
     }
-    if (!(this.private(input, PHX_HAS_FOCUSED) || this.private(input.form, PHX_HAS_SUBMITTED))) {
+    if (!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))) {
       el.classList.add(PHX_NO_FEEDBACK_CLASS);
     }
   },
@@ -1656,7 +1656,7 @@ var DOMPatch = class {
           dom_default.copyPrivates(toEl, fromEl);
           dom_default.discardError(targetContainer, toEl, phxFeedbackFor);
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
-          if (isFocusedFormEl) {
+          if (isFocusedFormEl && fromEl.type !== "hidden") {
             this.trackBefore("updated", fromEl, toEl);
             dom_default.mergeFocusedInput(fromEl, toEl);
             dom_default.syncAttrsToProps(fromEl);
@@ -1701,7 +1701,7 @@ var DOMPatch = class {
       });
     }
     if (externalFormTriggered) {
-      liveSocket.disconnect();
+      liveSocket.unload();
       externalFormTriggered.submit();
     }
     return true;
@@ -2071,7 +2071,7 @@ var JS = {
     view.withinTargets(phxTarget, (targetView, targetCtx) => {
       if (eventType === "change") {
         let { newCid, _target, callback } = args;
-        _target = _target || (sourceEl instanceof HTMLInputElement ? sourceEl.name : void 0);
+        _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);
         if (_target) {
           pushOpts._target = _target;
         }
@@ -2308,7 +2308,7 @@ var View = class {
     this.href = href;
   }
   isMain() {
-    return this.el.getAttribute(PHX_MAIN) !== null;
+    return this.el.hasAttribute(PHX_MAIN);
   }
   connectParams(liveReferer) {
     let params = this.liveSocket.params(this.el);
@@ -2406,10 +2406,10 @@ var View = class {
   applyDiff(type, rawDiff, callback) {
     this.log(type, () => ["", clone(rawDiff)]);
     let { diff, reply, events, title } = Rendered.extract(rawDiff);
+    callback({ diff, reply, events });
     if (title) {
-      dom_default.putTitle(title);
+      window.requestAnimationFrame(() => dom_default.putTitle(title));
     }
-    callback({ diff, reply, events });
   }
   onJoin(resp) {
     let { rendered, container } = resp;
@@ -2711,6 +2711,13 @@ var View = class {
   applyPendingUpdates() {
     this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
     this.pendingDiffs = [];
+    this.eachChild((child) => child.applyPendingUpdates());
+  }
+  eachChild(callback) {
+    let children = this.root.children[this.id] || {};
+    for (let id in children) {
+      callback(this.getChildById(id));
+    }
   }
   onChannel(event, cb) {
     this.liveSocket.onChannel(this.channel, event, (resp) => {
@@ -2734,9 +2741,7 @@ var View = class {
     this.channel.onClose((reason) => this.onClose(reason));
   }
   destroyAllChildren() {
-    for (let id in this.root.children[this.id]) {
-      this.getChildById(id).destroy();
-    }
+    this.eachChild((child) => child.destroy());
   }
   onLiveRedirect(redir) {
     let { to, kind, flash } = redir;
@@ -3258,12 +3263,14 @@ var View = class {
     }
   }
   ownsElement(el) {
-    return this.isDead || el.getAttribute(PHX_PARENT_ID) === this.id || maybe(el.closest(PHX_VIEW_SELECTOR), (node) => node.id) === this.id;
+    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 = {}) {
     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, () => {
       inputs.forEach((input) => dom_default.showError(input, phxFeedback));
@@ -3375,8 +3382,9 @@ var LiveSocket = class {
       } else if (this.main) {
         this.socket.connect();
       } else {
-        this.joinDeadView();
+        this.bindTopLevelEvents({ dead: true });
       }
+      this.joinDeadView();
     };
     if (["complete", "loaded", "interactive"].indexOf(document.readyState) >= 0) {
       doConnect();
@@ -3396,6 +3404,17 @@ var LiveSocket = class {
   execJS(el, encodedJS, eventType = null) {
     this.owner(el, (view) => js_default.exec(eventType, encodedJS, view, el));
   }
+  unload() {
+    if (this.unloaded) {
+      return;
+    }
+    if (this.main && this.isConnected()) {
+      this.log(this.main, "socket", () => ["disconnect for page nav"]);
+    }
+    this.unloaded = true;
+    this.destroyAllViews();
+    this.disconnect();
+  }
   triggerDOM(kind, args) {
     this.domCallbacks[kind](...args);
   }
@@ -3509,12 +3528,16 @@ var LiveSocket = class {
     return this.socket.channel(topic, params);
   }
   joinDeadView() {
-    this.bindTopLevelEvents({ dead: true });
-    let view = this.newRootView(document.body);
-    view.setHref(this.getHref());
-    view.joinDead();
-    this.main = view;
-    window.requestAnimationFrame(() => view.execNewMounted());
+    let body = document.body;
+    if (body && !this.isPhxView(body) && !this.isPhxView(document.firstElementChild)) {
+      let view = this.newRootView(body);
+      view.setHref(this.getHref());
+      view.joinDead();
+      if (!this.main) {
+        this.main = view;
+      }
+      window.requestAnimationFrame(() => view.execNewMounted());
+    }
   }
   joinRootViews() {
     let rootsFound = false;
@@ -3523,7 +3546,7 @@ var LiveSocket = class {
         let view = this.newRootView(rootEl);
         view.setHref(this.getHref());
         view.join();
-        if (rootEl.getAttribute(PHX_MAIN)) {
+        if (rootEl.hasAttribute(PHX_MAIN)) {
           this.main = view;
         }
       }
@@ -3649,8 +3672,11 @@ var LiveSocket = class {
     }
     this.boundTopLevelEvents = true;
     this.socket.onClose((event) => {
+      if (event && event.code === 1001) {
+        return this.unload();
+      }
       if (event && event.code === 1e3 && this.main) {
-        this.reloadWithJitter(this.main);
+        return this.reloadWithJitter(this.main);
       }
     });
     document.body.addEventListener("click", function() {
@@ -3783,6 +3809,9 @@ var LiveSocket = class {
       }
       let phxEvent = target && target.getAttribute(click);
       if (!phxEvent) {
+        if (!capture && e.target.href !== void 0) {
+          this.unload();
+        }
         return;
       }
       if (target.getAttribute("href") === "#") {
@@ -3907,7 +3936,7 @@ var LiveSocket = class {
     if (!this.isConnected()) {
       return browser_default.redirect(href, flash);
     }
-    if (/^\/[^\/]+.*$/.test(href)) {
+    if (/^\/$|^\/[^\/]+.*$/.test(href)) {
       let { protocol, host } = window.location;
       href = `${protocol}//${host}${href}`;
     }
@@ -3941,6 +3970,7 @@ var LiveSocket = class {
       if (!externalFormSubmitted && phxChange && !phxSubmit) {
         externalFormSubmitted = true;
         e.preventDefault();
+        this.unload();
         this.withinOwners(e.target, (view) => {
           view.disableForm(e.target);
           window.requestAnimationFrame(() => e.target.submit());
@@ -3950,7 +3980,7 @@ var LiveSocket = class {
     this.on("submit", (e) => {
       let phxEvent = e.target.getAttribute(this.binding("submit"));
       if (!phxEvent) {
-        return;
+        return this.unload();
       }
       e.preventDefault();
       e.target.disabled = true;