phoenix_live_view 0.17.2 → 0.17.3

package/priv/static/phoenix_live_view.esm.js

@@ -75,6 +75,7 @@ var COMPONENTS = "c";
 var EVENTS = "e";
 var REPLY = "r";
 var TITLE = "t";
+var TEMPLATES = "p";
 
 // js/phoenix_live_view/entry_uploader.js
 var EntryUploader = class {
@@ -126,7 +127,10 @@ var EntryUploader = class {
 
 // 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]");
@@ -1660,7 +1664,7 @@ var Rendered = class {
   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) {
@@ -1686,8 +1690,8 @@ var Rendered = class {
       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;
     }
@@ -1756,33 +1760,43 @@ var Rendered = class {
   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;
     }
@@ -1968,18 +1982,20 @@ var JS = {
       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 }) {
@@ -1997,37 +2013,45 @@ var JS = {
     }
   },
   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 {
@@ -2036,9 +2060,11 @@ var JS = {
     }
   },
   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", [[], []]);
@@ -2060,8 +2086,8 @@ var JS = {
     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;
@@ -2202,15 +2228,15 @@ var View = class {
   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}`);
@@ -2714,7 +2740,11 @@ var View = class {
   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;
@@ -2990,7 +3020,7 @@ var View = class {
     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];
       }
@@ -3152,9 +3182,9 @@ var LiveSocket = class {
   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) => {
@@ -3290,7 +3320,7 @@ var LiveSocket = class {
     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);
     }
@@ -3700,7 +3730,8 @@ var TransitionSet = class {
       this.pushPendingOp(callback);
     }
   }
-  addTransition(time, onDone) {
+  addTransition(time, onStart, onDone) {
+    onStart();
     let timer = setTimeout(() => {
       this.transitions.delete(timer);
       onDone();