turbo-rails 1.3.2 → 1.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d91b4f1416fb84779360c106d108b2ea6eae46788a9abec0316595ac7d050c5
-  data.tar.gz: 8a63eef6bae625fcc8260bf343f0e8184b46f84feb56722688ca3d1d5e6825bc
+  metadata.gz: ecb315ac4b0462119b892a555ba5942ac1de84d8bdc565e31d0e166ac244a6c1
+  data.tar.gz: a2e2033e73b26803e9b87962ac451b825257e1f052cb86cef013e0b8eb16bbcd
 SHA512:
-  metadata.gz: 5a63be2834e1cb5253da4fdd3c8bb4d840c39dd277264fb4b9437107f0182b30cc5d3e41b0bead34dec5ad0d355fe84a6e6911ac3438c8aa3a5ad3ba94e919bd
-  data.tar.gz: a1ba1d13b8baa6a62bb67c22a1c9e5e386f2164ff072029b5821b857eae5e1d6197810c3c14c64f50e976452179bbe3cebb12a16a4b11114fa60d6bc25f480f3
+  metadata.gz: d830701cc6b05ceb930ed1d873998849d870f7b25701ccc3d5cede6f5659eb107e175a46465963a23bf1239fd3aeb798f105155047324644446305e1fea34d71
+  data.tar.gz: 0bb9370f532eb74a8230320c1aed5ac1d4e5f434873d017454ffe1c005daa124f413ffe1ee11df1cb49f325f85fcd417b9db6bd6909b234d87032d56dcb99284

data/README.md

@@ -32,7 +32,7 @@ Turbo reinvents the old HTML technique of frames without any of the drawbacks th
 
 It also makes it dead easy to carve a single page into smaller pieces that can all live on their own cache timeline. While the bulk of the page might easily be cached between users, a small personalized toolbar perhaps cannot. With Turbo::Frames, you can designate the toolbar as a frame, which will be **lazy-loaded automatically** by the publicly-cached root page. This means simpler pages, easier caching schemes with fewer dependent keys, and all without needing to write a lick of custom JavaScript.
 
-This gem provides a `turbo_frame_tag` helper to create those frame.
+This gem provides a `turbo_frame_tag` helper to create those frames.
 
 For instance:
 ```erb

data/app/assets/javascripts/turbo.js

@@ -282,10 +282,6 @@ class FetchResponse {
   }
 }
 
-function isAction(action) {
-  return action == "advance" || action == "replace" || action == "restore";
-}
-
 function activateScriptElement(element) {
   if (element.getAttribute("data-turbo-eval") == "false") {
     return element;
@@ -318,6 +314,7 @@ function dispatch(eventName, {target: target, cancelable: cancelable, detail: de
   const event = new CustomEvent(eventName, {
     cancelable: cancelable,
     bubbles: true,
+    composed: true,
     detail: detail
   });
   if (target && target.isConnected) {
@@ -431,6 +428,10 @@ function getHistoryMethodForAction(action) {
   }
 }
 
+function isAction(action) {
+  return action == "advance" || action == "replace" || action == "restore";
+}
+
 function getVisitAction(...elements) {
   const action = getAttribute("data-turbo-action", ...elements);
   return isAction(action) ? action : null;
@@ -456,6 +457,13 @@ function setMetaContent(name, content) {
   return element;
 }
 
+function findClosestRecursively(element, selector) {
+  var _a;
+  if (element instanceof Element) {
+    return element.closest(selector) || findClosestRecursively(element.assignedSlot || ((_a = element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host), selector);
+  }
+}
+
 var FetchMethod;
 
 (function(FetchMethod) {
@@ -509,9 +517,8 @@ class FetchRequest {
     this.abortController.abort();
   }
   async perform() {
-    var _a, _b;
     const {fetchOptions: fetchOptions} = this;
-    (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
+    this.delegate.prepareRequest(this);
     await this.allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
@@ -753,11 +760,11 @@ class FormSubmission {
       return true;
     }
   }
-  prepareHeadersForRequest(headers, request) {
+  prepareRequest(request) {
     if (!request.isIdempotent) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
       if (token) {
-        headers["X-CSRF-Token"] = token;
+        request.headers["X-CSRF-Token"] = token;
       }
     }
     if (this.requestAcceptsTurboStreamResponse(request)) {
@@ -960,11 +967,15 @@ function submissionDoesNotDismissDialog(form, submitter) {
 }
 
 function submissionDoesNotTargetIFrame(form, submitter) {
-  const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
-  for (const element of document.getElementsByName(target)) {
-    if (element instanceof HTMLIFrameElement) return false;
+  if ((submitter === null || submitter === void 0 ? void 0 : submitter.hasAttribute("formtarget")) || form.hasAttribute("target")) {
+    const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
+    for (const element of document.getElementsByName(target)) {
+      if (element instanceof HTMLIFrameElement) return false;
+    }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 class View {
@@ -1153,9 +1164,7 @@ class LinkClickObserver {
     return !(event.target && event.target.isContentEditable || event.defaultPrevented || event.which > 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
   }
   findLinkFromClickTarget(target) {
-    if (target instanceof Element) {
-      return target.closest("a[href]:not([target^=_]):not([download])");
-    }
+    return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])");
   }
   getLocationForLink(link) {
     return expandURL(link.getAttribute("href") || "");
@@ -1163,10 +1172,14 @@ class LinkClickObserver {
 }
 
 function doesNotTargetIFrame(anchor) {
-  for (const element of document.getElementsByName(anchor.target)) {
-    if (element instanceof HTMLIFrameElement) return false;
+  if (anchor.hasAttribute("target")) {
+    for (const element of document.getElementsByName(anchor.target)) {
+      if (element instanceof HTMLIFrameElement) return false;
+    }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 class FormLinkClickObserver {
@@ -1184,16 +1197,26 @@ class FormLinkClickObserver {
     return this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) && link.hasAttribute("data-turbo-method");
   }
   followedLinkToLocation(link, location) {
-    const action = location.href;
     const form = document.createElement("form");
+    const type = "hidden";
+    for (const [name, value] of location.searchParams) {
+      form.append(Object.assign(document.createElement("input"), {
+        type: type,
+        name: name,
+        value: value
+      }));
+    }
+    const action = Object.assign(location, {
+      search: ""
+    });
     form.setAttribute("data-turbo", "true");
-    form.setAttribute("action", action);
+    form.setAttribute("action", action.href);
     form.setAttribute("hidden", "");
     const method = link.getAttribute("data-turbo-method");
     if (method) form.setAttribute("method", method);
     const turboFrame = link.getAttribute("data-turbo-frame");
     if (turboFrame) form.setAttribute("data-turbo-frame", turboFrame);
-    const turboAction = link.getAttribute("data-turbo-action");
+    const turboAction = getVisitAction(link);
     if (turboAction) form.setAttribute("data-turbo-action", turboAction);
     const turboConfirm = link.getAttribute("data-turbo-confirm");
     if (turboConfirm) form.setAttribute("data-turbo-confirm", turboConfirm);
@@ -1213,10 +1236,10 @@ class Bardo {
     this.delegate = delegate;
     this.permanentElementMap = permanentElementMap;
   }
-  static preservingPermanentElements(delegate, permanentElementMap, callback) {
+  static async preservingPermanentElements(delegate, permanentElementMap, callback) {
     const bardo = new this(delegate, permanentElementMap);
     bardo.enter();
-    callback();
+    await callback();
     bardo.leave();
   }
   enter() {
@@ -1289,8 +1312,8 @@ class Renderer {
       delete this.resolvingFunctions;
     }
   }
-  preservingPermanentElements(callback) {
-    Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
+  async preservingPermanentElements(callback) {
+    await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
   }
   focusFirstAutofocusableElement() {
     const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1873,7 +1896,9 @@ class Visit {
     if (this.redirectedToLocation && !this.followedRedirect && ((_a = this.response) === null || _a === void 0 ? void 0 : _a.redirected)) {
       this.adapter.visitProposedToLocation(this.redirectedToLocation, {
         action: "replace",
-        response: this.response
+        response: this.response,
+        shouldCacheSnapshot: false,
+        willRender: false
       });
       this.followedRedirect = true;
     }
@@ -1888,7 +1913,7 @@ class Visit {
       }));
     }
   }
-  prepareHeadersForRequest(headers, request) {
+  prepareRequest(request) {
     if (this.acceptsStreamResponse) {
       request.acceptResponseType(StreamMessage.contentType);
     }
@@ -2397,10 +2422,8 @@ class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  getActionForFormSubmission(formSubmission) {
-    const {formElement: formElement, submitter: submitter} = formSubmission;
-    const action = getAttribute("data-turbo-action", submitter, formElement);
-    return isAction(action) ? action : "advance";
+  getActionForFormSubmission({submitter: submitter, formElement: formElement}) {
+    return getVisitAction(submitter, formElement) || "advance";
   }
 }
 
@@ -2648,7 +2671,7 @@ class PageRenderer extends Renderer {
   }
   async render() {
     if (this.willRender) {
-      this.replaceBody();
+      await this.replaceBody();
     }
   }
   finishRendering() {
@@ -2667,16 +2690,16 @@ class PageRenderer extends Renderer {
     return this.newSnapshot.element;
   }
   async mergeHead() {
+    const mergedHeadElements = this.mergeProvisionalElements();
     const newStylesheetElements = this.copyNewHeadStylesheetElements();
     this.copyNewHeadScriptElements();
-    this.removeCurrentHeadProvisionalElements();
-    this.copyNewHeadProvisionalElements();
+    await mergedHeadElements;
     await newStylesheetElements;
   }
-  replaceBody() {
-    this.preservingPermanentElements((() => {
+  async replaceBody() {
+    await this.preservingPermanentElements((async () => {
       this.activateNewBody();
-      this.assignNewBody();
+      await this.assignNewBody();
     }));
   }
   get trackedElementsAreIdentical() {
@@ -2695,6 +2718,35 @@ class PageRenderer extends Renderer {
       document.head.appendChild(activateScriptElement(element));
     }
   }
+  async mergeProvisionalElements() {
+    const newHeadElements = [ ...this.newHeadProvisionalElements ];
+    for (const element of this.currentHeadProvisionalElements) {
+      if (!this.isCurrentElementInElementList(element, newHeadElements)) {
+        document.head.removeChild(element);
+      }
+    }
+    for (const element of newHeadElements) {
+      document.head.appendChild(element);
+    }
+  }
+  isCurrentElementInElementList(element, elementList) {
+    for (const [index, newElement] of elementList.entries()) {
+      if (element.tagName == "TITLE") {
+        if (newElement.tagName != "TITLE") {
+          continue;
+        }
+        if (element.innerHTML == newElement.innerHTML) {
+          elementList.splice(index, 1);
+          return true;
+        }
+      }
+      if (newElement.isEqualNode(element)) {
+        elementList.splice(index, 1);
+        return true;
+      }
+    }
+    return false;
+  }
   removeCurrentHeadProvisionalElements() {
     for (const element of this.currentHeadProvisionalElements) {
       document.head.removeChild(element);
@@ -2715,8 +2767,8 @@ class PageRenderer extends Renderer {
       inertScriptElement.replaceWith(activatedScriptElement);
     }
   }
-  assignNewBody() {
-    this.renderElement(this.currentElement, this.newElement);
+  async assignNewBody() {
+    await this.renderElement(this.currentElement, this.newElement);
   }
   get newHeadStylesheetElements() {
     return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
@@ -3150,8 +3202,8 @@ class Session {
     }
   }
   elementIsNavigatable(element) {
-    const container = element.closest("[data-turbo]");
-    const withinFrame = element.closest("turbo-frame");
+    const container = findClosestRecursively(element, "[data-turbo]");
+    const withinFrame = findClosestRecursively(element, "turbo-frame");
     if (this.drive || withinFrame) {
       if (container) {
         return container.getAttribute("data-turbo") != "false";
@@ -3167,8 +3219,7 @@ class Session {
     }
   }
   getActionForLink(link) {
-    const action = link.getAttribute("data-turbo-action");
-    return isAction(action) ? action : "advance";
+    return getVisitAction(link) || "advance";
   }
   get snapshot() {
     return this.view.snapshot;
@@ -3236,7 +3287,10 @@ const StreamActions = {
     this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
   },
   update() {
-    this.targetElements.forEach((e => e.replaceChildren(this.templateContent)));
+    this.targetElements.forEach((targetElement => {
+      targetElement.innerHTML = "";
+      targetElement.append(this.templateContent);
+    }));
   }
 };
 
@@ -3428,7 +3482,8 @@ class FrameController {
       this.fetchResponseLoaded = () => {};
     }
   }
-  elementAppearedInViewport(_element) {
+  elementAppearedInViewport(element) {
+    this.proposeVisitIfNavigatedWithAction(element, element);
     this.loadSourceURL();
   }
   willSubmitFormLinkToLocation(link) {
@@ -3453,12 +3508,12 @@ class FrameController {
     }
     this.formSubmission = new FormSubmission(this, element, submitter);
     const {fetchRequest: fetchRequest} = this.formSubmission;
-    this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+    this.prepareRequest(fetchRequest);
     this.formSubmission.start();
   }
-  prepareHeadersForRequest(headers, request) {
+  prepareRequest(request) {
     var _a;
-    headers["Turbo-Frame"] = this.id;
+    request.headers["Turbo-Frame"] = this.id;
     if ((_a = this.currentNavigationElement) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-turbo-stream")) {
       request.acceptResponseType(StreamMessage.contentType);
     }
@@ -3540,7 +3595,6 @@ class FrameController {
   }
   navigateFrame(element, url, submitter) {
     const frame = this.findFrameElement(element, submitter);
-    this.pageSnapshot = PageSnapshot.fromElement(frame).clone();
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
     this.withCurrentNavigationElement(element, (() => {
       frame.src = url;
@@ -3548,7 +3602,8 @@ class FrameController {
   }
   proposeVisitIfNavigatedWithAction(frame, element, submitter) {
     this.action = getVisitAction(submitter, element, frame);
-    if (isAction(this.action)) {
+    if (this.action) {
+      const pageSnapshot = PageSnapshot.fromElement(frame).clone();
       const {visitCachedSnapshot: visitCachedSnapshot} = frame.delegate;
       frame.delegate.fetchResponseLoaded = fetchResponse => {
         if (frame.src) {
@@ -3565,7 +3620,7 @@ class FrameController {
             willRender: false,
             updateHistory: false,
             restorationIdentifier: this.restorationIdentifier,
-            snapshot: this.pageSnapshot
+            snapshot: pageSnapshot
           };
           if (this.action) options.action = this.action;
           session.visit(frame.src, options);
@@ -4019,18 +4074,21 @@ class TurboCableStreamSourceElement extends HTMLElement {
   }
 }
 
-customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement);
+if (customElements.get("turbo-cable-stream-source") === undefined) {
+  customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement);
+}
 
 function encodeMethodIntoRequestBody(event) {
   if (event.target instanceof HTMLFormElement) {
     const {target: form, detail: {fetchOptions: fetchOptions}} = event;
     form.addEventListener("turbo:submit-start", (({detail: {formSubmission: {submitter: submitter}}}) => {
-      const method = submitter && submitter.formMethod || fetchOptions.body && fetchOptions.body.get("_method") || form.getAttribute("method");
+      const body = isBodyInit(fetchOptions.body) ? fetchOptions.body : new URLSearchParams;
+      const method = determineFetchMethod(submitter, body, form);
       if (!/get/i.test(method)) {
         if (/post/i.test(method)) {
-          fetchOptions.body.delete("_method");
+          body.delete("_method");
         } else {
-          fetchOptions.body.set("_method", method);
+          body.set("_method", method);
         }
         fetchOptions.method = "post";
       }
@@ -4040,6 +4098,35 @@ function encodeMethodIntoRequestBody(event) {
   }
 }
 
+function determineFetchMethod(submitter, body, form) {
+  const formMethod = determineFormMethod(submitter);
+  const overrideMethod = body.get("_method");
+  const method = form.getAttribute("method") || "get";
+  if (typeof formMethod == "string") {
+    return formMethod;
+  } else if (typeof overrideMethod == "string") {
+    return overrideMethod;
+  } else {
+    return method;
+  }
+}
+
+function determineFormMethod(submitter) {
+  if (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) {
+    if (submitter.hasAttribute("formmethod")) {
+      return submitter.formMethod;
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}
+
+function isBodyInit(body) {
+  return body instanceof FormData || body instanceof URLSearchParams;
+}
+
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {