turbo-rails 0.5.12 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27a0cac6803a0e1e410fb4fce4aaa60a0998aee4dec7d1b4b4cbb674533ce5cf
-  data.tar.gz: a4a67e8cff6989445d669cd6aa3b64b39dfc7de4ca7afdfddfd41c1e9334558e
+  metadata.gz: 42d7a658511c698c83b4e41853f96f5b2534a9ee81b89500044a22d6695a5150
+  data.tar.gz: 46e9abb9a01e4c9b50d2c2b704ff0e522a7231496b58d7acbc78303cdef67486
 SHA512:
-  metadata.gz: a2de3cde68a13beffda32366c8b209666b1bae8a8dc3423ed9f5645dcae00fe88ba9f8ff08582eb60c9212a209d24683adf14f220a670923eac6806268198583
-  data.tar.gz: be9f2251ca7bf7684d71ecfba9cbaaefbc64423d1b7f86428fc733facc9e1867ff6b54df1c756cc96ce0367ffe2cbb090af2bbf3319d432d88fbae005a3edd7b
+  metadata.gz: be906021b12ba905c7ce316900cb28db1ec22cbec561c2e009758a58cb059c82984862bae1f045c2f60b1db9fd396ebb2c88ba07c08a2871d1f39556f67cd2b1
+  data.tar.gz: de3c17c9f07971421add4c6038f385b609d465eb939f1860900c635b35b72b65ebbbea030a2d45722bb6bda86b2b38e5d794c005e063698c3ec63478fd3dd083

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.
 
@@ -50,17 +50,19 @@ 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
 
-Turbo can coexist with Rails UJS, but you need to take a series of ugprade steps to make it happen. See [the upgrading guide](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md).
+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 tests/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;
@@ -1150,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),
@@ -1217,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";
@@ -1319,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;
@@ -1411,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);
@@ -1445,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();
+          }
         }
       }));
     }
@@ -1460,6 +1488,14 @@ class Visit {
       this.followedRedirect = true;
     }
   }
+  goToSamePageAnchor() {
+    if (this.isSamePage) {
+      this.render((async () => {
+        this.cacheSnapshot();
+        this.adapter.visitRendered(this);
+      }));
+    }
+  }
   requestStarted() {
     this.startRequest();
   }
@@ -1502,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;
     }
   }
@@ -1517,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;
     }
   }
@@ -1548,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) {
@@ -1561,7 +1607,7 @@ class Visit {
     await new Promise((resolve => {
       this.frame = requestAnimationFrame((() => resolve()));
     }));
-    callback();
+    await callback();
     delete this.frame;
     this.performScroll();
   }
@@ -1591,6 +1637,7 @@ class BrowserAdapter {
   visitStarted(visit) {
     visit.issueRequest();
     visit.changeHistory();
+    visit.goToSamePageAnchor();
     visit.loadCachedSnapshot();
   }
   visitRequestStarted(visit) {
@@ -1968,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;
   }
@@ -2318,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();
@@ -2436,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);
   }
@@ -2449,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);
   }
@@ -2476,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;
@@ -2511,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() {
@@ -2539,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";
@@ -2648,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) {
@@ -2659,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);
@@ -2722,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) {
@@ -2988,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
@@ -3036,6 +3128,8 @@ function setProgressBarDelay(delay) {
 var Turbo = Object.freeze({
   __proto__: null,
   navigator: navigator,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -3052,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)

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,5 +1,6 @@
 APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
 IMPORTMAP_PATH = Rails.root.join("app/assets/javascripts/importmap.json.erb")
+CABLE_CONFIG_PATH = Rails.root.join("config/cable.yml")
 
 if APPLICATION_LAYOUT_PATH.exist?
   say "Yield head in application layout for cache helper"
@@ -22,10 +23,14 @@ else
   say %(        Add <%= javascript_include_tag("turbo", type: "module-shim") %> and <%= yield :head %> within the <head> tag after Stimulus includes in your custom layout.)
 end
 
-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 "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
 
 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,14 @@ 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 "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
 
 say "Turbo successfully installed ⚡️", :green

data/lib/turbo/version.rb

@@ -1,3 +1,3 @@
 module Turbo
-  VERSION = "0.5.12"
+  VERSION = "0.6.0"
 end

metadata

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