phoenix_live_view 1.1.2 → 1.1.4

package/assets/js/phoenix_live_view/dom_patch.js

@@ -85,11 +85,28 @@ export default class DOMPatch {
   }
 
   perform(isJoinPatch) {
-    const { view, liveSocket, html, container, targetContainer } = this;
-    if (this.isCIDPatch() && !targetContainer) {
+    const { view, liveSocket, html, container } = this;
+    let targetContainer = this.targetContainer;
+
+    if (this.isCIDPatch() && !this.targetContainer) {
       return;
     }
 
+    if (this.isCIDPatch()) {
+      // https://github.com/phoenixframework/phoenix_live_view/pull/3942
+      // we need to ensure that no parent is locked
+      const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);
+      if (closestLock) {
+        const clonedTree = DOM.private(closestLock, PHX_REF_LOCK);
+        if (clonedTree) {
+          // if a parent is locked with a cloned tree, we need to patch the cloned tree instead
+          targetContainer = clonedTree.querySelector(
+            `[data-phx-component="${this.targetCID}"]`,
+          );
+        }
+      }
+    }
+
     const focused = liveSocket.getActiveElement();
     const { selectionStart, selectionEnd } =
       focused && DOM.hasSelectionRange(focused) ? focused : {};

package/assets/js/phoenix_live_view/live_socket.js

@@ -82,6 +82,9 @@ export default class LiveSocket {
     this.uploaders = opts.uploaders || {};
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;
     this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.reloadWithJitterTimer = null;
     this.maxReloads = opts.maxReloads || MAX_RELOADS;
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;

package/assets/js/phoenix_live_view/view.js

@@ -192,7 +192,13 @@ export default class View {
     this.ref = 0;
     this.lastAckRef = null;
     this.childJoins = 0;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.loaderTimer = null;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.disconnectedTimer = null;
     this.pendingDiffs = [];
     this.pendingForms = new Set();
@@ -2041,6 +2047,19 @@ export default class View {
   }
 
   getFormsForRecovery() {
+    // Form recovery is complex in LiveView:
+    // We want to support nested LiveViews and also provide a good user experience.
+    // Therefore, when the channel rejoins, we copy all forms that are eligible for
+    // recovery to be able to access them later.
+    // Why do we need to copy them? Because when the main LiveView joins, any forms
+    // in nested LiveViews would be lost.
+    //
+    // We should rework this in the future to serialize the form payload here
+    // instead of cloning the DOM nodes, but making this work correctly is tedious,
+    // as sending the correct form payload relies on JS.push to extract values
+    // from JS commands (phx-change={JS.push("event", value: ..., target: ...)}),
+    // as well as view.pushInput, which expects DOM elements.
+
     if (this.joinCount === 0) {
       return {};
     }
@@ -2055,19 +2074,33 @@ export default class View {
           form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore",
       )
       .map((form) => {
-        // we perform a shallow clone and manually copy all elements
-        const clonedForm = form.cloneNode(false);
-        // we need to copy the private data as it contains
-        // the information about touched fields
-        DOM.copyPrivates(clonedForm, form);
-        Array.from(form.elements).forEach((el) => {
-          // we need to clone all child nodes as well,
-          // because those could also be selects
+        // We need to clone the whole form, as relying on form.elements can lead to
+        // situations where we have
+        //
+        //   <form><fieldset disabled><input name="foo" value="bar"></fieldset></form>
+        //
+        // and form.elements returns both the fieldset and the input separately.
+        // Because the fieldset is disabled, the input should NOT be sent though.
+        // We can only reliably serialize the form by cloning it fully.
+        const clonedForm = form.cloneNode(true);
+        // we call morphdom to copy any special state
+        // like the selected option of a <select> element;
+        // any also copy over privates (which contain information about touched fields)
+        morphdom(clonedForm, form, {
+          onBeforeElUpdated: (fromEl, toEl) => {
+            DOM.copyPrivates(fromEl, toEl);
+            return true;
+          },
+        });
+        // next up, we also need to clone any elements with form="id" parameter
+        const externalElements = document.querySelectorAll(
+          `[form="${form.id}"]`,
+        );
+        Array.from(externalElements).forEach((el) => {
+          if (form.contains(el)) {
+            return;
+          }
           const clonedEl = el.cloneNode(true);
-          // we call morphdom to copy any special state
-          // like the selected option of a <select> element;
-          // this should be plenty fast as we call it on a small subset of the DOM,
-          // single inputs or a select with children
           morphdom(clonedEl, el);
           DOM.copyPrivates(clonedEl, el);
           clonedForm.appendChild(clonedEl);

package/assets/js/phoenix_live_view/view_hook.ts

@@ -154,7 +154,7 @@ export interface HookInterface {
   uploadTo(selectorOrTarget: PhxTarget, name: any, files: any): any;
 
   // allow unknown methods, as people can define them in their hooks
-  [key: string]: any;
+  [key: PropertyKey]: any;
 }
 
 // based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fac1aa75acdddbf4f1a95e98ee2297b54ce4b4c9/types/phoenix_live_view/hooks.d.ts#L26
@@ -204,7 +204,7 @@ export interface Hook<T = object> {
   reconnected?: (this: T & HookInterface) => void;
 
   // Allow custom methods with any signature and custom properties
-  [key: string]: ((this: T & HookInterface, ...args: any[]) => any) | any;
+  [key: PropertyKey]: any;
 }
 
 /**

package/assets/js/types/live_socket.d.ts

@@ -23,7 +23,10 @@ export default class LiveSocket {
     uploaders: any;
     loaderTimeout: any;
     disconnectedTimeout: any;
-    reloadWithJitterTimer: NodeJS.Timeout;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
+    reloadWithJitterTimer: ReturnType<typeof setTimeout> | null;
     maxReloads: any;
     reloadJitterMin: any;
     reloadJitterMax: any;

package/assets/js/types/view.d.ts

@@ -12,8 +12,14 @@ export default class View {
     ref: number;
     lastAckRef: any;
     childJoins: number;
-    loaderTimer: NodeJS.Timeout;
-    disconnectedTimer: NodeJS.Timeout;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
+    loaderTimer: ReturnType<typeof setTimeout> | null;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
+    disconnectedTimer: ReturnType<typeof setTimeout> | null;
     pendingDiffs: any[];
     pendingForms: Set<any>;
     redirect: boolean;

package/assets/js/types/view_hook.d.ts

@@ -128,7 +128,7 @@ export interface HookInterface {
      * @param files - The files to upload.
      */
     uploadTo(selectorOrTarget: PhxTarget, name: any, files: any): any;
-    [key: string]: any;
+    [key: PropertyKey]: any;
 }
 export interface Hook<T = object> {
     /**
@@ -168,7 +168,7 @@ export interface Hook<T = object> {
      * Called when the element's parent LiveView has reconnected to the server.
      */
     reconnected?: (this: T & HookInterface) => void;
-    [key: string]: ((this: T & HookInterface, ...args: any[]) => any) | any;
+    [key: PropertyKey]: any;
 }
 /**
  * Base class for LiveView hooks. Users extend this class to define their hooks.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",
@@ -10,8 +10,8 @@
   "jsdelivr": "./priv/static/phoenix_live_view.min.js",
   "exports": {
     "import": {
-      "default": "./priv/static/phoenix_live_view.esm.js",
-      "types": "./assets/js/types/index.d.ts"
+      "types": "./assets/js/types/index.d.ts",
+      "default": "./priv/static/phoenix_live_view.esm.js"
     },
     "require": "./priv/static/phoenix_live_view.cjs.js"
   },

package/priv/static/phoenix_live_view.cjs.js

@@ -2241,10 +2241,22 @@ var DOMPatch = class {
     );
   }
   perform(isJoinPatch) {
-    const { view, liveSocket, html, container, targetContainer } = this;
-    if (this.isCIDPatch() && !targetContainer) {
+    const { view, liveSocket, html, container } = this;
+    let targetContainer = this.targetContainer;
+    if (this.isCIDPatch() && !this.targetContainer) {
       return;
     }
+    if (this.isCIDPatch()) {
+      const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);
+      if (closestLock) {
+        const clonedTree = dom_default.private(closestLock, PHX_REF_LOCK);
+        if (clonedTree) {
+          targetContainer = clonedTree.querySelector(
+            `[data-phx-component="${this.targetCID}"]`
+          );
+        }
+      }
+    }
     const focused = liveSocket.getActiveElement();
     const { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
     const phxUpdate = liveSocket.binding(PHX_UPDATE);
@@ -5616,9 +5628,20 @@ var View = class _View {
     return dom_default.all(this.el, `form[${phxChange}]`).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
       (form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore"
     ).map((form) => {
-      const clonedForm = form.cloneNode(false);
-      dom_default.copyPrivates(clonedForm, form);
-      Array.from(form.elements).forEach((el) => {
+      const clonedForm = form.cloneNode(true);
+      morphdom_esm_default(clonedForm, form, {
+        onBeforeElUpdated: (fromEl, toEl) => {
+          dom_default.copyPrivates(fromEl, toEl);
+          return true;
+        }
+      });
+      const externalElements = document.querySelectorAll(
+        `[form="${form.id}"]`
+      );
+      Array.from(externalElements).forEach((el) => {
+        if (form.contains(el)) {
+          return;
+        }
         const clonedEl = el.cloneNode(true);
         morphdom_esm_default(clonedEl, el);
         dom_default.copyPrivates(clonedEl, el);
@@ -5759,7 +5782,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.2";
+    return "1.1.4";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";