phoenix_live_view 0.18.3 → 0.18.5

package/assets/js/phoenix_live_view/dom.js

@@ -58,6 +58,11 @@ let DOM = {
     return node.id && DOM.private(node, "destroyed") ? true : false
   },
 
+  isExternalClick(e){
+    return(e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button === 1)
+      || e.target.getAttribute("target") === "_blank")
+  },
+
   markPhxChildDestroyed(el){
     if(this.isPhxChild(el)){ el.setAttribute(PHX_SESSION, "") }
     this.putPrivate(el, "destroyed", true)
@@ -231,7 +236,7 @@ let DOM = {
     let input = field && container.querySelector(`[id="${field}"], [name="${field}"], [name="${field}[]"]`)
     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)
     }
   },

package/assets/js/phoenix_live_view/dom_patch.js

@@ -176,7 +176,7 @@ export default class DOMPatch {
           DOM.discardError(targetContainer, toEl, phxFeedbackFor)
 
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
-          if(isFocusedFormEl){
+          if(isFocusedFormEl && fromEl.type !== "hidden"){
             this.trackBefore("updated", fromEl, toEl)
             DOM.mergeFocusedInput(fromEl, toEl)
             DOM.syncAttrsToProps(fromEl)
@@ -222,7 +222,7 @@ export default class DOMPatch {
     }
 
     if(externalFormTriggered){
-      liveSocket.disconnect()
+      liveSocket.unload()
       externalFormTriggered.submit()
     }
     return true

package/assets/js/phoenix_live_view/js.js

@@ -43,7 +43,7 @@ let JS = {
     view.withinTargets(phxTarget, (targetView, targetCtx) => {
       if(eventType === "change"){
         let {newCid, _target, callback} = args
-        _target = _target || (sourceEl instanceof HTMLInputElement ? sourceEl.name : undefined)
+        _target = _target || (DOM.isFormInput(sourceEl) ? sourceEl.name : undefined)
         if(_target){ pushOpts._target = _target }
         targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback)
       } else if(eventType === "submit"){

package/assets/js/phoenix_live_view/live_socket.js

@@ -210,8 +210,9 @@ export default class LiveSocket {
       } 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()
@@ -237,6 +238,14 @@ export default class LiveSocket {
 
   // private
 
+  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) }
 
   time(name, func){
@@ -345,12 +354,14 @@ export default class LiveSocket {
   channel(topic, params){ 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(){
@@ -360,7 +371,7 @@ export default class LiveSocket {
         let view = this.newRootView(rootEl)
         view.setHref(this.getHref())
         view.join()
-        if(rootEl.getAttribute(PHX_MAIN)){ this.main = view }
+        if(rootEl.hasAttribute(PHX_MAIN)){ this.main = view }
       }
       rootsFound = true
     })
@@ -491,9 +502,10 @@ export default class LiveSocket {
     this.boundTopLevelEvents = true
     // enter failsafe reload if server has gone away intentionally, such as "disconnect" broadcast
     this.socket.onClose(event => {
-      if(event && event.code === 1000 && this.main){
-        this.reloadWithJitter(this.main)
-      }
+      // unload when navigating href or form submit (such as for firefox)
+      if(event && event.code === 1001){ return this.unload() }
+      // failsafe reload if normal closure and we still have a main LV
+      if(event && event.code === 1000 && this.main){ return this.reloadWithJitter(this.main) }
     })
     document.body.addEventListener("click", function (){ }) // ensure all click events bubble for mobile Safari
     window.addEventListener("pageshow", e => {
@@ -621,7 +633,10 @@ export default class LiveSocket {
         this.clickStartedAtTarget = null
       }
       let phxEvent = target && target.getAttribute(click)
-      if(!phxEvent){ return }
+      if(!phxEvent){
+        if(!capture && e.target.href !== undefined && DOM.isExternalClick(e)){ this.unload() }
+        return
+      }
       if(target.getAttribute("href") === "#"){ e.preventDefault() }
 
       this.debounce(target, e, "click", () => {
@@ -739,7 +754,7 @@ export default class LiveSocket {
   historyRedirect(href, linkState, flash){
     // convert to full href if only path prefix
     if(!this.isConnected()){ return Browser.redirect(href, flash) }
-    if(/^\/[^\/]+.*$/.test(href)){
+    if(/^\/$|^\/[^\/]+.*$/.test(href)){
       let {protocol, host} = window.location
       href = `${protocol}//${host}${href}`
     }
@@ -778,6 +793,7 @@ export default class LiveSocket {
       if(!externalFormSubmitted && phxChange && !phxSubmit){
         externalFormSubmitted = true
         e.preventDefault()
+        this.unload()
         this.withinOwners(e.target, view => {
           view.disableForm(e.target)
           window.requestAnimationFrame(() => e.target.submit()) // safari needs next tick
@@ -787,7 +803,7 @@ export default class LiveSocket {
 
     this.on("submit", e => {
       let phxEvent = e.target.getAttribute(this.binding("submit"))
-      if(!phxEvent){ return }
+      if(!phxEvent){ return this.unload() }
       e.preventDefault()
       e.target.disabled = true
       this.withinOwners(e.target, view => {

package/assets/js/phoenix_live_view/view.js

@@ -119,7 +119,7 @@ export default class View {
     this.href = href
   }
 
-  isMain(){ return this.el.getAttribute(PHX_MAIN) !== null }
+  isMain(){ return this.el.hasAttribute(PHX_MAIN) }
 
   connectParams(liveReferer){
     let params = this.liveSocket.params(this.el)
@@ -228,9 +228,8 @@ export default class View {
   applyDiff(type, rawDiff, callback){
     this.log(type, () => ["", clone(rawDiff)])
     let {diff, reply, events, title} = Rendered.extract(rawDiff)
-    if(title){ DOM.putTitle(title) }
-
     callback({diff, reply, events})
+    if(title){ window.requestAnimationFrame(() => DOM.putTitle(title)) }
   }
 
   onJoin(resp){
@@ -553,6 +552,12 @@ export default class View {
   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){
@@ -580,11 +585,7 @@ export default class View {
     this.channel.onClose(reason => this.onClose(reason))
   }
 
-  destroyAllChildren(){
-    for(let id in this.root.children[this.id]){
-      this.getChildById(id).destroy()
-    }
-  }
+  destroyAllChildren(){ this.eachChild(child => child.destroy()) }
 
   onLiveRedirect(redir){
     let {to, kind, flash} = redir
@@ -1115,14 +1116,17 @@ export default class View {
   }
 
   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.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, () => {
       inputs.forEach(input => DOM.showError(input, phxFeedback))

package/assets/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "phoenix_live_view",
+  "version": "0.18.5",
+  "description": "The Phoenix LiveView JavaScript client.",
+  "license": "MIT",
+  "repository": {},
+  "scripts": {
+    "test": "jest",
+    "test.coverage": "jest --coverage",
+    "test.watch": "jest --watch"
+  },
+  "dependencies": {
+    "morphdom": "2.6.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.14.3",
+    "@babel/core": "7.14.3",
+    "@babel/preset-env": "7.14.2",
+    "eslint": "7.27.0",
+    "eslint-plugin-jest": "24.3.6",
+    "jest": "^27.0.1",
+    "phoenix": "1.5.9"
+  }
+}

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -302,6 +302,9 @@ var DOM = {
   isPhxDestroyed(node) {
     return node.id && DOM.private(node, "destroyed") ? true : false;
   },
+  isExternalClick(e) {
+    return e.ctrlKey || e.shiftKey || e.metaKey || e.button && e.button === 1 || e.target.getAttribute("target") === "_blank";
+  },
   markPhxChildDestroyed(el) {
     if (this.isPhxChild(el)) {
       el.setAttribute(PHX_SESSION, "");
@@ -476,7 +479,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);
     }
   },
@@ -1669,7 +1672,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);
@@ -1714,7 +1717,7 @@ var DOMPatch = class {
       });
     }
     if (externalFormTriggered) {
-      liveSocket.disconnect();
+      liveSocket.unload();
       externalFormTriggered.submit();
     }
     return true;
@@ -2084,7 +2087,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;
         }
@@ -2321,7 +2324,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);
@@ -2419,10 +2422,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;
@@ -2724,6 +2727,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) => {
@@ -2747,9 +2757,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;
@@ -3271,12 +3279,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));
@@ -3388,8 +3398,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();
@@ -3409,6 +3420,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);
   }
@@ -3522,12 +3544,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;
@@ -3536,7 +3562,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;
         }
       }
@@ -3662,8 +3688,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() {
@@ -3796,6 +3825,9 @@ var LiveSocket = class {
       }
       let phxEvent = target && target.getAttribute(click);
       if (!phxEvent) {
+        if (!capture && e.target.href !== void 0 && dom_default.isExternalClick(e)) {
+          this.unload();
+        }
         return;
       }
       if (target.getAttribute("href") === "#") {
@@ -3920,7 +3952,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}`;
     }
@@ -3954,6 +3986,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());
@@ -3963,7 +3996,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;