phoenix_live_view 0.17.2 → 0.17.3

package/priv/static/phoenix_live_view.js

@@ -105,6 +105,7 @@ var LiveView = (() => {
   var EVENTS = "e";
   var REPLY = "r";
   var TITLE = "t";
+  var TEMPLATES = "p";
 
   // js/phoenix_live_view/entry_uploader.js
   var EntryUploader = class {
@@ -156,7 +157,10 @@ var LiveView = (() => {
 
   // js/phoenix_live_view/utils.js
   var logError = (msg, obj) => console.error && console.error(msg, obj);
-  var isCid = (cid) => typeof cid === "number";
+  var isCid = (cid) => {
+    let type = typeof cid;
+    return type === "number" || type === "string" && /^(0|[1-9]\d*)$/.test(cid);
+  };
   function detectDuplicateIds() {
     let ids = new Set();
     let elems = document.querySelectorAll("*[id]");
@@ -1690,7 +1694,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids) {
       onlyCids = onlyCids ? new Set(onlyCids) : null;
       let output = { buffer: "", components, onlyCids };
-      this.toOutputBuffer(rendered, output);
+      this.toOutputBuffer(rendered, null, output);
       return output.buffer;
     }
     componentCIDs(diff) {
@@ -1716,8 +1720,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         for (let cid in newc) {
           newc[cid] = this.cachedFindComponent(cid, newc[cid], oldc, newc, cache);
         }
-        for (var key in newc) {
-          oldc[key] = newc[key];
+        for (let cid in newc) {
+          oldc[cid] = newc[cid];
         }
         diff[COMPONENTS] = newc;
       }
@@ -1786,33 +1790,43 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     isNewFingerprint(diff = {}) {
       return !!diff[STATIC];
     }
-    toOutputBuffer(rendered, output) {
+    templateStatic(part, templates) {
+      if (typeof part === "number") {
+        return templates[part];
+      } else {
+        return part;
+      }
+    }
+    toOutputBuffer(rendered, templates, output) {
       if (rendered[DYNAMICS]) {
-        return this.comprehensionToBuffer(rendered, output);
+        return this.comprehensionToBuffer(rendered, templates, output);
       }
       let { [STATIC]: statics } = rendered;
+      statics = this.templateStatic(statics, templates);
       output.buffer += statics[0];
       for (let i = 1; i < statics.length; i++) {
-        this.dynamicToBuffer(rendered[i - 1], output);
+        this.dynamicToBuffer(rendered[i - 1], templates, output);
         output.buffer += statics[i];
       }
     }
-    comprehensionToBuffer(rendered, output) {
+    comprehensionToBuffer(rendered, templates, output) {
       let { [DYNAMICS]: dynamics, [STATIC]: statics } = rendered;
+      statics = this.templateStatic(statics, templates);
+      let compTemplates = rendered[TEMPLATES];
       for (let d = 0; d < dynamics.length; d++) {
         let dynamic = dynamics[d];
         output.buffer += statics[0];
         for (let i = 1; i < statics.length; i++) {
-          this.dynamicToBuffer(dynamic[i - 1], output);
+          this.dynamicToBuffer(dynamic[i - 1], compTemplates, output);
           output.buffer += statics[i];
         }
       }
     }
-    dynamicToBuffer(rendered, output) {
+    dynamicToBuffer(rendered, templates, output) {
       if (typeof rendered === "number") {
         output.buffer += this.recursiveCIDToString(output.components, rendered, output.onlyCids);
       } else if (isObject(rendered)) {
-        this.toOutputBuffer(rendered, output);
+        this.toOutputBuffer(rendered, templates, output);
       } else {
         output.buffer += rendered;
       }
@@ -1998,18 +2012,20 @@ within:
         this.addOrRemoveClasses(sourceEl, [], names, transition, time, view);
       }
     },
-    exec_transition(eventType, phxEvent, view, sourceEl, { time, to, names }) {
+    exec_transition(eventType, phxEvent, view, sourceEl, { time, to, transition }) {
       let els = to ? dom_default.all(document, to) : [sourceEl];
+      let [transition_start, running, transition_end] = transition;
       els.forEach((el) => {
-        this.addOrRemoveClasses(el, names, []);
-        view.transition(time, () => this.addOrRemoveClasses(el, [], names));
+        let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(running), []);
+        let onDone = () => this.addOrRemoveClasses(el, transition_end, transition_start.concat(running));
+        view.transition(time, onStart, onDone);
       });
     },
     exec_toggle(eventType, phxEvent, view, sourceEl, { to, display, ins, outs, time }) {
       if (to) {
-        dom_default.all(document, to, (el) => this.toggle(eventType, view, el, display, ins || [], outs || [], time));
+        dom_default.all(document, to, (el) => this.toggle(eventType, view, el, display, ins, outs, time));
       } else {
-        this.toggle(eventType, view, sourceEl, display, ins || [], outs || [], time);
+        this.toggle(eventType, view, sourceEl, display, ins, outs, time);
       }
     },
     exec_show(eventType, phxEvent, view, sourceEl, { to, display, transition, time }) {
@@ -2027,37 +2043,45 @@ within:
       }
     },
     show(eventType, view, el, display, transition, time) {
-      let isVisible = this.isVisible(el);
-      if (transition.length > 0 && !isVisible) {
-        this.toggle(eventType, view, el, display, transition, [], time);
-      } else if (!isVisible) {
-        this.toggle(eventType, view, el, display, [], [], null);
+      if (!this.isVisible(el)) {
+        this.toggle(eventType, view, el, display, transition, null, time);
       }
     },
     hide(eventType, view, el, display, transition, time) {
-      let isVisible = this.isVisible(el);
-      if (transition.length > 0 && isVisible) {
-        this.toggle(eventType, view, el, display, [], transition, time);
-      } else if (isVisible) {
-        this.toggle(eventType, view, el, display, [], [], time);
+      if (this.isVisible(el)) {
+        this.toggle(eventType, view, el, display, null, transition, time);
       }
     },
-    toggle(eventType, view, el, display, in_classes, out_classes, time) {
-      if (in_classes.length > 0 || out_classes.length > 0) {
+    toggle(eventType, view, el, display, ins, outs, time) {
+      let [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []];
+      let [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []];
+      if (inClasses.length > 0 || outClasses.length > 0) {
         if (this.isVisible(el)) {
-          this.addOrRemoveClasses(el, out_classes, in_classes);
-          view.transition(time, () => {
+          let onStart = () => {
+            this.addOrRemoveClasses(el, outStartClasses, inClasses.concat(inStartClasses).concat(inEndClasses));
+            window.requestAnimationFrame(() => {
+              this.addOrRemoveClasses(el, outClasses, []);
+              window.requestAnimationFrame(() => this.addOrRemoveClasses(el, outEndClasses, outStartClasses));
+            });
+          };
+          view.transition(time, onStart, () => {
+            this.addOrRemoveClasses(el, [], outClasses.concat(outEndClasses));
             dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = "none");
-            this.addOrRemoveClasses(el, [], out_classes);
           });
         } else {
           if (eventType === "remove") {
             return;
           }
-          this.addOrRemoveClasses(el, in_classes, out_classes);
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = display || "block");
-          view.transition(time, () => {
-            this.addOrRemoveClasses(el, [], in_classes);
+          let onStart = () => {
+            this.addOrRemoveClasses(el, inStartClasses, outClasses.concat(outStartClasses).concat(outEndClasses));
+            dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = display || "block");
+            window.requestAnimationFrame(() => {
+              this.addOrRemoveClasses(el, inClasses, []);
+              window.requestAnimationFrame(() => this.addOrRemoveClasses(el, inEndClasses, inStartClasses));
+            });
+          };
+          view.transition(time, onStart, () => {
+            this.addOrRemoveClasses(el, [], inClasses.concat(inEndClasses));
           });
         }
       } else {
@@ -2066,9 +2090,11 @@ within:
       }
     },
     addOrRemoveClasses(el, adds, removes, transition, time, view) {
-      if (transition && transition.length > 0) {
-        this.addOrRemoveClasses(el, transition, []);
-        return view.transition(time, () => this.addOrRemoveClasses(el, adds, removes.concat(transition)));
+      let [transition_run, transition_start, transition_end] = transition || [[], [], []];
+      if (transition_run.length > 0) {
+        let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(transition_run), []);
+        let onDone = () => this.addOrRemoveClasses(el, adds.concat(transition_end), removes.concat(transition_run).concat(transition_start));
+        return view.transition(time, onStart, onDone);
       }
       window.requestAnimationFrame(() => {
         let [prevAdds, prevRemoves] = dom_default.getSticky(el, "classes", [[], []]);
@@ -2090,8 +2116,8 @@ within:
       let style = window.getComputedStyle(el);
       return !(style.opacity === 0 || style.display === "none");
     },
-    isToggledOut(el, out_classes) {
-      return !this.isVisible(el) || this.hasAllClasses(el, out_classes);
+    isToggledOut(el, outClasses) {
+      return !this.isVisible(el) || this.hasAllClasses(el, outClasses);
     }
   };
   var js_default = JS;
@@ -2232,15 +2258,15 @@ within:
     log(kind, msgCallback) {
       this.liveSocket.log(this, kind, msgCallback);
     }
-    transition(time, onDone = function() {
+    transition(time, onStart, onDone = function() {
     }) {
-      this.liveSocket.transition(time, onDone);
+      this.liveSocket.transition(time, onStart, onDone);
     }
     withinTargets(phxTarget, callback) {
       if (phxTarget instanceof HTMLElement || phxTarget instanceof SVGElement) {
         return this.liveSocket.owner(phxTarget, (view) => callback(view, phxTarget));
       }
-      if (typeof phxTarget === "number" || /^(0|[1-9]\d*)$/.test(phxTarget)) {
+      if (isCid(phxTarget)) {
         let targets = dom_default.findComponentNodeList(this.el, phxTarget);
         if (targets.length === 0) {
           logError(`no component found matching phx-target of ${phxTarget}`);
@@ -2744,7 +2770,11 @@ within:
     targetComponentID(target, targetCtx) {
       if (isCid(targetCtx)) {
         return targetCtx;
-      } else if (target.getAttribute(this.binding("target"))) {
+      }
+      let cidOrSelector = target.getAttribute(this.binding("target"));
+      if (isCid(cidOrSelector)) {
+        return parseInt(cidOrSelector);
+      } else if (targetCtx && cidOrSelector !== null) {
         return this.closestComponentID(targetCtx);
       } else {
         return null;
@@ -3020,7 +3050,7 @@ within:
       return dom_default.all(this.el, `form[${phxChange}]`).filter((form) => form.id && this.ownsElement(form)).filter((form) => form.elements.length > 0).filter((form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore").map((form) => {
         let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${form.getAttribute(phxChange)}"]`);
         if (newForm) {
-          return [form, newForm, this.componentID(newForm)];
+          return [form, newForm, this.targetComponentID(newForm)];
         } else {
           return [form, null, null];
         }
@@ -3182,9 +3212,9 @@ within:
     requestDOMUpdate(callback) {
       this.transitions.after(callback);
     }
-    transition(time, onDone = function() {
+    transition(time, onStart, onDone = function() {
     }) {
-      this.transitions.addTransition(time, onDone);
+      this.transitions.addTransition(time, onStart, onDone);
     }
     onChannel(channel, event, cb) {
       channel.on(event, (data) => {
@@ -3320,7 +3350,7 @@ within:
       return view;
     }
     owner(childEl, callback) {
-      let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), (el) => this.getViewByEl(el));
+      let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), (el) => this.getViewByEl(el)) || this.main;
       if (view) {
         callback(view);
       }
@@ -3730,7 +3760,8 @@ within:
         this.pushPendingOp(callback);
       }
     }
-    addTransition(time, onDone) {
+    addTransition(time, onStart, onDone) {
+      onStart();
       let timer = setTimeout(() => {
         this.transitions.delete(timer);
         onDone();