turbo-rails 2.0.5 → 2.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 49c33a9c7eaf917754b0deb21c776b9db3a457e09453bfb4da400ce2ea676b6f
-  data.tar.gz: a6823b945a543045681165fa5f429cc3a7fe0928b6ae274505b61a20dee90662
+  metadata.gz: 4553ee49b6504b50ebd79364400cd57bcba2a4fd544aff65f88a4c5a12ffdaac
+  data.tar.gz: 7500ba88dc381e1601b0778c31e68be1a16ce72dcc535bbd8b54ba4eebac5d0e
 SHA512:
-  metadata.gz: 93ae8bb2c473aa705eb4b46ba0fe35fc61aa71513993755f2d33fbb6fcdec96881f19b9ae020e46d0dab98aaa8b771ba0dff26c2317370126404d7883d81a51e
-  data.tar.gz: 303817c62ed4ce953084dae5e11025501eddab78398783d4266394b81fb4f5622486160abf30959633cea66a5b5a3aaf9c94cce82da2d0e5148cd98d60e32512
+  metadata.gz: 40376048e8a552fb9ac3570e6fce78f7d0741cdab4b8d3851305fb5541f50dd381a4d9616e7c4fb147a1d58d7b546ab6d07061ac79f3851b8163605084cabc62
+  data.tar.gz: 85414d553bc478bf46ba0294381b09031e58949edd93d47e8f02b721a0fcb556388a5b3b20741a3011f3547fb0281d9bdbcc7e518a97df27953474ce3d012add

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"
 ```
 
@@ -109,9 +109,8 @@ This gem is automatically configured for applications made with Rails 7+ (unless
 1. Add the `turbo-rails` gem to your Gemfile: `gem 'turbo-rails'`
 2. Run `./bin/bundle install`
 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)).
 
@@ -125,6 +124,8 @@ import "@hotwired/turbo-rails"
 
 You can watch [the video introduction to Hotwire](https://hotwired.dev/#screencast), which focuses extensively on demonstrating Turbo in a Rails demo. Then you should familiarize yourself with [Turbo handbook](https://turbo.hotwired.dev/handbook/introduction) to understand Drive, Frames, and Streams in-depth. Finally, dive into the code documentation by starting with [`Turbo::FramesHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb), [`Turbo::StreamsHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/streams_helper.rb), [`Turbo::Streams::TagBuilder`](https://github.com/hotwired/turbo-rails/blob/main/app/models/turbo/streams/tag_builder.rb), and [`Turbo::Broadcastable`](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb).
 
+Note that in development, the default Action Cable adapter is the single-process `async` adapter. This means that turbo updates are only broadcast within that same process. So you can't start `bin/rails console` and trigger Turbo broadcasts and expect them to show up in a browser connected to a server running in a separate `bin/dev` or `bin/rails server` process. Instead, you should use the web-console when needing to manaually trigger Turbo broadcasts inside the same process. Add "console" to any action or "<%= console %>" in any view to make the web console appear.  
+
 ### RubyDoc Documentation
 
 For the API documentation covering this gem's classes and packages, [visit the RubyDoc page](https://rubydoc.info/github/hotwired/turbo-rails/main).
@@ -152,10 +153,56 @@ 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.
+
+## Contributing
+
+Having a way to reproduce your issue will help people confirm, investigate, and ultimately fix your issue. You can do this by providing an executable test case. To make this process easier, we have prepared an [executable bug report Rails application](./bug_report_template.rb) for you to use as a starting point.
+
+This template includes the boilerplate code to set up a System Test case. Copy the content of the template into a `.rb` file and make the necessary changes to demonstrate the issue. You can execute it by running `ruby the_file.rb` in your terminal. If all goes well, you should see your test case failing.
+
+You can then share your executable test case as a gist or paste the content into the issue description.
+
 ## 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.4
+Turbo 8.0.5
 Copyright © 2024 37signals LLC
  */
 (function(prototype) {
@@ -483,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) {
@@ -596,7 +600,7 @@ class FetchRequest {
     this.fetchOptions = {
       credentials: "same-origin",
       redirect: "follow",
-      method: method,
+      method: method.toUpperCase(),
       headers: {
         ...this.defaultHeaders
       },
@@ -616,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;
@@ -1166,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 {
@@ -1307,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();
@@ -1326,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;
   }
 }
 
@@ -1358,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();
@@ -1496,6 +1494,9 @@ class Renderer {
   get shouldRender() {
     return true;
   }
+  get shouldAutofocus() {
+    return true;
+  }
   get reloadReason() {
     return;
   }
@@ -1513,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) {
@@ -2629,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;
@@ -2798,6 +2801,7 @@ class Navigator {
   }
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
+    delete this.currentVisit;
   }
   locationWithActionIsSamePage(location, action) {
     const anchor = getAnchor(location);
@@ -3628,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) {
@@ -3796,108 +3874,47 @@ 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
+        beforeNodeMorphed: element => !canRefreshFrame(element)
       }
     });
-  }
-  #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;
-      }
+    for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+      if (canRefreshFrame(frame)) refreshFrame(frame);
     }
-  };
-  #shouldUpdateAttribute=(attributeName, target, mutationType) => {
-    const event = dispatch("turbo:before-morph-attribute", {
-      cancelable: true,
-      target: target,
-      detail: {
-        attributeName: attributeName,
-        mutationType: mutationType
-      }
-    });
-    return !event.defaultPrevented;
-  };
-  #didMorphElement=(oldNode, newNode) => {
-    if (newNode instanceof HTMLElement) {
-      dispatch("turbo:morph-element", {
-        target: oldNode,
-        detail: {
-          newElement: newNode
-        }
-      });
-    }
-  };
-  #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 {
   keys=[];
   snapshots={};
@@ -3951,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 {
@@ -4143,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
@@ -4969,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() {