phoenix_live_view 0.17.2 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.17.3 (2021-10-28)
+
+### Enhancements
+  - Support 3-tuple for JS class transitions to support staged animations where a transition class is applied with a starting and ending class
+  - Allow JS commands to be executed on DOM nodes outside of the LiveView container
+
+### Optimization
+  - Avoid duplicate statics inside comprehension. In previous versions, comprehensions were able to avoid duplication only the content in their root. Now we recursively traverse all comprehension nodes and send the static only once for the whole comprehension. This should massively reduce the cost of sending comprehensions over the wire
+
+### Bug fixes
+  - Fix HTML engine bug causing expressions to be duplicated or not rendered correctly
+  - Fix HTML engine bug causing slots to not be re-rendered when they should have
+  - Fix form recovery being sent to wrong target
+
 ## 0.17.2 (2021-10-22)
 
 ### Bug fixes
@@ -63,7 +77,7 @@ atom `:default`.
 #### LEEx templates in stateful LiveComponents
 
 Stateful LiveComponents (where an `:id` is given) must now return HEEx templates
-(`~H` sigil or `.heex` extension). LEEx temlates (`~L` sigil or `.leex` extension)
+(`~H` sigil or `.heex` extension). LEEx templates (`~L` sigil or `.leex` extension)
 are no longer supported. This addresses bugs and allows stateful components
 to be rendered more efficiently client-side.
 
@@ -302,6 +316,9 @@ Additionally on the client, the root LiveView element no longer exposes the
 LiveView module name, therefore the `phx-view` attribute is never set.
 Similarly, the `viewName` property of client hooks has been removed.
 
+Codebases calling a custom function `component/3` should rename it or specify its module to avoid a conflict,
+as LiveView introduces a macro with that name and it is special cased by the underlying engine.
+
 ### Enhancements
   - Introduce HEEx templates
   - Introduce `Phoenix.Component`

package/README.md

@@ -17,9 +17,14 @@ steps:
   * Use a declarative model to render HTML on the server
     over WebSockets with optional LongPolling fallback
 
-  * Smart templating and change tracking - after connected,
-    LiveView sends only what changed to the client, skipping
-    the template markup and reducing the payload
+  * A rich templating language, called HEEx, with support
+    for function components, slots, HTML validation, and more
+
+  * Smart change tracking - after connected, LiveView sends
+    only what changed to the client, skipping the template
+    markup and reducing the payload. This makes LiveView
+    payloads much smaller than server-rendered HTML and on
+    par with fine-tuned SPA applications
 
   * Live form validation with file upload support
 
@@ -27,9 +32,12 @@ steps:
     `phx-focus`, `phx-blur`, `phx-submit`, etc. `phx-hook` is
     included for the cases where you have to write JavaScript
 
-  * Code reuse via components, which break templates, state, and
-    event handling into reusable bits, which is essential in large
-    applications
+  * Perform optimistic updates and transitions via JavaScript
+    commands (`Phoenix.LiveView.JS`)
+
+  * Code reuse via stateful components, which break templates,
+    state, and event handling into reusable bits, which is essential
+    in large applications
 
   * Live navigation to enrich links and redirects to only load the
     minimum amount of content as users navigate between pages
@@ -106,14 +114,6 @@ anywhere else:
     sent over the wire. This is achievable thanks to Elixir's
     immutability and its ability to treat code as data.
 
-  * LiveView separates the static and dynamic parts of your templates.
-    When you first render a page, Phoenix LiveView renders and sends
-    the whole template to the browser. Then, for any new update, only
-    the modified dynamic content is resent. This alongside diff tracking
-    makes it so LiveView only sends a few bytes on every update, instead
-    of sending kilobytes on every other user interaction - which would
-    be detrimental to the user experience.
-
 ## Browser Support
 
 All current Chrome, Safari, Firefox, and MS Edge are supported.

package/assets/js/phoenix_live_view/constants.js

@@ -74,3 +74,4 @@ export const COMPONENTS = "c"
 export const EVENTS = "e"
 export const REPLY = "r"
 export const TITLE = "t"
+export const TEMPLATES = "p"

package/assets/js/phoenix_live_view/js.js

@@ -60,19 +60,21 @@ let JS = {
     }
   },
 
-  exec_transition(eventType, phxEvent, view, sourceEl, {time, to, names}){
+  exec_transition(eventType, phxEvent, view, sourceEl, {time, to, transition}){
     let els = to ? DOM.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.all(document, to, el => this.toggle(eventType, view, el, display, ins || [], outs || [], time))
+      DOM.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)
     }
   },
 
@@ -95,37 +97,45 @@ let JS = {
   // utils for commands
 
   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.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.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.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 {
@@ -135,9 +145,11 @@ let 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.getSticky(el, "classes", [[], []])
@@ -161,8 +173,8 @@ let JS = {
     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)
   }
 }
 

package/assets/js/phoenix_live_view/live_socket.js

@@ -232,8 +232,8 @@ export default class LiveSocket {
     this.transitions.after(callback)
   }
 
-  transition(time, onDone = function(){}){
-    this.transitions.addTransition(time, onDone)
+  transition(time, onStart, onDone = function(){}){
+    this.transitions.addTransition(time, onStart, onDone)
   }
 
   onChannel(channel, event, cb){
@@ -369,7 +369,7 @@ export default class LiveSocket {
   }
 
   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) }
   }
 
@@ -775,7 +775,8 @@ class TransitionSet {
     }
   }
 
-  addTransition(time, onDone){
+  addTransition(time, onStart, onDone){
+    onStart()
     let timer = setTimeout(() => {
       this.transitions.delete(timer)
       onDone()

package/assets/js/phoenix_live_view/rendered.js

@@ -1,6 +1,7 @@
 import {
   COMPONENTS,
   DYNAMICS,
+  TEMPLATES,
   EVENTS,
   PHX_COMPONENT,
   PHX_SKIP,
@@ -39,7 +40,7 @@ export default class Rendered {
   recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids){
     onlyCids = onlyCids ? new Set(onlyCids) : null
     let output = {buffer: "", components: components, onlyCids: onlyCids}
-    this.toOutputBuffer(rendered, output)
+    this.toOutputBuffer(rendered, null, output)
     return output.buffer
   }
 
@@ -66,7 +67,7 @@ export default class Rendered {
         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
     }
   }
@@ -143,35 +144,46 @@ export default class Rendered {
 
   isNewFingerprint(diff = {}){ return !!diff[STATIC] }
 
-  toOutputBuffer(rendered, output){
-    if(rendered[DYNAMICS]){ return this.comprehensionToBuffer(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, 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
     }

package/assets/js/phoenix_live_view/utils.js

@@ -6,7 +6,10 @@ import EntryUploader from "./entry_uploader"
 
 export let logError = (msg, obj) => console.error && console.error(msg, obj)
 
-export let isCid = (cid) => typeof(cid) === "number"
+export let isCid = (cid) => {
+  let type = typeof(cid)
+  return type === "number" || (type === "string" && /^(0|[1-9]\d*)$/.test(cid))
+}
 
 export function detectDuplicateIds(){
   let ids = new Set()

package/assets/js/phoenix_live_view/view.js

@@ -190,8 +190,8 @@ export default class View {
     this.liveSocket.log(this, kind, msgCallback)
   }
 
-  transition(time, onDone = function(){}){
-    this.liveSocket.transition(time, onDone)
+  transition(time, onStart, onDone = function(){}){
+    this.liveSocket.transition(time, onStart, onDone)
   }
 
   withinTargets(phxTarget, callback){
@@ -199,7 +199,7 @@ export default class View {
       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.findComponentNodeList(this.el, phxTarget)
       if(targets.length === 0){
         logError(`no component found matching phx-target of ${phxTarget}`)
@@ -716,9 +716,12 @@ export default class View {
   }
 
   targetComponentID(target, targetCtx){
-    if(isCid(targetCtx)){
-      return targetCtx
-    } else if(target.getAttribute(this.binding("target"))){
+    if(isCid(targetCtx)){ return targetCtx }
+
+    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
@@ -1008,7 +1011,7 @@ export default class View {
         .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]
           }

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -88,6 +88,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 {
@@ -139,7 +140,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]");
@@ -1673,7 +1677,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) {
@@ -1699,8 +1703,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;
     }
@@ -1769,33 +1773,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;
     }
@@ -1981,18 +1995,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 }) {
@@ -2010,37 +2026,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 {
@@ -2049,9 +2073,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", [[], []]);
@@ -2073,8 +2099,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;
@@ -2215,15 +2241,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}`);
@@ -2727,7 +2753,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;
@@ -3003,7 +3033,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];
       }
@@ -3165,9 +3195,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) => {
@@ -3303,7 +3333,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);
     }
@@ -3713,7 +3743,8 @@ var TransitionSet = class {
       this.pushPendingOp(callback);
     }
   }
-  addTransition(time, onDone) {
+  addTransition(time, onStart, onDone) {
+    onStart();
     let timer = setTimeout(() => {
       this.transitions.delete(timer);
       onDone();