turbo-rails 2.0.4 → 2.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce426f6fcdec338c0a3eb5c3f97ee2660ef618d23535671ddf464d2650041997
-  data.tar.gz: eab0160dacd564b0e002ea3fe658bbc6f4770b7c912867c335758d2c3237c24b
+  metadata.gz: 7bc53746ef39d3412872a00dade91b735622b4edca9b42d321c4f2114da6dd4b
+  data.tar.gz: 53974cb2408b7a98cf7cf6a33b9fc8c9ebf948c1e196597f33f499437ea47a47
 SHA512:
-  metadata.gz: d80adee8976dad280b8ff058d5c0615617f37ca3ba5c164db63dce81ad9263b8cfdf704b50c0aaeac9d5d675ad66298ca34902f2e31f5cfc493f8041ca32d12e
-  data.tar.gz: 696dc8a61b6b0860ca5b2db540f4e573e7531a293a84854068bb1277997f3c73aa993527afdd4a9dc5c741fc8c83ef258cf2022d3a354c6b4d3e2fef2cca0dd1
+  metadata.gz: 16fdd0089b68c5f6ed5777324af45fb54a2101439319b70637d60eebaa29965e8f9b3ae9dc2b825505d6b9155a2e74b319c47231f80300aac622b32ed2d0c908
+  data.tar.gz: 8d8753af6214007c64250931c9bbba39b341a91decb60a71b6d5a1bf62a08803076127e81a9db3d87ca209a2753558f688cc2319df78a7def4c9a7ca878c0e55

data/README.md

@@ -56,7 +56,7 @@ When the user clicks on the `Edit this todo` link, as a direct response to this
 
 ### A note on custom layouts
 
-In order to render turbo frame requests without the application layout, Turbo registers a custom [layout method](https://api.rubyonrails.org/classes/ActionView/Layouts/ClassMethods.html#method-i-layout). 
+In order to render turbo frame requests without the application layout, Turbo registers a custom [layout method](https://api.rubyonrails.org/classes/ActionView/Layouts/ClassMethods.html#method-i-layout).
 If your application uses custom layout resolution, you have to make sure to return `"turbo_rails/frame"` (or `false` for TurboRails < 1.4.0) for turbo frame requests:
 
 ```ruby
@@ -64,7 +64,7 @@ layout :custom_layout
 
 def custom_layout
   return "turbo_rails/frame" if turbo_frame_request?
-  
+
   # ... your custom layout logic
 ```
 
@@ -74,14 +74,14 @@ If you are using a custom, but "static" layout,
 layout "some_static_layout"
 ```
 
-you **have** to change it to a layout method in order to conditionally return `false` for turbo frame requests:
+you **have** to change it to a layout method in order to conditionally return `"turbo_rails/frame"` for turbo frame requests:
 
 ```ruby
 layout :custom_layout
 
 def custom_layout
   return "turbo_rails/frame" if turbo_frame_request?
-  
+
   "some_static_layout"
 ```
 
@@ -111,7 +111,7 @@ This gem is automatically configured for applications made with Rails 7+ (unless
 3. Run `./bin/rails turbo:install`
 4. Run `./bin/rails turbo:install:redis` to change the development Action Cable adapter from Async (the default one) to Redis. The Async adapter does not support Turbo Stream broadcasting.
 
-Running `turbo:install` will install through NPM if Node.js is used in the application. Otherwise the asset pipeline version is used. To use the asset pipeline version, you must have `importmap-rails` installed first and listed higher in the Gemfile.
+Running `turbo:install` will install through NPM or Bun if a JavaScript runtime is used in the application. Otherwise the asset pipeline version is used. To use the asset pipeline version, you must have `importmap-rails` installed first and listed higher in the Gemfile.
 
 If you're using node and need to use the cable consumer, you can import [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).
 
@@ -152,10 +152,48 @@ The [`Turbo::TestAssertions::IntegrationTestAssertions`](./lib/turbo/test_assert
 
 The [`Turbo::Broadcastable::TestHelper`](./lib/turbo/broadcastable/test_helper.rb) concern provides Action Cable-aware test helpers that assert that `<turbo-stream>` elements were or were not broadcast over Action Cable. `Turbo::Broadcastable::TestHelper` is automatically included in [`ActiveSupport::TestCase`](https://edgeapi.rubyonrails.org/classes/ActiveSupport/TestCase.html).
 
+### Rendering Outside of a Request
+
+Turbo utilizes [ActionController::Renderer][] to render templates and partials
+outside the context of the request-response cycle. If you need to render a
+Turbo-aware template, partial, or component, use [ActionController::Renderer][]:
+
+```ruby
+ApplicationController.renderer.render template: "posts/show", assigns: { post: Post.first } # => "<html>…"
+PostsController.renderer.render :show, assigns: { post: Post.first } # => "<html>…"
+```
+
+As a shortcut, you can also call render directly on the controller class itself:
+
+```ruby
+ApplicationController.render template: "posts/show", assigns: { post: Post.first } # => "<html>…"
+PostsController.render :show, assigns: { post: Post.first } # => "<html>…"
+```
+
+[ActionController::Renderer]: https://api.rubyonrails.org/classes/ActionController/Renderer.html
+
 ## Development
 
 Run the tests with `./bin/test`.
 
+### Using local Turbo version
+
+Often you might want to test changes made locally to [Turbo lib](https://github.com/hotwired/turbo) itself. To package your local development version of Turbo you can use [yarn link](https://classic.yarnpkg.com/lang/en/docs/cli/link/) feature:
+
+```sh
+cd <local-turbo-dir>
+yarn link
+
+cd <local-turbo-rails-dir>
+yarn link @hotwired/turbo
+
+# Build the JS distribution files...
+yarn build
+# ...and commit the changes
+```
+
+Now you can reference your version of turbo-rails in your Rails projects packaged with your local version of Turbo.
+
 ## License
 
 Turbo is released under the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/turbo.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.3
+Turbo 8.0.5
 Copyright © 2024 37signals LLC
  */
 (function(prototype) {
@@ -72,7 +72,7 @@ class FrameElement extends HTMLElement {
   static delegateConstructor=undefined;
   loaded=Promise.resolve();
   static get observedAttributes() {
-    return [ "disabled", "complete", "loading", "src" ];
+    return [ "disabled", "loading", "src" ];
   }
   constructor() {
     super();
@@ -90,11 +90,9 @@ class FrameElement extends HTMLElement {
   attributeChangedCallback(name) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged();
-    } else if (name == "complete") {
-      this.delegate.completeChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
-    } else {
+    } else if (name == "disabled") {
       this.delegate.disabledChanged();
     }
   }
@@ -485,13 +483,17 @@ async function around(callback, reader) {
   return [ before, after ];
 }
 
-function doesNotTargetIFrame(anchor) {
-  if (anchor.hasAttribute("target")) {
-    for (const element of document.getElementsByName(anchor.target)) {
+function doesNotTargetIFrame(name) {
+  if (name === "_blank") {
+    return false;
+  } else if (name) {
+    for (const element of document.getElementsByName(name)) {
       if (element instanceof HTMLIFrameElement) return false;
     }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 function findLinkFromClickTarget(target) {
@@ -598,7 +600,7 @@ class FetchRequest {
     this.fetchOptions = {
       credentials: "same-origin",
       redirect: "follow",
-      method: method,
+      method: method.toUpperCase(),
       headers: {
         ...this.defaultHeaders
       },
@@ -618,7 +620,7 @@ class FetchRequest {
     const [url, body] = buildResourceAndBody(this.url, fetchMethod, fetchBody, this.enctype);
     this.url = url;
     this.fetchOptions.body = body;
-    this.fetchOptions.method = fetchMethod;
+    this.fetchOptions.method = fetchMethod.toUpperCase();
   }
   get headers() {
     return this.fetchOptions.headers;
@@ -1168,15 +1170,8 @@ function submissionDoesNotDismissDialog(form, submitter) {
 }
 
 function submissionDoesNotTargetIFrame(form, submitter) {
-  if (submitter?.hasAttribute("formtarget") || form.hasAttribute("target")) {
-    const target = submitter?.getAttribute("formtarget") || form.target;
-    for (const element of document.getElementsByName(target)) {
-      if (element instanceof HTMLIFrameElement) return false;
-    }
-    return true;
-  } else {
-    return true;
-  }
+  const target = submitter?.getAttribute("formtarget") || form.getAttribute("target");
+  return doesNotTargetIFrame(target);
 }
 
 class View {
@@ -1309,14 +1304,14 @@ class LinkInterceptor {
     document.removeEventListener("turbo:before-visit", this.willVisit);
   }
   clickBubbled=event => {
-    if (this.respondsToEventTarget(event.target)) {
+    if (this.clickEventIsSignificant(event)) {
       this.clickEvent = event;
     } else {
       delete this.clickEvent;
     }
   };
   linkClicked=event => {
-    if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+    if (this.clickEvent && this.clickEventIsSignificant(event)) {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault();
         event.preventDefault();
@@ -1328,9 +1323,10 @@ class LinkInterceptor {
   willVisit=_event => {
     delete this.clickEvent;
   };
-  respondsToEventTarget(target) {
-    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-    return element && element.closest("turbo-frame, html") == this.element;
+  clickEventIsSignificant(event) {
+    const target = event.composed ? event.target?.parentElement : event.target;
+    const element = findLinkFromClickTarget(target) || target;
+    return element instanceof Element && element.closest("turbo-frame, html") == this.element;
   }
 }
 
@@ -1360,7 +1356,7 @@ class LinkClickObserver {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = event.composedPath && event.composedPath()[0] || event.target;
       const link = findLinkFromClickTarget(target);
-      if (link && doesNotTargetIFrame(link)) {
+      if (link && doesNotTargetIFrame(link.target)) {
         const location = getLocationForLink(link);
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault();
@@ -1498,6 +1494,9 @@ class Renderer {
   get shouldRender() {
     return true;
   }
+  get shouldAutofocus() {
+    return true;
+  }
   get reloadReason() {
     return;
   }
@@ -1515,9 +1514,11 @@ class Renderer {
     await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
   }
   focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement;
-    if (element) {
-      element.focus();
+    if (this.shouldAutofocus) {
+      const element = this.connectedSnapshot.firstAutofocusableElement;
+      if (element) {
+        element.focus();
+      }
     }
   }
   enteringBardo(currentPermanentElement) {
@@ -2631,7 +2632,7 @@ class LinkPrefetchObserver {
     this.#prefetchedLink = null;
   };
   #tryToUsePrefetchedRequest=event => {
-    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
       const cached = prefetchCache.get(event.detail.url.toString());
       if (cached) {
         event.detail.fetchRequest = cached;
@@ -2800,6 +2801,7 @@ class Navigator {
   }
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
+    delete this.currentVisit;
   }
   locationWithActionIsSamePage(location, action) {
     const anchor = getAnchor(location);
@@ -3630,6 +3632,80 @@ var Idiomorph = function() {
   };
 }();
 
+function morphElements(currentElement, newElement, {callbacks: callbacks, ...options} = {}) {
+  Idiomorph.morph(currentElement, newElement, {
+    ...options,
+    callbacks: new DefaultIdiomorphCallbacks(callbacks)
+  });
+}
+
+function morphChildren(currentElement, newElement) {
+  morphElements(currentElement, newElement.children, {
+    morphStyle: "innerHTML"
+  });
+}
+
+class DefaultIdiomorphCallbacks {
+  #beforeNodeMorphed;
+  constructor({beforeNodeMorphed: beforeNodeMorphed} = {}) {
+    this.#beforeNodeMorphed = beforeNodeMorphed || (() => true);
+  }
+  beforeNodeAdded=node => !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id));
+  beforeNodeMorphed=(currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
+        const event = dispatch("turbo:before-morph-element", {
+          cancelable: true,
+          target: currentElement,
+          detail: {
+            currentElement: currentElement,
+            newElement: newElement
+          }
+        });
+        return !event.defaultPrevented;
+      } else {
+        return false;
+      }
+    }
+  };
+  beforeAttributeUpdated=(attributeName, target, mutationType) => {
+    const event = dispatch("turbo:before-morph-attribute", {
+      cancelable: true,
+      target: target,
+      detail: {
+        attributeName: attributeName,
+        mutationType: mutationType
+      }
+    });
+    return !event.defaultPrevented;
+  };
+  beforeNodeRemoved=node => this.beforeNodeMorphed(node);
+  afterNodeMorphed=(currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      dispatch("turbo:morph-element", {
+        target: currentElement,
+        detail: {
+          currentElement: currentElement,
+          newElement: newElement
+        }
+      });
+    }
+  };
+}
+
+class MorphingFrameRenderer extends FrameRenderer {
+  static renderElement(currentElement, newElement) {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: {
+        currentElement: currentElement,
+        newElement: newElement
+      }
+    });
+    morphChildren(currentElement, newElement);
+  }
+}
+
 class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
@@ -3798,106 +3874,45 @@ class PageRenderer extends Renderer {
   }
 }
 
-class MorphRenderer extends PageRenderer {
-  async render() {
-    if (this.willRender) await this.#morphBody();
-  }
-  get renderMethod() {
-    return "morph";
-  }
-  async #morphBody() {
-    this.#morphElements(this.currentElement, this.newElement);
-    this.#reloadRemoteFrames();
-    dispatch("turbo:morph", {
-      detail: {
-        currentElement: this.currentElement,
-        newElement: this.newElement
-      }
-    });
-  }
-  #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
-    this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
-    Idiomorph.morph(currentElement, newElement, {
-      morphStyle: morphStyle,
+class MorphingPageRenderer extends PageRenderer {
+  static renderElement(currentElement, newElement) {
+    morphElements(currentElement, newElement, {
       callbacks: {
-        beforeNodeAdded: this.#shouldAddElement,
-        beforeNodeMorphed: this.#shouldMorphElement,
-        beforeAttributeUpdated: this.#shouldUpdateAttribute,
-        beforeNodeRemoved: this.#shouldRemoveElement,
-        afterNodeMorphed: this.#didMorphElement
-      }
-    });
-  }
-  #shouldAddElement=node => !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id));
-  #shouldMorphElement=(oldNode, newNode) => {
-    if (oldNode instanceof HTMLElement) {
-      if (!oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))) {
-        const event = dispatch("turbo:before-morph-element", {
-          cancelable: true,
-          target: oldNode,
-          detail: {
-            newElement: newNode
-          }
-        });
-        return !event.defaultPrevented;
-      } else {
-        return false;
-      }
-    }
-  };
-  #shouldUpdateAttribute=(attributeName, target, mutationType) => {
-    const event = dispatch("turbo:before-morph-attribute", {
-      cancelable: true,
-      target: target,
-      detail: {
-        attributeName: attributeName,
-        mutationType: mutationType
+        beforeNodeMorphed: element => !canRefreshFrame(element)
       }
     });
-    return !event.defaultPrevented;
-  };
-  #didMorphElement=(oldNode, newNode) => {
-    if (newNode instanceof HTMLElement) {
-      dispatch("turbo:morph-element", {
-        target: oldNode,
-        detail: {
-          newElement: newNode
-        }
-      });
+    for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+      if (canRefreshFrame(frame)) refreshFrame(frame);
     }
-  };
-  #shouldRemoveElement=node => this.#shouldMorphElement(node);
-  #reloadRemoteFrames() {
-    this.#remoteFrames().forEach((frame => {
-      if (this.#isFrameReloadedWithMorph(frame)) {
-        this.#renderFrameWithMorph(frame);
-        frame.reload();
-      }
-    }));
-  }
-  #renderFrameWithMorph(frame) {
-    frame.addEventListener("turbo:before-frame-render", (event => {
-      event.detail.render = this.#morphFrameUpdate;
-    }), {
-      once: true
-    });
-  }
-  #morphFrameUpdate=(currentElement, newElement) => {
-    dispatch("turbo:before-frame-morph", {
-      target: currentElement,
+    dispatch("turbo:morph", {
       detail: {
         currentElement: currentElement,
         newElement: newElement
       }
     });
-    this.#morphElements(currentElement, newElement.children, "innerHTML");
-  };
-  #isFrameReloadedWithMorph(element) {
-    return element.src && element.refresh === "morph";
   }
-  #remoteFrames() {
-    return Array.from(document.querySelectorAll("turbo-frame[src]")).filter((frame => !frame.closest("[data-turbo-permanent]")));
+  async preservingPermanentElements(callback) {
+    return await callback();
+  }
+  get renderMethod() {
+    return "morph";
   }
+  get shouldAutofocus() {
+    return false;
+  }
+}
+
+function canRefreshFrame(frame) {
+  return frame instanceof FrameElement && frame.src && frame.refresh === "morph" && !frame.closest("[data-turbo-permanent]");
+}
+
+function refreshFrame(frame) {
+  frame.addEventListener("turbo:before-frame-render", (({detail: detail}) => {
+    detail.render = MorphingFrameRenderer.renderElement;
+  }), {
+    once: true
+  });
+  frame.reload();
 }
 
 class SnapshotCache {
@@ -3953,8 +3968,8 @@ class PageView extends View {
   }
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
     const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
-    const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer;
-    const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender);
+    const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
+    const renderer = new rendererClass(this.snapshot, snapshot, rendererClass.renderElement, isPreview, willRender);
     if (!renderer.shouldRender) {
       this.forceReloaded = true;
     } else {
@@ -4145,7 +4160,7 @@ class Session {
   }
   refresh(url, requestId) {
     const isRecentRequest = requestId && this.recentRequests.has(requestId);
-    if (!isRecentRequest) {
+    if (!isRecentRequest && !this.navigator.currentVisit) {
       this.visit(url, {
         action: "replace",
         shouldCacheSnapshot: false
@@ -4561,17 +4576,11 @@ class FrameController {
   }
   sourceURLReloaded() {
     const {src: src} = this.element;
-    this.#ignoringChangesToAttribute("complete", (() => {
-      this.element.removeAttribute("complete");
-    }));
+    this.element.removeAttribute("complete");
     this.element.src = null;
     this.element.src = src;
     return this.element.loaded;
   }
-  completeChanged() {
-    if (this.#isIgnoringChangesTo("complete")) return;
-    this.#loadSourceURL();
-  }
   loadingStyleChanged() {
     if (this.loadingStyle == FrameLoadingStyle.lazy) {
       this.appearanceObserver.start();
@@ -4903,13 +4912,11 @@ class FrameController {
     return this.element.hasAttribute("complete");
   }
   set complete(value) {
-    this.#ignoringChangesToAttribute("complete", (() => {
-      if (value) {
-        this.element.setAttribute("complete", "");
-      } else {
-        this.element.removeAttribute("complete");
-      }
-    }));
+    if (value) {
+      this.element.setAttribute("complete", "");
+    } else {
+      this.element.removeAttribute("complete");
+    }
   }
   get isActive() {
     return this.element.isActive && this.#connected;
@@ -4979,12 +4986,24 @@ const StreamActions = {
     this.targetElements.forEach((e => e.remove()));
   },
   replace() {
-    this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
+    const method = this.getAttribute("method");
+    this.targetElements.forEach((targetElement => {
+      if (method === "morph") {
+        morphElements(targetElement, this.templateContent);
+      } else {
+        targetElement.replaceWith(this.templateContent);
+      }
+    }));
   },
   update() {
+    const method = this.getAttribute("method");
     this.targetElements.forEach((targetElement => {
-      targetElement.innerHTML = "";
-      targetElement.append(this.templateContent);
+      if (method === "morph") {
+        morphChildren(targetElement, this.templateContent);
+      } else {
+        targetElement.innerHTML = "";
+        targetElement.append(this.templateContent);
+      }
     }));
   },
   refresh() {