npm - @hotwired/turbo-rails - Versions diffs - 7.1.0 → 7.1.3 - Mend

@hotwired/turbo-rails 7.1.0 → 7.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +44 -11
package/app/assets/javascripts/turbo.js +91 -18
package/app/javascript/turbo/cable_stream_source_element.js +2 -1
package/app/javascript/turbo/form_submissions.js +5 -0
package/app/javascript/turbo/index.js +3 -0
package/app/javascript/turbo/snakeize.js +31 -0
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -1,15 +1,15 @@
-# Turbo
+# <img src="assets/logo.png?sanitize=true" width="24" height="24" alt="Turbo"> Turbo
 [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.
+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](https://github.com/hotwired/turbo-android) or [iOS](https://github.com/hotwired/turbo-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.
 Turbo is a language-agnostic framework written in TypeScript, but this gem builds on top of those basics to make the integration with Rails as smooth as possible. You can deliver turbo updates via model callbacks over Action Cable, respond to controller actions with native navigation or standard redirects, and render turbo frames with helpers and layout-free responses.
-## Turbo Drive
+## Navigate with Turbo Drive
-Turbo is a continuation of the ideas from the previous Turbolinks framework, and the heart of that past approach lives on as Turbo Drive. When installed, Turbo automatically intercepts all clicks on `<a href>` links to the same domain. When you click an eligible link, Turbo prevents the browser from following it. Instead, Turbo changes the browser’s URL using the History API, requests the new page using `fetch`, and then renders the HTML response.
+Turbo is a continuation of the ideas from the previous [Turbolinks](https://github.com/turbolinks/turbolinks) framework, and the heart of that past approach lives on as Turbo Drive. When installed, Turbo automatically intercepts all clicks on `<a href>` links to the same domain. When you click an eligible link, Turbo prevents the browser from following it. Instead, Turbo changes the browser’s URL using the History API, requests the new page using `fetch`, and then renders the HTML response.
 During rendering, Turbo replaces the current `<body>` element outright and merges the contents of the `<head>` element. The JavaScript window and document objects, and the HTML `<html>` element, persist from one rendering to the next.
@@ -24,31 +24,64 @@ Turbo.session.drive = false
 Then you can use `data-turbo="true"` to enable Drive on a per-element basis.
+[See documentation](https://turbo.hotwired.dev/handbook/drive).
-## Turbo Frames
+## Decompose with Turbo Frames
-Turbo reinvents the old HTML technique of frames without any of the drawbacks that lead to developers abandoning it. With Turbo Frames, you can treat a subset of the page as its own component, where links and form submissions replace only that part. This removes an entire class of problems around partial interactivity that before would have required custom JavaScript.
+Turbo reinvents the old HTML technique of frames without any of the drawbacks that lead to developers abandoning it. With Turbo Frames, **you can treat a subset of the page as its own component**, where links and form submissions **replace only that part**. This removes an entire class of problems around partial interactivity that before would have required custom JavaScript.
-It also makes it dead easy to carve a single page into smaller pieces that can all live on their own cache timeline. While the bulk of the page might easily be cached between users, a small personalized toolbar perhaps cannot. With Turbo::Frames, you can designate the toolbar as a frame, which will be lazy-loaded automatically by the publicly-cached root page. This means simpler pages, easier caching schemes with fewer dependent keys, and all without needing to write a lick of custom JavaScript.
+It also makes it dead easy to carve a single page into smaller pieces that can all live on their own cache timeline. While the bulk of the page might easily be cached between users, a small personalized toolbar perhaps cannot. With Turbo::Frames, you can designate the toolbar as a frame, which will be **lazy-loaded automatically** by the publicly-cached root page. This means simpler pages, easier caching schemes with fewer dependent keys, and all without needing to write a lick of custom JavaScript.
+This gem provides a `turbo_frame_tag` helper to create those frame.
-## Turbo Streams
+For instance:
+```erb
+<%# app/views/todos/show.html.erb %>
+<%= turbo_frame_tag @todo do %>
+  <p><%= @todo.description %></p>
-Partial page updates that are delivered asynchronously over a web socket connection is the hallmark of modern, reactive web applications. With Turbo Streams, you can get all of that modern goodness using the existing server-side HTML you're already rendering to deliver the first page load. With a set of simple CRUD container tags, you can send HTML fragments over the web socket (or in response to direct interactions), and see the page change in response to new data. Again, no need to construct an entirely separate API, no need to wrangle JSON, no need to reimplement the HTML construction in JavaScript. Take the HTML you're already making, wrap it in an update tag, and, voila, your page comes alive.
+  <%= link_to 'Edit this todo', edit_todo_path(@todo) %>
+<% end %>
+<%# app/views/todos/edit.html.erb %>
+<%= turbo_frame_tag @todo do %>
+  <%= render "form" %>
+  <%= link_to 'Cancel', todo_path(@todo) %>
+<% end %>
+```
+When the user will click on the `Edit this todo` link, as direct response to this direct user interaction, the turbo frame will be replaced with the one in the `edit.html.erb` page automatically.
+[See documentation](https://turbo.hotwired.dev/handbook/frames).
+## Come Alive with Turbo Streams
+Partial page updates that are **delivered asynchronously over a web socket connection** is the hallmark of modern, reactive web applications. With Turbo Streams, you can get all of that modern goodness using the existing server-side HTML you're already rendering to deliver the first page load. With a set of simple CRUD container tags, you can send HTML fragments over the web socket (or in response to direct interactions), and see the page change in response to new data. Again, **no need to construct an entirely separate API**, **no need to wrangle JSON**, **no need to reimplement the HTML construction in JavaScript**. Take the HTML you're already making, wrap it in an update tag, and, voila, your page comes alive.
 With this Rails integration, you can create these asynchronous updates directly in response to your model changes. Turbo uses Active Jobs to provide asynchronous partial rendering and Action Cable to deliver those updates to subscribers.
+This gem provides a `turbo_stream_from` helper to create a turbo stream.
+```erb
+<%# app/views/todos/show.html.erb %>
+<%= turbo_stream_from dom_id(@todo) %>
+<%# Rest of show here %>
+```
+[See documentation](https://turbo.hotwired.dev/handbook/streams).
 ## Installation
-The JavaScript for Turbo can either be run through the asset pipeline, which is included with this gem, or through the package that lives on NPM, through Webpacker.
+This gem is automatically configured for applications made with Rails 7+ (unless --skip-hotwire is passed to the generator). But if you're on Rails 6, you can install it manually:
 1. Add the `turbo-rails` gem to your Gemfile: `gem 'turbo-rails'`
 2. Run `./bin/bundle install`
 3. Run `./bin/rails turbo:install`
 4. Run `./bin/rails turbo:install:redis` to change the development Action Cable adapter from Async (the default one) to Redis. The Async adapter does not support Turbo Stream broadcasting.
-Running `turbo:install` will install through NPM if 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.
+Running `turbo:install` will install through NPM if Node.js is used in the application. Otherwise the asset pipeline version is used. To use the asset pipeline version, you must have `importmap-rails` installed first and listed higher in the Gemfile.
 If you're using node and need to use the cable consumer, you can import [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).

package/app/assets/javascripts/turbo.js CHANGED Viewed

@@ -3486,6 +3486,19 @@ var cable = Object.freeze({
   subscribeTo: subscribeTo
 });
+function walk(obj) {
+  if (!obj || typeof obj !== "object") return obj;
+  if (obj instanceof Date || obj instanceof RegExp) return obj;
+  if (Array.isArray(obj)) return obj.map(walk);
+  return Object.keys(obj).reduce((function(acc, key) {
+    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, (function(m, x) {
+      return "_" + x.toLowerCase();
+    }));
+    acc[camel] = walk(obj[key]);
+    return acc;
+  }), {});
+}
 class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
     connectStreamSource(this);
@@ -3508,13 +3521,24 @@ class TurboCableStreamSourceElement extends HTMLElement {
     const signed_stream_name = this.getAttribute("signed-stream-name");
     return {
       channel: channel,
-      signed_stream_name: signed_stream_name
+      signed_stream_name: signed_stream_name,
+      ...walk({
+        ...this.dataset
+      })
     };
   }
 }
 customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement);
+function overrideMethodWithFormmethod({detail: {formSubmission: {fetchRequest: fetchRequest, submitter: submitter}}}) {
+  if (submitter && submitter.formMethod && fetchRequest.body.has("_method")) {
+    fetchRequest.body.set("_method", submitter.formMethod);
+  }
+}
+addEventListener("turbo:submit-start", overrideMethodWithFormmethod);
 var adapters = {
   logger: self.console,
   WebSocket: self.WebSocket
@@ -3533,8 +3557,6 @@ const now = () => (new Date).getTime();
 const secondsSince = time => (now() - time) / 1e3;
-const clamp = (number, min, max) => Math.max(min, Math.min(max, number));
 class ConnectionMonitor {
   constructor(connection) {
     this.visibilityDidChange = this.visibilityDidChange.bind(this);
@@ -3547,7 +3569,7 @@ class ConnectionMonitor {
       delete this.stoppedAt;
       this.startPolling();
       addEventListener("visibilitychange", this.visibilityDidChange);
-      logger.log(`ConnectionMonitor started. pollInterval = ${this.getPollInterval()} ms`);
+      logger.log(`ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`);
     }
   }
   stop() {
@@ -3588,24 +3610,29 @@ class ConnectionMonitor {
     }), this.getPollInterval());
   }
   getPollInterval() {
-    const {min: min, max: max, multiplier: multiplier} = this.constructor.pollInterval;
-    const interval = multiplier * Math.log(this.reconnectAttempts + 1);
-    return Math.round(clamp(interval, min, max) * 1e3);
+    const {staleThreshold: staleThreshold, reconnectionBackoffRate: reconnectionBackoffRate} = this.constructor;
+    const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10));
+    const jitterMax = this.reconnectAttempts === 0 ? 1 : reconnectionBackoffRate;
+    const jitter = jitterMax * Math.random();
+    return staleThreshold * 1e3 * backoff * (1 + jitter);
   }
   reconnectIfStale() {
     if (this.connectionIsStale()) {
-      logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, pollInterval = ${this.getPollInterval()} ms, time disconnected = ${secondsSince(this.disconnectedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`);
+      logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`);
       this.reconnectAttempts++;
       if (this.disconnectedRecently()) {
-        logger.log("ConnectionMonitor skipping reopening recent disconnect");
+        logger.log(`ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(this.disconnectedAt)} s`);
       } else {
         logger.log("ConnectionMonitor reopening");
         this.connection.reopen();
       }
     }
   }
+  get refreshedAt() {
+    return this.pingedAt ? this.pingedAt : this.startedAt;
+  }
   connectionIsStale() {
-    return secondsSince(this.pingedAt ? this.pingedAt : this.startedAt) > this.constructor.staleThreshold;
+    return secondsSince(this.refreshedAt) > this.constructor.staleThreshold;
   }
   disconnectedRecently() {
     return this.disconnectedAt && secondsSince(this.disconnectedAt) < this.constructor.staleThreshold;
@@ -3622,14 +3649,10 @@ class ConnectionMonitor {
   }
 }
-ConnectionMonitor.pollInterval = {
-  min: 3,
-  max: 30,
-  multiplier: 5
-};
 ConnectionMonitor.staleThreshold = 6;
+ConnectionMonitor.reconnectionBackoffRate = .15;
 var INTERNAL = {
   message_types: {
     welcome: "welcome",
@@ -3772,6 +3795,7 @@ Connection.prototype.events = {
       return this.monitor.recordPing();
      case message_types.confirmation:
+      this.subscriptions.confirmSubscription(identifier);
       return this.subscriptions.notify(identifier, "connected");
      case message_types.rejection:
@@ -3839,9 +3863,47 @@ class Subscription {
   }
 }
+class SubscriptionGuarantor {
+  constructor(subscriptions) {
+    this.subscriptions = subscriptions;
+    this.pendingSubscriptions = [];
+  }
+  guarantee(subscription) {
+    if (this.pendingSubscriptions.indexOf(subscription) == -1) {
+      logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`);
+      this.pendingSubscriptions.push(subscription);
+    } else {
+      logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`);
+    }
+    this.startGuaranteeing();
+  }
+  forget(subscription) {
+    logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`);
+    this.pendingSubscriptions = this.pendingSubscriptions.filter((s => s !== subscription));
+  }
+  startGuaranteeing() {
+    this.stopGuaranteeing();
+    this.retrySubscribing();
+  }
+  stopGuaranteeing() {
+    clearTimeout(this.retryTimeout);
+  }
+  retrySubscribing() {
+    this.retryTimeout = setTimeout((() => {
+      if (this.subscriptions && typeof this.subscriptions.subscribe === "function") {
+        this.pendingSubscriptions.map((subscription => {
+          logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`);
+          this.subscriptions.subscribe(subscription);
+        }));
+      }
+    }), 500);
+  }
+}
 class Subscriptions {
   constructor(consumer) {
     this.consumer = consumer;
+    this.guarantor = new SubscriptionGuarantor(this);
     this.subscriptions = [];
   }
   create(channelName, mixin) {
@@ -3856,7 +3918,7 @@ class Subscriptions {
     this.subscriptions.push(subscription);
     this.consumer.ensureActiveConnection();
     this.notify(subscription, "initialized");
-    this.sendCommand(subscription, "subscribe");
+    this.subscribe(subscription);
     return subscription;
   }
   remove(subscription) {
@@ -3874,6 +3936,7 @@ class Subscriptions {
     }));
   }
   forget(subscription) {
+    this.guarantor.forget(subscription);
     this.subscriptions = this.subscriptions.filter((s => s !== subscription));
     return subscription;
   }
@@ -3881,7 +3944,7 @@ class Subscriptions {
     return this.subscriptions.filter((s => s.identifier === identifier));
   }
   reload() {
-    return this.subscriptions.map((subscription => this.sendCommand(subscription, "subscribe")));
+    return this.subscriptions.map((subscription => this.subscribe(subscription)));
   }
   notifyAll(callbackName, ...args) {
     return this.subscriptions.map((subscription => this.notify(subscription, callbackName, ...args)));
@@ -3895,6 +3958,15 @@ class Subscriptions {
     }
     return subscriptions.map((subscription => typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined));
   }
+  subscribe(subscription) {
+    if (this.sendCommand(subscription, "subscribe")) {
+      this.guarantor.guarantee(subscription);
+    }
+  }
+  confirmSubscription(identifier) {
+    logger.log(`Subscription confirmed ${identifier}`);
+    this.findAll(identifier).map((subscription => this.guarantor.forget(subscription)));
+  }
   sendCommand(subscription, command) {
     const {identifier: identifier} = subscription;
     return this.consumer.send({
@@ -3965,6 +4037,7 @@ var index = Object.freeze({
   INTERNAL: INTERNAL,
   Subscription: Subscription,
   Subscriptions: Subscriptions,
+  SubscriptionGuarantor: SubscriptionGuarantor,
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,

package/app/javascript/turbo/cable_stream_source_element.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { connectStreamSource, disconnectStreamSource } from "@hotwired/turbo"
 import { subscribeTo } from "./cable"
+import snakeize from "./snakeize"
 class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
@@ -20,7 +21,7 @@ class TurboCableStreamSourceElement extends HTMLElement {
   get channel() {
     const channel = this.getAttribute("channel")
     const signed_stream_name = this.getAttribute("signed-stream-name")
-    return { channel, signed_stream_name }
+    return { channel, signed_stream_name, ...snakeize({ ...this.dataset }) }
   }
 }

package/app/javascript/turbo/form_submissions.js ADDED Viewed

@@ -0,0 +1,5 @@
+export function overrideMethodWithFormmethod({ detail: { formSubmission: { fetchRequest, submitter } } }) {
+  if (submitter && submitter.formMethod && fetchRequest.body.has("_method")) {
+    fetchRequest.body.set("_method", submitter.formMethod)
+  }
+}

package/app/javascript/turbo/index.js CHANGED Viewed

@@ -1,7 +1,10 @@
 import "./cable_stream_source_element"
+import { overrideMethodWithFormmethod } from "./form_submissions"
 import * as Turbo from "@hotwired/turbo"
 export { Turbo }
 import * as cable from "./cable"
 export { cable }
+addEventListener("turbo:submit-start", overrideMethodWithFormmethod)

package/app/javascript/turbo/snakeize.js ADDED Viewed

@@ -0,0 +1,31 @@
+// Based on https://github.com/nathan7/snakeize
+//
+// This software is released under the MIT license:
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+export default function walk (obj) {
+    if (!obj || typeof obj !== 'object') return obj;
+    if (obj instanceof Date || obj instanceof RegExp) return obj;
+    if (Array.isArray(obj)) return obj.map(walk);
+    return Object.keys(obj).reduce(function (acc, key) {
+        var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function (m, x) {
+            return '_' + x.toLowerCase();
+        });
+        acc[camel] = walk(obj[key]);
+        return acc;
+    }, {});
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo-rails",
-  "version": "7.1.0",
+  "version": "7.1.3",
   "description": "The speed of a single-page web application without having to write any JavaScript",
   "module": "app/javascript/turbo/index.js",
   "main": "app/assets/javascripts/turbo.js",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@hotwired/turbo": "^7.1.0",
-    "@rails/actioncable": "^6.0.0"
+    "@rails/actioncable": "^7.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^11.0.1",