phoenix_live_view 1.0.0 → 1.0.2

package/README.md

@@ -62,6 +62,8 @@ Also follow these announcements from the Phoenix team on LiveView for more examp
 
   * [Build a real-time Twitter clone with LiveView](https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5)
 
+  * [Build a real-time Twitch clone with LiveView and Elixir WebRTC](https://www.youtube.com/watch?v=jziOb2Edfzk)
+
   * [Initial announcement](https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript)
 
 ## Component systems
@@ -74,7 +76,7 @@ community at different stages of development:
 
 * [Doggo](https://github.com/woylie/doggo): Headless UI components for Phoenix
 
-* [Petal Components](https://github.com/petalframework/petal_components): Phoenix + Live View HEEX Components 
+* [Petal Components](https://github.com/petalframework/petal_components): Phoenix + Live View HEEX Components
 
 * [PrimerLive](https://github.com/ArthurClemens/primer_live): An implementation of GitHub's Primer Design System using Phoenix LiveView
 

package/assets/js/phoenix_live_view/dom.js

@@ -467,7 +467,7 @@ let DOM = {
   isTextualInput(el){ return FOCUSABLE_INPUTS.indexOf(el.type) >= 0 },
 
   isNowTriggerFormExternal(el, phxTriggerExternal){
-    return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null
+    return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null && document.body.contains(el)
   },
 
   cleanChildNodes(container, phxUpdate){

package/assets/js/phoenix_live_view/dom_patch.js

@@ -30,6 +30,7 @@ export default class DOMPatch {
     let focused = liveSocket.getActiveElement()
     let {selectionStart, selectionEnd} = focused && DOM.hasSelectionRange(focused) ? focused : {}
     let phxUpdate = liveSocket.binding(PHX_UPDATE)
+    let externalFormTriggered = null
 
     morphdom(container, clonedTree, {
       childrenOnly: false,
@@ -42,9 +43,19 @@ export default class DOMPatch {
           DOM.mergeFocusedInput(fromEl, toEl)
           return false
         }
+        if(DOM.isNowTriggerFormExternal(toEl, liveSocket.binding(PHX_TRIGGER_ACTION))){
+          externalFormTriggered = toEl
+        }
       }
     })
 
+    if(externalFormTriggered){
+      liveSocket.unload()
+      // use prototype's submit in case there's a form control with name or id of "submit"
+      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
+      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered)
+    }
+
     liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
   }
 
@@ -228,7 +239,7 @@ export default class DOMPatch {
             return false
           }
           if(fromEl.type === "number" && (fromEl.validity && fromEl.validity.badInput)){ return false }
-          // If the element has  PHX_REF_SRC, it is loading or locked and awaiting an ack.
+          // If the element has PHX_REF_SRC, it is loading or locked and awaiting an ack.
           // If it's locked, we clone the fromEl tree and instruct morphdom to use
           // the cloned tree as the source of the morph for this branch from here on out.
           // We keep a reference to the cloned tree in the element's private data, and

package/assets/js/phoenix_live_view/js.js

@@ -65,7 +65,7 @@ let JS = {
     let pushOpts = {loading, value, target, page_loading: !!page_loading}
     let targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl
     let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc
-    view.withinTargets(phxTarget, (targetView, targetCtx) => {
+    const handler = (targetView, targetCtx) => {
       if(!targetView.isConnected()){ return }
       if(eventType === "change"){
         let {newCid, _target} = args
@@ -78,7 +78,14 @@ let JS = {
       } else {
         targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts, callback)
       }
-    })
+    }
+    // in case of formRecovery, targetView and targetCtx are passed as argument
+    // as they are looked up in a template element, not the real DOM
+    if(args.targetView && args.targetCtx){
+      handler(args.targetView, args.targetCtx)
+    } else {
+      view.withinTargets(phxTarget, handler)
+    }
   },
 
   exec_navigate(e, eventType, phxEvent, view, sourceEl, el, {href, replace}){

package/assets/js/phoenix_live_view/live_socket.js

@@ -362,7 +362,11 @@ export default class LiveSocket {
       view.setHref(this.getHref())
       view.joinDead()
       if(!this.main){ this.main = view }
-      window.requestAnimationFrame(() => view.execNewMounted())
+      window.requestAnimationFrame(() => {
+        view.execNewMounted()
+        // restore scroll position when navigating from an external / non-live page
+        this.maybeScroll(history.state?.scroll)
+      })
     }
   }
 

package/assets/js/phoenix_live_view/view.js

@@ -54,6 +54,7 @@ import DOMPatch from "./dom_patch"
 import LiveUploader from "./live_uploader"
 import Rendered from "./rendered"
 import ViewHook from "./view_hook"
+import JS from "./js"
 
 export let prependFormDataKey = (key, prefix) => {
   let isArray = key.endsWith("[]")
@@ -1413,10 +1414,17 @@ export default class View {
     this.withinTargets(phxTarget, (targetView, targetCtx) => {
       const cid = this.targetComponentID(newForm, targetCtx)
       pending++
-      targetView.pushInput(input, targetCtx, cid, phxEvent, {_target: input.name}, () => {
-        pending--
-        if(pending === 0){ callback() }
-      })
+      let e = new CustomEvent("phx:form-recovery", {detail: {sourceElement: oldForm}})
+      JS.exec(e, "change", phxEvent, this, input, ["push", {
+        _target: input.name,
+        targetView,
+        targetCtx,
+        newCid: cid,
+        callback: () => {
+          pending--
+          if(pending === 0){ callback() }
+        }
+      }])
     }, templateDom, templateDom)
   }
 

package/assets/package.json

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

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -727,7 +727,7 @@ var DOM = {
     return FOCUSABLE_INPUTS.indexOf(el.type) >= 0;
   },
   isNowTriggerFormExternal(el, phxTriggerExternal) {
-    return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null;
+    return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null && document.body.contains(el);
   },
   cleanChildNodes(container, phxUpdate) {
     if (DOM.isPhxUpdate(container, phxUpdate, ["append", "prepend"])) {
@@ -1942,6 +1942,7 @@ var DOMPatch = class {
     let focused = liveSocket.getActiveElement();
     let { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
     let phxUpdate = liveSocket.binding(PHX_UPDATE);
+    let externalFormTriggered = null;
     morphdom_esm_default(container, clonedTree, {
       childrenOnly: false,
       onBeforeElUpdated: (fromEl, toEl) => {
@@ -1956,8 +1957,15 @@ var DOMPatch = class {
           dom_default.mergeFocusedInput(fromEl, toEl);
           return false;
         }
+        if (dom_default.isNowTriggerFormExternal(toEl, liveSocket.binding(PHX_TRIGGER_ACTION))) {
+          externalFormTriggered = toEl;
+        }
       }
     });
+    if (externalFormTriggered) {
+      liveSocket.unload();
+      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered);
+    }
     liveSocket.silenceEvents(() => dom_default.restoreFocus(focused, selectionStart, selectionEnd));
   }
   constructor(view, container, id, html, streams, targetCID) {
@@ -2754,7 +2762,7 @@ var JS = {
     let pushOpts = { loading, value, target, page_loading: !!page_loading };
     let targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl;
     let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc;
-    view.withinTargets(phxTarget, (targetView, targetCtx) => {
+    const handler = (targetView, targetCtx) => {
       if (!targetView.isConnected()) {
         return;
       }
@@ -2771,7 +2779,12 @@ var JS = {
       } else {
         targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts, callback);
       }
-    });
+    };
+    if (args.targetView && args.targetCtx) {
+      handler(args.targetView, args.targetCtx);
+    } else {
+      view.withinTargets(phxTarget, handler);
+    }
   },
   exec_navigate(e, eventType, phxEvent, view, sourceEl, el, { href, replace }) {
     view.liveSocket.historyRedirect(e, href, replace ? "replace" : "push", null, sourceEl);
@@ -4584,12 +4597,19 @@ var View = class _View {
     this.withinTargets(phxTarget, (targetView, targetCtx) => {
       const cid = this.targetComponentID(newForm, targetCtx);
       pending++;
-      targetView.pushInput(input, targetCtx, cid, phxEvent, { _target: input.name }, () => {
-        pending--;
-        if (pending === 0) {
-          callback();
+      let e = new CustomEvent("phx:form-recovery", { detail: { sourceElement: oldForm } });
+      js_default.exec(e, "change", phxEvent, this, input, ["push", {
+        _target: input.name,
+        targetView,
+        targetCtx,
+        newCid: cid,
+        callback: () => {
+          pending--;
+          if (pending === 0) {
+            callback();
+          }
         }
-      });
+      }]);
     }, templateDom, templateDom);
   }
   pushLinkPatch(e, href, targetEl, callback) {
@@ -4731,7 +4751,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.0";
+    return "1.0.2";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -4917,7 +4937,10 @@ var LiveSocket = class {
       if (!this.main) {
         this.main = view;
       }
-      window.requestAnimationFrame(() => view.execNewMounted());
+      window.requestAnimationFrame(() => {
+        view.execNewMounted();
+        this.maybeScroll(history.state?.scroll);
+      });
     }
   }
   joinRootViews() {