turbo-rails 0.5.10 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1abdc38a6d5a735bf6bbd2ff6fb8db49ea74d14e3452afa5c2bda93b23ffb073
-  data.tar.gz: 0bf468488fd8232fec62b975fb9f0ef5449325cf57b932858e03af876d0548e6
+  metadata.gz: d791adac758f16b877d9d7c1ed0706e9bb684ba6238f94c3a1de0dcc424b85d4
+  data.tar.gz: 9a60a2a70b4b732687220f2cd209454b02a963a450af1ce07ff49708ad8bf0cd
 SHA512:
-  metadata.gz: 79272181e9d15ab14434ba684ac33a2fa186df4fa15462d2ad96a77caaeb8caaf111beebd9bf70f67b7fee3eae0e35c5af5f6e86a4e2c970f07c7b1c58e983bf
-  data.tar.gz: ed1f850a041f5d66ae7bafa8264ac3ee5679db81eb5f91869e4e8624ef0cfadb92f345e9f1de192ee917a568deb866e1231db248820ecdb0afcafc96f8296dc4
+  metadata.gz: 2c76c8475cb8509f86208a3553e6561d6dcaec91198d226aa2c23a6b9d45c0615db36cab291b77b82001330c46de12923c817250aa93d2ba9e28bc37b5fbd4b1
+  data.tar.gz: c78eb044de3328bb08edb26f552716df709913c640676ff1156ee878e956cc3d860f9a1f82fbe5889491182092563a83708dda4721db1747769b927fac1956a7

data/README.md

@@ -1,6 +1,6 @@
 # Turbo
 
-[Turbo](https://turbo.hotwire.dev) gives you the speed of a single-page web application without having to write any JavaScript. Turbo accelerates links and form submissions without requiring you to change your server-side generated HTML. It lets you carve up a page into independent frames, which can be lazy-loaded and operate as independent components. And finally, helps you make partial page updates using just HTML and a set of CRUD-like container tags. These three techniques reduce the amount of custom JavaScript that many web applications need to write by an order of magnitude. And for the few dynamic bits that are left, you're invited to finish the job with [Stimulus](https://github.com/hotwired/stimulus).
+[Turbo](https://turbo.hotwired.dev) gives you the speed of a single-page web application without having to write any JavaScript. Turbo accelerates links and form submissions without requiring you to change your server-side generated HTML. It lets you carve up a page into independent frames, which can be lazy-loaded and operate as independent components. And finally, helps you make partial page updates using just HTML and a set of CRUD-like container tags. These three techniques reduce the amount of custom JavaScript that many web applications need to write by an order of magnitude. And for the few dynamic bits that are left, you're invited to finish the job with [Stimulus](https://github.com/hotwired/stimulus).
 
 On top of accelerating web applications, Turbo was built from the ground-up to form the foundation of hybrid native applications. Write the navigational shell of your Android or iOS app using the standard platform tooling, then seamlessly fill in features from the web, following native navigation patterns. Not every mobile screen needs to be written in Swift or Kotlin to feel native. With Turbo, you spend less time wrangling JSON, waiting on app stores to approve updates, or reimplementing features you've already created in HTML.
 
@@ -38,34 +38,31 @@ The JavaScript for Turbo can either be run through the asset pipeline, which is
 2. Run `./bin/bundle install`
 3. Run `./bin/rails turbo:install`
 
-Running `turbo:install` will install through NPM if Webpacker is installed in the application. Otherwise the asset pipeline version is used.
+Running `turbo:install` will install through NPM if Webpacker is installed 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 Webpack and need to use either the cable consumer or the Turbo instance, you can import [`Turbo`](https://turbo.hotwire.dev/reference/drive) and/or [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { Turbo, 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)).
+If you're using Webpack 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)).
 
-If you're using a [native adapter](https://turbo.hotwire.dev/handbook/native), you'll need to assign `window.Turbo`, even if it's not used for anything else:
+The `Turbo` instance is automatically assigned to `window.Turbo` upon import:
 
 ```js
-import { Turbo } from "@hotwired/turbo-rails"
-window.Turbo = Turbo
+import "@hotwired/turbo-rails"
 ```
 
 ## Usage
 
-You can watch [the video introduction to Hotwire](https://hotwire.dev/#screencast), which focuses extensively on demonstration Turbo in a Rails demo. Then you should familiarize yourself with [Turbo handbook](https://turbo.hotwire.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).
+You can watch [the video introduction to Hotwire](https://hotwired.dev/#screencast), which focuses extensively on demonstration 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).
 
 
 ## Compatibility with Rails UJS
 
-Rails UJS includes helpers for sending links and forms over XMLHttpRequest, so you can respond with Ajax. Turbo supersedes this functionality, so you should ensure that you're either running Rails 6.1 with the defaults that turn this off for forms, or that you add `config.action_view.form_with_generates_remote_forms = false` to your `config/application.rb`.
-
-Note that the helpers that turn `link_to` into remote invocations will _not_ currently work with Turbo. Links that have been made remote will not stick within frames nor will they allow you to respond with turbo stream actions. The recommendation is to replace these links with styled `button_to`, so you'll flow through a regular form, and you'll be better off with a11y compliance.
-
-You can still use the `data-confirm` and `data-disable-with`.
+Turbo can coexist with Rails UJS, but you need to take a series of upgrade steps to make it happen. See [the upgrading guide](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md).
 
 
 ## Development
 
 * To run the Rails tests: `bundle exec rake`.
+  * To install dependencies: `bundle install`
+  * To prepare the test database: `cd test/dummy; RAILS_ENV=test ./bin/rails db:migrate`
 * To compile the JavaScript for the asset pipeline: `yarn build`
 
 

data/app/assets/javascripts/turbo.js

@@ -63,6 +63,11 @@ class FrameElement extends HTMLElement {
   disconnectedCallback() {
     this.delegate.disconnect();
   }
+  reload() {
+    const {src: src} = this;
+    this.src = null;
+    this.src = src;
+  }
   attributeChangedCallback(name) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged();
@@ -144,8 +149,6 @@ function getAnchor(url) {
     return url.hash.slice(1);
   } else if (anchorMatch = url.href.match(/#(.*)$/)) {
     return anchorMatch[1];
-  } else {
-    return "";
   }
 }
 
@@ -162,13 +165,13 @@ function isPrefixedBy(baseURL, url) {
   return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
 }
 
+function getRequestURL(url) {
+  const anchor = getAnchor(url);
+  return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
+}
+
 function toCacheKey(url) {
-  const anchorLength = url.hash.length;
-  if (anchorLength < 2) {
-    return url.href;
-  } else {
-    return url.href.slice(0, -anchorLength);
-  }
+  return getRequestURL(url);
 }
 
 function urlsAreEqual(left, right) {
@@ -325,6 +328,7 @@ function fetchMethodFromString(method) {
 class FetchRequest {
   constructor(delegate, method, location, body = new URLSearchParams) {
     this.abortController = new AbortController;
+    this.resolveRequestPromise = value => {};
     this.delegate = delegate;
     this.method = method;
     this.headers = this.defaultHeaders;
@@ -351,11 +355,7 @@ class FetchRequest {
     var _a, _b;
     const {fetchOptions: fetchOptions} = this;
     (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
-    dispatch("turbo:before-fetch-request", {
-      detail: {
-        fetchOptions: fetchOptions
-      }
-    });
+    await this.allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
       const response = await fetch(this.url.href, fetchOptions);
@@ -405,6 +405,18 @@ class FetchRequest {
   get abortSignal() {
     return this.abortController.signal;
   }
+  async allowRequestToBeIntercepted(fetchOptions) {
+    const requestInterception = new Promise((resolve => this.resolveRequestPromise = resolve));
+    const event = dispatch("turbo:before-fetch-request", {
+      cancelable: true,
+      detail: {
+        fetchOptions: fetchOptions,
+        url: this.url.href,
+        resume: this.resolveRequestPromise
+      }
+    });
+    if (event.defaultPrevented) await requestInterception;
+  }
 }
 
 function mergeFormDataEntries(url, entries) {
@@ -736,6 +748,8 @@ class FormInterceptor {
 
 class View {
   constructor(delegate, element) {
+    this.resolveRenderPromise = value => {};
+    this.resolveInterceptionPromise = value => {};
     this.delegate = delegate;
     this.element = element;
   }
@@ -743,6 +757,7 @@ class View {
     const element = this.snapshot.getElementForAnchor(anchor);
     if (element) {
       this.scrollToElement(element);
+      this.focusElement(element);
     } else {
       this.scrollToPosition({
         x: 0,
@@ -750,9 +765,23 @@ class View {
       });
     }
   }
+  scrollToAnchorFromLocation(location) {
+    this.scrollToAnchor(getAnchor(location));
+  }
   scrollToElement(element) {
     element.scrollIntoView();
   }
+  focusElement(element) {
+    if (element instanceof HTMLElement) {
+      if (element.hasAttribute("tabindex")) {
+        element.focus();
+      } else {
+        element.setAttribute("tabindex", "-1");
+        element.focus();
+        element.removeAttribute("tabindex");
+      }
+    }
+  }
   scrollToPosition({x: x, y: y}) {
     this.scrollRoot.scrollTo(x, y);
   }
@@ -760,20 +789,22 @@ class View {
     return window;
   }
   async render(renderer) {
-    if (this.renderer) {
-      throw new Error("rendering is already in progress");
-    }
     const {isPreview: isPreview, shouldRender: shouldRender, newSnapshot: snapshot} = renderer;
     if (shouldRender) {
       try {
+        this.renderPromise = new Promise((resolve => this.resolveRenderPromise = resolve));
         this.renderer = renderer;
         this.prepareToRenderSnapshot(renderer);
-        this.delegate.viewWillRenderSnapshot(snapshot, isPreview);
+        const renderInterception = new Promise((resolve => this.resolveInterceptionPromise = resolve));
+        const immediateRender = this.delegate.allowsImmediateRender(snapshot, this.resolveInterceptionPromise);
+        if (!immediateRender) await renderInterception;
         await this.renderSnapshot(renderer);
         this.delegate.viewRenderedSnapshot(snapshot, isPreview);
         this.finishRenderingSnapshot(renderer);
       } finally {
         delete this.renderer;
+        this.resolveRenderPromise(undefined);
+        delete this.renderPromise;
       }
     } else {
       this.invalidate();
@@ -824,7 +855,7 @@ class LinkInterceptor {
         if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
           this.clickEvent.preventDefault();
           event.preventDefault();
-          this.convertLinkWithMethodClickToFormSubmission(event.target) || this.delegate.linkClickIntercepted(event.target, event.detail.url);
+          this.delegate.linkClickIntercepted(event.target, event.detail.url);
         }
       }
       delete this.clickEvent;
@@ -845,21 +876,6 @@ class LinkInterceptor {
     document.removeEventListener("turbo:click", this.linkClicked);
     document.removeEventListener("turbo:before-visit", this.willVisit);
   }
-  convertLinkWithMethodClickToFormSubmission(link) {
-    var _a;
-    const linkMethod = link.getAttribute("data-turbo-method") || link.getAttribute("data-method");
-    if (linkMethod) {
-      const form = document.createElement("form");
-      form.method = linkMethod;
-      form.action = link.getAttribute("href") || "undefined";
-      (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
-      return dispatch("submit", {
-        target: form
-      });
-    } else {
-      return false;
-    }
-  }
   respondsToEventTarget(target) {
     const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
     return element && element.closest("turbo-frame, html") == this.element;
@@ -943,6 +959,9 @@ class Renderer {
       return element;
     } else {
       const createdScriptElement = document.createElement("script");
+      if (this.cspNonce) {
+        createdScriptElement.nonce = this.cspNonce;
+      }
       createdScriptElement.textContent = element.textContent;
       createdScriptElement.async = false;
       copyElementAttributes(createdScriptElement, element);
@@ -970,6 +989,10 @@ class Renderer {
   get permanentElementMap() {
     return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot);
   }
+  get cspNonce() {
+    var _a;
+    return (_a = document.head.querySelector('meta[name="csp-nonce"]')) === null || _a === void 0 ? void 0 : _a.getAttribute("content");
+  }
 }
 
 function copyElementAttributes(destinationElement, sourceElement) {
@@ -994,6 +1017,8 @@ class FrameRenderer extends Renderer {
     this.scrollFrameIntoView();
     await nextAnimationFrame();
     this.focusFirstAutofocusableElement();
+    await nextAnimationFrame();
+    this.activateScriptElements();
   }
   loadFrameElement() {
     var _a;
@@ -1020,6 +1045,15 @@ class FrameRenderer extends Renderer {
     }
     return false;
   }
+  activateScriptElements() {
+    for (const inertScriptElement of this.newScriptElements) {
+      const activatedScriptElement = this.createScriptElement(inertScriptElement);
+      inertScriptElement.replaceWith(activatedScriptElement);
+    }
+  }
+  get newScriptElements() {
+    return this.currentElement.querySelectorAll("script");
+  }
 }
 
 function readScrollLogicalPosition(value, defaultValue) {
@@ -1132,7 +1166,7 @@ ProgressBar.animationDuration = 300;
 class HeadSnapshot extends Snapshot {
   constructor() {
     super(...arguments);
-    this.detailsByOuterHTML = this.children.reduce(((result, element) => {
+    this.detailsByOuterHTML = this.children.filter((element => !elementIsNoscript(element))).reduce(((result, element) => {
       const {outerHTML: outerHTML} = element;
       const details = outerHTML in result ? result[outerHTML] : {
         type: elementType(element),
@@ -1199,6 +1233,11 @@ function elementIsScript(element) {
   return tagName == "script";
 }
 
+function elementIsNoscript(element) {
+  const tagName = element.tagName.toLowerCase();
+  return tagName == "noscript";
+}
+
 function elementIsStylesheet(element) {
   const tagName = element.tagName.toLowerCase();
   return tagName == "style" || tagName == "link" && element.getAttribute("rel") == "stylesheet";
@@ -1301,6 +1340,7 @@ class Visit {
     this.referrer = referrer;
     this.snapshotHTML = snapshotHTML;
     this.response = response;
+    this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
   }
   get adapter() {
     return this.delegate.adapter;
@@ -1393,6 +1433,7 @@ class Visit {
       const {statusCode: statusCode, responseHTML: responseHTML} = this.response;
       this.render((async () => {
         this.cacheSnapshot();
+        if (this.view.renderPromise) await this.view.renderPromise;
         if (isSuccessful(statusCode) && responseHTML != null) {
           await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML));
           this.adapter.visitRendered(this);
@@ -1427,10 +1468,15 @@ class Visit {
       const isPreview = this.shouldIssueRequest();
       this.render((async () => {
         this.cacheSnapshot();
-        await this.view.renderPage(snapshot, isPreview);
-        this.adapter.visitRendered(this);
-        if (!isPreview) {
-          this.complete();
+        if (this.isSamePage) {
+          this.adapter.visitRendered(this);
+        } else {
+          if (this.view.renderPromise) await this.view.renderPromise;
+          await this.view.renderPage(snapshot, isPreview);
+          this.adapter.visitRendered(this);
+          if (!isPreview) {
+            this.complete();
+          }
         }
       }));
     }
@@ -1442,6 +1488,14 @@ class Visit {
       this.followedRedirect = true;
     }
   }
+  goToSamePageAnchor() {
+    if (this.isSamePage) {
+      this.render((async () => {
+        this.cacheSnapshot();
+        this.adapter.visitRendered(this);
+      }));
+    }
+  }
   requestStarted() {
     this.startRequest();
   }
@@ -1484,10 +1538,13 @@ class Visit {
   performScroll() {
     if (!this.scrolled) {
       if (this.action == "restore") {
-        this.scrollToRestoredPosition() || this.scrollToTop();
+        this.scrollToRestoredPosition() || this.scrollToAnchor() || this.scrollToTop();
       } else {
         this.scrollToAnchor() || this.scrollToTop();
       }
+      if (this.isSamePage) {
+        this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
+      }
       this.scrolled = true;
     }
   }
@@ -1499,8 +1556,9 @@ class Visit {
     }
   }
   scrollToAnchor() {
-    if (getAnchor(this.location)) {
-      this.view.scrollToAnchor(getAnchor(this.location));
+    const anchor = getAnchor(this.location);
+    if (anchor != null) {
+      this.view.scrollToAnchor(anchor);
       return true;
     }
   }
@@ -1530,7 +1588,13 @@ class Visit {
     return typeof this.response == "object";
   }
   shouldIssueRequest() {
-    return this.action == "restore" ? !this.hasCachedSnapshot() : true;
+    if (this.isSamePage) {
+      return false;
+    } else if (this.action == "restore") {
+      return !this.hasCachedSnapshot();
+    } else {
+      return true;
+    }
   }
   cacheSnapshot() {
     if (!this.snapshotCached) {
@@ -1543,7 +1607,7 @@ class Visit {
     await new Promise((resolve => {
       this.frame = requestAnimationFrame((() => resolve()));
     }));
-    callback();
+    await callback();
     delete this.frame;
     this.performScroll();
   }
@@ -1573,6 +1637,7 @@ class BrowserAdapter {
   visitStarted(visit) {
     visit.issueRequest();
     visit.changeHistory();
+    visit.goToSamePageAnchor();
     visit.loadCachedSnapshot();
   }
   visitRequestStarted(visit) {
@@ -1627,6 +1692,30 @@ class BrowserAdapter {
   }
 }
 
+class CacheObserver {
+  constructor() {
+    this.started = false;
+  }
+  start() {
+    if (!this.started) {
+      this.started = true;
+      addEventListener("turbo:before-cache", this.removeStaleElements, false);
+    }
+  }
+  stop() {
+    if (this.started) {
+      this.started = false;
+      removeEventListener("turbo:before-cache", this.removeStaleElements, false);
+    }
+  }
+  removeStaleElements() {
+    const staleElements = [ ...document.querySelectorAll('[data-turbo-cache="false"]') ];
+    for (const element of staleElements) {
+      element.remove();
+    }
+  }
+}
+
 class FormSubmitObserver {
   constructor(delegate) {
     this.started = false;
@@ -1926,6 +2015,12 @@ class Navigator {
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
   }
+  locationWithActionIsSamePage(location, action) {
+    return getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) && (getAnchor(location) != null || action == "restore");
+  }
+  visitScrolledToSamePageLocation(oldURL, newURL) {
+    this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
+  }
   get location() {
     return this.history.location;
   }
@@ -2216,7 +2311,7 @@ class PageRenderer extends Renderer {
     return this.newHeadSnapshot.provisionalElements;
   }
   get newBodyScriptElements() {
-    return [ ...this.newElement.querySelectorAll("script") ];
+    return this.newElement.querySelectorAll("script");
   }
 }
 
@@ -2276,7 +2371,7 @@ class PageView extends View {
   }
   renderError(snapshot) {
     const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
-    this.render(renderer);
+    return this.render(renderer);
   }
   clearSnapshotCache() {
     this.snapshotCache.clear();
@@ -2307,6 +2402,7 @@ class Session {
     this.view = new PageView(this, document.documentElement);
     this.adapter = new BrowserAdapter(this);
     this.pageObserver = new PageObserver(this);
+    this.cacheObserver = new CacheObserver;
     this.linkClickObserver = new LinkClickObserver(this);
     this.formSubmitObserver = new FormSubmitObserver(this);
     this.scrollObserver = new ScrollObserver(this);
@@ -2319,6 +2415,7 @@ class Session {
   start() {
     if (!this.started) {
       this.pageObserver.start();
+      this.cacheObserver.start();
       this.linkClickObserver.start();
       this.formSubmitObserver.start();
       this.scrollObserver.start();
@@ -2335,6 +2432,7 @@ class Session {
   stop() {
     if (this.started) {
       this.pageObserver.stop();
+      this.cacheObserver.stop();
       this.linkClickObserver.stop();
       this.formSubmitObserver.stop();
       this.scrollObserver.stop();
@@ -2371,9 +2469,9 @@ class Session {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  historyPoppedToLocationWithRestorationIdentifier(location) {
+  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
     if (this.enabled) {
-      this.navigator.proposeVisit(location, {
+      this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
         historyChanged: true
       });
@@ -2391,10 +2489,26 @@ class Session {
   }
   followedLinkToLocation(link, location) {
     const action = this.getActionForLink(link);
-    this.visit(location.href, {
+    this.convertLinkWithMethodClickToFormSubmission(link) || this.visit(location.href, {
       action: action
     });
   }
+  convertLinkWithMethodClickToFormSubmission(link) {
+    var _a;
+    const linkMethod = link.getAttribute("data-turbo-method");
+    if (linkMethod) {
+      const form = document.createElement("form");
+      form.method = linkMethod;
+      form.action = link.getAttribute("href") || "undefined";
+      (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
+      return dispatch("submit", {
+        cancelable: true,
+        target: form
+      });
+    } else {
+      return false;
+    }
+  }
   allowsVisitingLocation(location) {
     return this.applicationAllowsVisitingLocation(location);
   }
@@ -2404,11 +2518,17 @@ class Session {
   }
   visitStarted(visit) {
     extendURLWithDeprecatedProperties(visit.location);
-    this.notifyApplicationAfterVisitingLocation(visit.location);
+    this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
   }
   visitCompleted(visit) {
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
+  locationWithActionIsSamePage(location, action) {
+    return this.navigator.locationWithActionIsSamePage(location, action);
+  }
+  visitScrolledToSamePageLocation(oldURL, newURL) {
+    this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
+  }
   willSubmitForm(form, submitter) {
     return elementIsNavigable(form) && elementIsNavigable(submitter);
   }
@@ -2431,8 +2551,9 @@ class Session {
   viewWillCacheSnapshot() {
     this.notifyApplicationBeforeCachingSnapshot();
   }
-  viewWillRenderSnapshot({element: element}, isPreview) {
-    this.notifyApplicationBeforeRender(element);
+  allowsImmediateRender({element: element}, resume) {
+    const event = this.notifyApplicationBeforeRender(element, resume);
+    return !event.defaultPrevented;
   }
   viewRenderedSnapshot(snapshot, isPreview) {
     this.view.lastRenderedLocation = this.history.location;
@@ -2466,21 +2587,24 @@ class Session {
       cancelable: true
     });
   }
-  notifyApplicationAfterVisitingLocation(location) {
+  notifyApplicationAfterVisitingLocation(location, action) {
     return dispatch("turbo:visit", {
       detail: {
-        url: location.href
+        url: location.href,
+        action: action
       }
     });
   }
   notifyApplicationBeforeCachingSnapshot() {
     return dispatch("turbo:before-cache");
   }
-  notifyApplicationBeforeRender(newBody) {
+  notifyApplicationBeforeRender(newBody, resume) {
     return dispatch("turbo:before-render", {
       detail: {
-        newBody: newBody
-      }
+        newBody: newBody,
+        resume: resume
+      },
+      cancelable: true
     });
   }
   notifyApplicationAfterRender() {
@@ -2494,6 +2618,12 @@ class Session {
       }
     });
   }
+  notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
+    dispatchEvent(new HashChangeEvent("hashchange", {
+      oldURL: oldURL.toString(),
+      newURL: newURL.toString()
+    }));
+  }
   getActionForLink(link) {
     const action = link.getAttribute("data-turbo-action");
     return isAction(action) ? action : "advance";
@@ -2603,6 +2733,7 @@ class FrameController {
         const {body: body} = parseHTMLDocument(html);
         const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
         const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+        if (this.view.renderPromise) await this.view.renderPromise;
         await this.view.render(renderer);
       }
     } catch (error) {
@@ -2614,7 +2745,11 @@ class FrameController {
     this.loadSourceURL();
   }
   shouldInterceptLinkClick(element, url) {
-    return this.shouldInterceptNavigation(element);
+    if (element.hasAttribute("data-turbo-method")) {
+      return false;
+    } else {
+      return this.shouldInterceptNavigation(element);
+    }
   }
   linkClickIntercepted(element, url) {
     this.navigateFrame(element, url);
@@ -2677,7 +2812,9 @@ class FrameController {
     const frame = this.findFrameElement(formSubmission.formElement);
     frame.removeAttribute("busy");
   }
-  viewWillRenderSnapshot(snapshot, isPreview) {}
+  allowsImmediateRender(snapshot, resume) {
+    return true;
+  }
   viewRenderedSnapshot(snapshot, isPreview) {}
   viewInvalidated() {}
   async visit(url) {
@@ -2749,13 +2886,14 @@ class FrameController {
   set sourceURL(sourceURL) {
     this.settingSourceURL = true;
     this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
+    this.currentURL = this.element.src;
     this.settingSourceURL = false;
   }
   get loadingStyle() {
     return this.element.loading;
   }
   get isLoading() {
-    return this.formSubmission !== undefined || this.resolveVisitPromise !== undefined;
+    return this.formSubmission !== undefined || this.resolveVisitPromise() !== undefined;
   }
   get isActive() {
     return this.element.isActive && this.connected;
@@ -2789,36 +2927,36 @@ function activateElement(element, currentURL) {
 
 const StreamActions = {
   after() {
-    var _a, _b;
-    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement.nextSibling);
+    this.targetElements.forEach((e => {
+      var _a;
+      return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e.nextSibling);
+    }));
   },
   append() {
-    var _a;
     this.removeDuplicateTargetChildren();
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.append(this.templateContent);
+    this.targetElements.forEach((e => e.append(this.templateContent)));
   },
   before() {
-    var _a, _b;
-    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement);
+    this.targetElements.forEach((e => {
+      var _a;
+      return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e);
+    }));
   },
   prepend() {
-    var _a;
     this.removeDuplicateTargetChildren();
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.prepend(this.templateContent);
+    this.targetElements.forEach((e => e.prepend(this.templateContent)));
   },
   remove() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.remove();
+    this.targetElements.forEach((e => e.remove()));
   },
   replace() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.replaceWith(this.templateContent);
+    this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
   },
   update() {
-    if (this.targetElement) {
-      this.targetElement.innerHTML = "";
-      this.targetElement.append(this.templateContent);
-    }
+    this.targetElements.forEach((e => {
+      e.innerHTML = "";
+      e.append(this.templateContent);
+    }));
   }
 };
 
@@ -2847,19 +2985,13 @@ class StreamElement extends HTMLElement {
     } catch (_a) {}
   }
   removeDuplicateTargetChildren() {
-    this.duplicateChildren.forEach((({targetChild: targetChild}) => {
-      targetChild.remove();
-    }));
+    this.duplicateChildren.forEach((c => c.remove()));
   }
   get duplicateChildren() {
     var _a;
-    return [ ...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children ].map((templateChild => {
-      let targetChild = [ ...this.targetElement.children ].filter((c => c.id === templateChild.id))[0];
-      return {
-        targetChild: targetChild,
-        templateChild: templateChild
-      };
-    })).filter((({targetChild: targetChild}) => targetChild));
+    const existingChildren = this.targetElements.flatMap((e => [ ...e.children ])).filter((c => !!c.id));
+    const newChildrenIds = [ ...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children ].filter((c => !!c.id)).map((c => c.id));
+    return existingChildren.filter((c => newChildrenIds.includes(c.id)));
   }
   get performAction() {
     if (this.action) {
@@ -2871,15 +3003,17 @@ class StreamElement extends HTMLElement {
     }
     this.raise("action attribute is missing");
   }
-  get targetElement() {
-    var _a;
+  get targetElements() {
     if (this.target) {
-      return (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.getElementById(this.target);
+      return this.targetElementsById;
+    } else if (this.targets) {
+      return this.targetElementsByQuery;
+    } else {
+      this.raise("target or targets attribute is missing");
     }
-    this.raise("target attribute is missing");
   }
   get templateContent() {
-    return this.templateElement.content;
+    return this.templateElement.content.cloneNode(true);
   }
   get templateElement() {
     if (this.firstElementChild instanceof HTMLTemplateElement) {
@@ -2893,6 +3027,9 @@ class StreamElement extends HTMLElement {
   get target() {
     return this.getAttribute("target");
   }
+  get targets() {
+    return this.getAttribute("targets");
+  }
   raise(message) {
     throw new Error(`${this.description}: ${message}`);
   }
@@ -2906,6 +3043,24 @@ class StreamElement extends HTMLElement {
       cancelable: true
     });
   }
+  get targetElementsById() {
+    var _a;
+    const element = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.getElementById(this.target);
+    if (element !== null) {
+      return [ element ];
+    } else {
+      return [];
+    }
+  }
+  get targetElementsByQuery() {
+    var _a;
+    const elements = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.targets);
+    if (elements.length !== 0) {
+      return Array.prototype.slice.call(elements);
+    } else {
+      return [];
+    }
+  }
 }
 
 FrameElement.delegateConstructor = FrameController;
@@ -2925,7 +3080,7 @@ customElements.define("turbo-stream", StreamElement);
 
         Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
 
-        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements
+        For more information, see: https://turbo.hotwired.dev/handbook/building#working-with-script-elements
 
         ——
         Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
@@ -2973,6 +3128,8 @@ function setProgressBarDelay(delay) {
 var Turbo = Object.freeze({
   __proto__: null,
   navigator: navigator,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -2989,6 +3146,8 @@ start();
 
 var turbo_es2017Esm = Object.freeze({
   __proto__: null,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,

data/app/channels/turbo/streams/broadcasts.rb

@@ -13,6 +13,10 @@ module Turbo::Streams::Broadcasts
     broadcast_action_to *streamables, action: :replace, target: target, **rendering
   end
 
+  def broadcast_update_to(*streamables, target:, **rendering)
+    broadcast_action_to *streamables, action: :update, target: target, **rendering
+  end
+
   def broadcast_before_to(*streamables, target:, **rendering)
     broadcast_action_to *streamables, action: :before, target: target, **rendering
   end
@@ -40,6 +44,10 @@ module Turbo::Streams::Broadcasts
     broadcast_action_later_to *streamables, action: :replace, target: target, **rendering
   end
 
+  def broadcast_update_later_to(*streamables, target:, **rendering)
+    broadcast_action_later_to *streamables, action: :update, target: target, **rendering
+  end
+
   def broadcast_before_later_to(*streamables, target:, **rendering)
     broadcast_action_later_to *streamables, action: :before, target: target, **rendering
   end

data/app/helpers/turbo/streams/action_helper.rb

@@ -6,11 +6,20 @@ module Turbo::Streams::ActionHelper
   #
   #   turbo_stream_action_tag "replace", target: "message_1", template: %(<div id="message_1">Hello!</div>)
   #   # => <turbo-stream action="replace" target="message_1"><template><div id="message_1">Hello!</div></template></turbo-stream>
-  def turbo_stream_action_tag(action, target:, template: nil)
-    target   = convert_to_turbo_stream_dom_id(target)
+  #
+  #   turbo_stream_action_tag "replace", targets: "message_1", template: %(<div id="message_1">Hello!</div>)
+  #   # => <turbo-stream action="replace" targets="message_1"><template><div id="message_1">Hello!</div></template></turbo-stream>
+  def turbo_stream_action_tag(action, target: nil, targets: nil, template: nil)
     template = action.to_sym == :remove ? "" : "<template>#{template}</template>"
 
-    %(<turbo-stream action="#{action}" target="#{target}">#{template}</turbo-stream>).html_safe
+    if target
+      target = convert_to_turbo_stream_dom_id(target)
+      %(<turbo-stream action="#{action}" target="#{target}">#{template}</turbo-stream>).html_safe
+    elsif targets
+      %(<turbo-stream action="#{action}" targets="#{targets}">#{template}</turbo-stream>).html_safe
+    else
+      raise ArgumentError, "target or targets must be supplied"
+    end
   end
 
   private

data/app/models/concerns/turbo/broadcastable.rb

@@ -75,8 +75,8 @@ module Turbo::Broadcastable
   #
   #   # Sends <turbo-stream action="remove" target="clearance_5"></turbo-stream> to the stream named "identity:2:clearances"
   #   clearance.broadcast_remove_to examiner.identity, :clearances
-  def broadcast_remove_to(*streamables)
-    Turbo::StreamsChannel.broadcast_remove_to *streamables, target: self
+  def broadcast_remove_to(*streamables, target: self)
+    Turbo::StreamsChannel.broadcast_remove_to *streamables, target: target
   end
 
   # Same as <tt>#broadcast_remove_to</tt>, but the designated stream is automatically set to the current model.
@@ -103,6 +103,25 @@ module Turbo::Broadcastable
     broadcast_replace_to self, **rendering
   end
 
+  # Update this broadcastable model in the dom for subscribers of the stream name identified by the passed
+  # <tt>streamables</tt>. The rendering parameters can be set by appending named arguments to the call. Examples:
+  #
+  #   # Sends <turbo-stream action="update" target="clearance_5"><template><div id="clearance_5">My Clearance</div></template></turbo-stream>
+  #   # to the stream named "identity:2:clearances"
+  #   clearance.broadcast_update_to examiner.identity, :clearances
+  #
+  #   # Sends <turbo-stream action="update" target="clearance_5"><template><div id="clearance_5">Other partial</div></template></turbo-stream>
+  #   # to the stream named "identity:2:clearances"
+  #   clearance.broadcast_update_to examiner.identity, :clearances, partial: "clearances/other_partial", locals: { a: 1 }
+  def broadcast_update_to(*streamables, **rendering)
+    Turbo::StreamsChannel.broadcast_update_to *streamables, target: self, **broadcast_rendering_with_defaults(rendering)
+  end
+
+  # Same as <tt>#broadcast_update_to</tt>, but the designated stream is automatically set to the current model.
+  def broadcast_update(**rendering)
+    broadcast_update_to self, **rendering
+  end
+
   # Insert a rendering of this broadcastable model before the target identified by it's dom id passed as <tt>target</tt>
   # for subscribers of the stream name identified by the passed <tt>streamables</tt>. The rendering parameters can be set by
   # appending named arguments to the call. Examples:
@@ -202,6 +221,16 @@ module Turbo::Broadcastable
     broadcast_replace_later_to self, **rendering
   end
 
+  # Same as <tt>broadcast_update_to</tt> but run asynchronously via a <tt>Turbo::Streams::BroadcastJob</tt>.
+  def broadcast_update_later_to(*streamables, **rendering)
+    Turbo::StreamsChannel.broadcast_update_later_to *streamables, target: self, **broadcast_rendering_with_defaults(rendering)
+  end
+
+  # Same as <tt>#broadcast_update_later_to</tt>, but the designated stream is automatically set to the current model.
+  def broadcast_update_later(**rendering)
+    broadcast_update_later_to self, **rendering
+  end
+
   # Same as <tt>broadcast_append_to</tt> but run asynchronously via a <tt>Turbo::Streams::BroadcastJob</tt>.
   def broadcast_append_later_to(*streamables, target: broadcast_target_default, **rendering)
     Turbo::StreamsChannel.broadcast_append_later_to *streamables, target: target, **broadcast_rendering_with_defaults(rendering)
@@ -265,7 +294,9 @@ module Turbo::Broadcastable
 
     def broadcast_rendering_with_defaults(options)
       options.tap do |o|
-        o[:object] ||= self
+        # Add the current instance into the locals with the element name (which is the un-namespaced name)
+        # as the key. This parallels how the ActionView::ObjectRenderer would create a local variable.
+        o[:locals] = (o[:locals] || {}).reverse_merge!(model_name.element.to_sym => self)
         o[:partial] ||= to_partial_path
       end
     end

data/app/models/turbo/streams/tag_builder.rb

@@ -40,6 +40,16 @@ class Turbo::Streams::TagBuilder
     action :remove, target, allow_inferred_rendering: false
   end
 
+  # Removes the <tt>targets</tt> from the dom. The targets can either be a CSS selector string or an object that responds to
+  # <tt>to_key</tt>, which is then called and passed through <tt>ActionView::RecordIdentifier.dom_id</tt> (all Active Records
+  # do). Examples:
+  #
+  #   <%= turbo_stream.remove_all ".clearance_item" %>
+  #   <%= turbo_stream.remove_all clearance %>
+  def remove_all(targets)
+    action_all :remove, targets, allow_inferred_rendering: false
+  end
+
   # Replace the <tt>target</tt> in the dom with the either the <tt>content</tt> passed in, a rendering result determined
   # by the <tt>rendering</tt> keyword arguments, the content in the block, or the rendering of the target as a record. Examples:
   #
@@ -53,6 +63,19 @@ class Turbo::Streams::TagBuilder
     action :replace, target, content, **rendering, &block
   end
 
+  # Replace the <tt>targets</tt> in the dom with the either the <tt>content</tt> passed in, a rendering result determined
+  # by the <tt>rendering</tt> keyword arguments, the content in the block, or the rendering of the target as a record. Examples:
+  #
+  #   <%= turbo_stream.replace_all ".clearance_item", "<div class='clearance_item'>Replace the dom target identified by the class clearance_item</div>" %>
+  #   <%= turbo_stream.replace_all clearance %>
+  #   <%= turbo_stream.replace_all clearance, partial: "clearances/clearance", locals: { title: "Hello" } %>
+  #   <%= turbo_stream.replace_all ".clearance_item" do %>
+  #     <div class='.clearance_item'>Replace the dom target identified by the class clearance_item</div>
+  #   <% end %>
+  def replace_all(targets, content = nil, **rendering, &block)
+    action_all :replace, targets, content, **rendering, &block
+  end
+
   # Insert the <tt>content</tt> passed in, a rendering result determined by the <tt>rendering</tt> keyword arguments,
   # the content in the block, or the rendering of the target as a record before the <tt>target</tt> in the dom. Examples:
   #
@@ -66,6 +89,19 @@ class Turbo::Streams::TagBuilder
     action :before, target, content, **rendering, &block
   end
 
+  # Insert the <tt>content</tt> passed in, a rendering result determined by the <tt>rendering</tt> keyword arguments,
+  # the content in the block, or the rendering of the target as a record before the <tt>targets</tt> in the dom. Examples:
+  #
+  #   <%= turbo_stream.before_all ".clearance_item", "<div class='clearance_item'>Insert before the dom target identified by the class clearance_item</div>" %>
+  #   <%= turbo_stream.before_all clearance %>
+  #   <%= turbo_stream.before_all clearance, partial: "clearances/clearance", locals: { title: "Hello" } %>
+  #   <%= turbo_stream.before_all ".clearance_item" do %>
+  #     <div class='clearance_item'>Insert before the dom target identified by clearance_item</div>
+  #   <% end %>
+  def before_all(targets, content = nil, **rendering, &block)
+    action_all :before, targets, content, **rendering, &block
+  end
+
   # Insert the <tt>content</tt> passed in, a rendering result determined by the <tt>rendering</tt> keyword arguments,
   # the content in the block, or the rendering of the target as a record after the <tt>target</tt> in the dom. Examples:
   #
@@ -79,6 +115,19 @@ class Turbo::Streams::TagBuilder
     action :after, target, content, **rendering, &block
   end
 
+  # Insert the <tt>content</tt> passed in, a rendering result determined by the <tt>rendering</tt> keyword arguments,
+  # the content in the block, or the rendering of the target as a record after the <tt>targets</tt> in the dom. Examples:
+  #
+  #   <%= turbo_stream.after_all ".clearance_item", "<div class='clearance_item'>Insert after the dom target identified by the class clearance_item</div>" %>
+  #   <%= turbo_stream.after_all clearance %>
+  #   <%= turbo_stream.after_all clearance, partial: "clearances/clearance", locals: { title: "Hello" } %>
+  #   <%= turbo_stream.after_all "clearance_item" do %>
+  #     <div class='clearance_item'>Insert after the dom target identified by the class clearance_item</div>
+  #   <% end %>
+  def after_all(targets, content = nil, **rendering, &block)
+    action_all :after, targets, content, **rendering, &block
+  end
+
   # Update the <tt>target</tt> in the dom with the either the <tt>content</tt> passed in or a rendering result determined
   # by the <tt>rendering</tt> keyword arguments, the content in the block, or the rendering of the target as a record. Examples:
   #
@@ -92,6 +141,19 @@ class Turbo::Streams::TagBuilder
     action :update, target, content, **rendering, &block
   end
 
+  # Update the <tt>targets</tt> in the dom with the either the <tt>content</tt> passed in or a rendering result determined
+  # by the <tt>rendering</tt> keyword arguments, the content in the block, or the rendering of the targets as a record. Examples:
+  #
+  #   <%= turbo_stream.update_all "clearance_item", "Update the content of the dom target identified by the class clearance_item" %>
+  #   <%= turbo_stream.update_all clearance %>
+  #   <%= turbo_stream.update_all clearance, partial: "clearances/new_clearance", locals: { title: "Hello" } %>
+  #   <%= turbo_stream.update_all "clearance_item" do %>
+  #     Update the content of the dom target identified by the class clearance_item
+  #   <% end %>
+  def update_all(targets, content = nil, **rendering, &block)
+    action_all :update, targets, content, **rendering, &block
+  end
+
   # Append to the target in the dom identified with <tt>target</tt> either the <tt>content</tt> passed in or a
   # rendering result determined by the <tt>rendering</tt> keyword arguments, the content in the block,
   # or the rendering of the content as a record. Examples:
@@ -106,6 +168,20 @@ class Turbo::Streams::TagBuilder
     action :append, target, content, **rendering, &block
   end
 
+  # Append to the targets in the dom identified with <tt>targets</tt> either the <tt>content</tt> passed in or a
+  # rendering result determined by the <tt>rendering</tt> keyword arguments, the content in the block,
+  # or the rendering of the content as a record. Examples:
+  #
+  #   <%= turbo_stream.append_all ".clearances", "<div class='clearance_item'>Append this to .clearance_group</div>" %>
+  #   <%= turbo_stream.append_all ".clearances", clearance %>
+  #   <%= turbo_stream.append_all ".clearances", partial: "clearances/new_clearance", locals: { clearance: clearance } %>
+  #   <%= turbo_stream.append_all ".clearances" do %>
+  #     <div id='clearance_item'>Append this to .clearances</div>
+  #   <% end %>
+  def append_all(targets, content = nil, **rendering, &block)
+    action_all :append, targets, content, **rendering, &block
+  end
+
   # Prepend to the target in the dom identified with <tt>target</tt> either the <tt>content</tt> passed in or a
   # rendering result determined by the <tt>rendering</tt> keyword arguments or the content in the block,
   # or the rendering of the content as a record. Examples:
@@ -120,20 +196,34 @@ class Turbo::Streams::TagBuilder
     action :prepend, target, content, **rendering, &block
   end
 
-  # Send an action of the type <tt>name</tt>. Options described in the concrete methods.
+  # Prepend to the targets in the dom identified with <tt>targets</tt> either the <tt>content</tt> passed in or a
+  # rendering result determined by the <tt>rendering</tt> keyword arguments or the content in the block,
+  # or the rendering of the content as a record. Examples:
+  #
+  #   <%= turbo_stream.prepend_all ".clearances", "<div class='clearance_item'>Prepend this to .clearances</div>" %>
+  #   <%= turbo_stream.prepend_all ".clearances", clearance %>
+  #   <%= turbo_stream.prepend_all ".clearances", partial: "clearances/new_clearance", locals: { clearance: clearance } %>
+  #   <%= turbo_stream.prepend_all ".clearances" do %>
+  #     <div class='clearance_item'>Prepend this to .clearances</div>
+  #   <% end %>
+  def prepend_all(targets, content = nil, **rendering, &block)
+    action_all :prepend, targets, content, **rendering, &block
+  end
+
+  # Send an action of the type <tt>name</tt> to <tt>target</tt>. Options described in the concrete methods.
   def action(name, target, content = nil, allow_inferred_rendering: true, **rendering, &block)
     target_name = extract_target_name_from(target)
+    template = render_template(target, content, allow_inferred_rendering: allow_inferred_rendering, **rendering, &block)
 
-    case
-    when content
-      turbo_stream_action_tag name, target: target_name, template: (render_record(content) if allow_inferred_rendering) || content
-    when block_given?
-      turbo_stream_action_tag name, target: target_name, template: @view_context.capture(&block)
-    when rendering.any?
-      turbo_stream_action_tag name, target: target_name, template: @view_context.render(formats: [ :html ], **rendering)
-    else
-      turbo_stream_action_tag name, target: target_name, template: (render_record(target) if allow_inferred_rendering)
-    end
+    turbo_stream_action_tag name, target: target_name, template: template
+  end
+
+  # Send an action of the type <tt>name</tt> to <tt>targets</tt>. Options described in the concrete methods.
+  def action_all(name, targets, content = nil, allow_inferred_rendering: true, **rendering, &block)
+    targets_name = extract_target_name_from(targets)
+    template = render_template(targets, content, allow_inferred_rendering: allow_inferred_rendering, **rendering, &block)
+
+    turbo_stream_action_tag name, targets: targets_name, template: template
   end
 
   private
@@ -145,6 +235,19 @@ class Turbo::Streams::TagBuilder
       end
     end
 
+    def render_template(target, content = nil, allow_inferred_rendering: true, **rendering, &block)
+      case
+      when content
+        allow_inferred_rendering ? (render_record(content) || content) : content
+      when block_given?
+        @view_context.capture(&block)
+      when rendering.any?
+        @view_context.render(formats: [ :html ], **rendering)
+      else
+        render_record(target) if allow_inferred_rendering
+      end
+    end
+
     def render_record(possible_record)
       if possible_record.respond_to?(:to_partial_path)
         record = possible_record

data/lib/install/turbo_with_asset_pipeline.rb

@@ -1,31 +1,15 @@
-APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
-IMPORTMAP_PATH = Rails.root.join("app/assets/javascripts/importmap.json.erb")
+APP_JS_ROOT = Rails.root.join("app/assets/javascripts")
+CABLE_CONFIG_PATH = Rails.root.join("config/cable.yml")
 
-if APPLICATION_LAYOUT_PATH.exist?
-  say "Yield head in application layout for cache helper"
-  insert_into_file APPLICATION_LAYOUT_PATH.to_s, "\n    <%= yield :head %>", before: /\s*<\/head>/
+say "Import turbo-rails in existing app/assets/javascripts/application.js"
+append_to_file APP_JS_ROOT.join("application.js"), %(import "@hotwired/turbo-rails"\n)
 
-  if APPLICATION_LAYOUT_PATH.read =~ /stimulus/
-    say "Add Turbo include tags in application layout"
-    insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n    <%= javascript_include_tag "turbo", type: "module-shim" %>), after: /<%= stimulus_include_tags %>/
+if CABLE_CONFIG_PATH.exist?
+  say "Enable redis in bundle"
+  uncomment_lines "Gemfile", %(gem 'redis')
 
-    if IMPORTMAP_PATH.exist?
-      say "Add Turbo to importmap"
-      insert_into_file IMPORTMAP_PATH, %(    "turbo": "<%= asset_path "turbo" %>",\n), after: /  "imports": {\s*\n/
-    end
-  else
-    say "Add Turbo include tags in application layout"
-    insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n    <%= javascript_include_tag "turbo", type: "module" %>), before: /\s*<\/head>/
-  end
+  say "Switch development cable to use redis"
+  gsub_file CABLE_CONFIG_PATH.to_s, /development:\n\s+adapter: async/, "development:\n  adapter: redis\n  url: redis://localhost:6379/1"
 else
-  say "Default application.html.erb is missing!", :red
-  say %(        Add <%= javascript_include_tag("turbo", type: "module-shim") %> and <%= yield :head %> within the <head> tag after Stimulus includes in your custom layout.)
+  say 'ActionCable config file (config/cable.yml) is missing. Uncomment "gem \'redis\'" in your Gemfile and create config/cable.yml to use the Turbo Streams broadcast feature.'
 end
-
-say "Enable redis in bundle"
-uncomment_lines "Gemfile", %(gem 'redis')
-
-say "Switch development cable to use redis"
-gsub_file "config/cable.yml", /development:\n\s+adapter: async/, "development:\n  adapter: redis\n  url: redis://localhost:6379/1"
-
-say "Turbo successfully installed ⚡️", :green

data/lib/install/turbo_with_webpacker.rb

@@ -1,6 +1,7 @@
 # Some Rails versions use commonJS(require) others use ESM(import).
 TURBOLINKS_REGEX = /(import .* from "turbolinks".*\n|require\("turbolinks"\).*\n)/.freeze
 ACTIVE_STORAGE_REGEX = /(import.*ActiveStorage|require.*@rails\/activestorage.*)/.freeze
+CABLE_CONFIG_PATH = Rails.root.join("config/cable.yml")
 
 abort "❌ Webpacker not found. Exiting." unless defined?(Webpacker::Engine)
 
@@ -15,10 +16,12 @@ run "#{RbConfig.ruby} bin/yarn remove turbolinks"
 gsub_file "#{Webpacker.config.source_entry_path}/application.js", TURBOLINKS_REGEX, ''
 gsub_file "#{Webpacker.config.source_entry_path}/application.js", /Turbolinks.start.*\n/, ''
 
-say "Enable redis in bundle"
-uncomment_lines "Gemfile", %(gem 'redis')
+if CABLE_CONFIG_PATH.exist?
+  say "Enable redis in bundle"
+  uncomment_lines "Gemfile", %(gem 'redis')
 
-say "Switch development cable to use redis"
-gsub_file "config/cable.yml", /development:\n\s+adapter: async/, "development:\n  adapter: redis\n  url: redis://localhost:6379/1"
-
-say "Turbo successfully installed ⚡️", :green
+  say "Switch development cable to use redis"
+  gsub_file CABLE_CONFIG_PATH.to_s, /development:\n\s+adapter: async/, "development:\n  adapter: redis\n  url: redis://localhost:6379/1"
+else
+  say 'ActionCable config file (config/cable.yml) is missing. Uncomment "gem \'redis\'" in your Gemfile and create config/cable.yml to use the Turbo Streams broadcast feature.'
+end

data/lib/turbo/engine.rb

@@ -26,6 +26,14 @@ module Turbo
       end
     end
 
+    initializer "turbo.importmap" do
+      if Rails.application.config.respond_to?(:importmap)
+        Rails.application.config.importmap.paths.tap do |paths|
+          paths.asset "@hotwired/turbo-rails", path: "turbo"
+        end
+      end
+    end
+
     initializer "turbo.helpers", before: :load_config_initializers do
       ActiveSupport.on_load(:action_controller_base) do
         include Turbo::Streams::TurboStreamsTagBuilder, Turbo::Frames::FrameRequest, Turbo::Native::Navigation

data/lib/turbo/version.rb

@@ -1,3 +1,3 @@
 module Turbo
-  VERSION = "0.5.10"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo-rails
 version: !ruby/object:Gem::Version
-  version: 0.5.10
+  version: 0.7.0
 platform: ruby
 authors:
 - Sam Stephenson
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-12 00:00:00.000000000 Z
+date: 2021-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails