turbo-rails 0.5.11 → 0.5.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 349e14ec6f35af3029178e7ba854d16047aaf5e00ab700b1f2fb751170347518
-  data.tar.gz: b5177b878833a5abda62f208d787de1931d4db4cf3ba373a67458bee8c9d49a3
+  metadata.gz: 27a0cac6803a0e1e410fb4fce4aaa60a0998aee4dec7d1b4b4cbb674533ce5cf
+  data.tar.gz: a4a67e8cff6989445d669cd6aa3b64b39dfc7de4ca7afdfddfd41c1e9334558e
 SHA512:
-  metadata.gz: 6e0e11bc2c95419d394c758ff04e03dd734f85a45e61001e623c25bffdfc83530977637a89dbe5f173d81fd6dc4a86d81a1ff99ffedb4f23b00215e76c16ecad
-  data.tar.gz: 48dfec6f22f6eee01950f77c79c54f4d6a8fde629454ac2845b2d6bff6f8b464d18bcf7ede203a16a83dcc7421cbe33f92c74bc3a76124048ebbc897641ef388
+  metadata.gz: a2de3cde68a13beffda32366c8b209666b1bae8a8dc3423ed9f5645dcae00fe88ba9f8ff08582eb60c9212a209d24683adf14f220a670923eac6806268198583
+  data.tar.gz: be9f2251ca7bf7684d71ecfba9cbaaefbc64423d1b7f86428fc733facc9e1867ff6b54df1c756cc96ce0367ffe2cbb090af2bbf3319d432d88fbae005a3edd7b

data/README.md

@@ -40,13 +40,12 @@ The JavaScript for Turbo can either be run through the asset pipeline, which is
 
 Running `turbo:install` will install through NPM if Webpacker is installed in the application. Otherwise the asset pipeline version is used.
 
-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
@@ -56,11 +55,7 @@ You can watch [the video introduction to Hotwire](https://hotwire.dev/#screencas
 
 ## 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 ugprade steps to make it happen. See [the upgrading guide](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md).
 
 
 ## Development

data/app/assets/javascripts/turbo.js

@@ -943,6 +943,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 +973,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 +1001,8 @@ class FrameRenderer extends Renderer {
     this.scrollFrameIntoView();
     await nextAnimationFrame();
     this.focusFirstAutofocusableElement();
+    await nextAnimationFrame();
+    this.activateScriptElements();
   }
   loadFrameElement() {
     var _a;
@@ -1020,6 +1029,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) {
@@ -1627,6 +1645,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;
@@ -2216,7 +2258,7 @@ class PageRenderer extends Renderer {
     return this.newHeadSnapshot.provisionalElements;
   }
   get newBodyScriptElements() {
-    return [ ...this.newElement.querySelectorAll("script") ];
+    return this.newElement.querySelectorAll("script");
   }
 }
 
@@ -2307,6 +2349,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 +2362,7 @@ class Session {
   start() {
     if (!this.started) {
       this.pageObserver.start();
+      this.cacheObserver.start();
       this.linkClickObserver.start();
       this.formSubmitObserver.start();
       this.scrollObserver.start();
@@ -2335,6 +2379,7 @@ class Session {
   stop() {
     if (this.started) {
       this.pageObserver.stop();
+      this.cacheObserver.stop();
       this.linkClickObserver.stop();
       this.formSubmitObserver.stop();
       this.scrollObserver.stop();
@@ -2371,9 +2416,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
       });
@@ -2790,36 +2835,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);
+    }));
   }
 };
 
@@ -2848,19 +2893,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) {
@@ -2872,15 +2911,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) {
@@ -2894,6 +2935,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}`);
   }
@@ -2907,6 +2951,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;

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

@@ -265,7 +265,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/lib/turbo/version.rb

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

metadata

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