@hotwired/turbo-rails 7.2.0-beta.2 → 7.2.0-rc.2

package/app/assets/javascripts/turbo.js

@@ -385,6 +385,10 @@ function getAttribute(attributeName, ...elements) {
   return null;
 }
 
+function hasAttribute(attributeName, ...elements) {
+  return elements.some((element => element && element.hasAttribute(attributeName)));
+}
+
 function markAsBusy(...elements) {
   for (const element of elements) {
     if (element.localName == "turbo-frame") {
@@ -519,7 +523,9 @@ class FetchRequest {
       return await this.receive(response);
     } catch (error) {
       if (error.name !== "AbortError") {
-        this.delegate.requestErrored(this, error);
+        if (this.willDelegateErrorHandling(error)) {
+          this.delegate.requestErrored(this, error);
+        }
         throw error;
       }
     } finally {
@@ -583,6 +589,17 @@ class FetchRequest {
     });
     if (event.defaultPrevented) await requestInterception;
   }
+  willDelegateErrorHandling(error) {
+    const event = dispatch("turbo:fetch-request-error", {
+      target: this.target,
+      cancelable: true,
+      detail: {
+        request: this,
+        error: error
+      }
+    });
+    return !event.defaultPrevented;
+  }
 }
 
 class AppearanceObserver {
@@ -684,7 +701,7 @@ class FormSubmission {
     this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
-  static confirmMethod(message, _element) {
+  static confirmMethod(message, _element, _submitter) {
     return Promise.resolve(confirm(message));
   }
   get method() {
@@ -718,17 +735,11 @@ class FormSubmission {
   get stringFormData() {
     return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
   }
-  get confirmationMessage() {
-    var _a;
-    return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-confirm")) || this.formElement.getAttribute("data-turbo-confirm");
-  }
-  get needsConfirmation() {
-    return this.confirmationMessage !== null;
-  }
   async start() {
     const {initialized: initialized, requesting: requesting} = FormSubmissionState;
-    if (this.needsConfirmation) {
-      const answer = await FormSubmission.confirmMethod(this.confirmationMessage, this.formElement);
+    const confirmationMessage = getAttribute("data-turbo-confirm", this.submitter, this.formElement);
+    if (typeof confirmationMessage === "string") {
+      const answer = await FormSubmission.confirmMethod(confirmationMessage, this.formElement, this.submitter);
       if (!answer) {
         return;
       }
@@ -802,13 +813,6 @@ class FormSubmission {
       success: false,
       error: error
     };
-    dispatch("turbo:fetch-request-error", {
-      target: this.formElement,
-      detail: {
-        request: request,
-        error: error
-      }
-    });
     this.delegate.formSubmissionErrored(this, error);
   }
   requestFinished(_request) {
@@ -827,7 +831,7 @@ class FormSubmission {
     return !request.isIdempotent && this.mustRedirect;
   }
   requestAcceptsTurboStreamResponse(request) {
-    return !request.isIdempotent || this.formElement.hasAttribute("data-turbo-stream");
+    return !request.isIdempotent || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
   }
 }
 
@@ -893,10 +897,10 @@ class Snapshot {
     return null;
   }
   get permanentElements() {
-    return [ ...this.element.querySelectorAll("[id][data-turbo-permanent]") ];
+    return queryPermanentElementsAll(this.element);
   }
   getPermanentElementById(id) {
-    return this.element.querySelector(`#${id}[data-turbo-permanent]`);
+    return getPermanentElementById(this.element, id);
   }
   getPermanentElementMapForSnapshot(snapshot) {
     const permanentElementMap = {};
@@ -911,6 +915,14 @@ class Snapshot {
   }
 }
 
+function getPermanentElementById(node, id) {
+  return node.querySelector(`#${id}[data-turbo-permanent]`);
+}
+
+function queryPermanentElementsAll(node) {
+  return node.querySelectorAll("[id][data-turbo-permanent]");
+}
+
 class FormSubmitObserver {
   constructor(delegate, eventTarget) {
     this.started = false;
@@ -1143,14 +1155,18 @@ class FormLinkClickObserver {
     if (method) form.setAttribute("method", method);
     const turboFrame = link.getAttribute("data-turbo-frame");
     if (turboFrame) form.setAttribute("data-turbo-frame", turboFrame);
+    const turboAction = link.getAttribute("data-turbo-action");
+    if (turboAction) form.setAttribute("data-turbo-action", turboAction);
     const turboConfirm = link.getAttribute("data-turbo-confirm");
     if (turboConfirm) form.setAttribute("data-turbo-confirm", turboConfirm);
     const turboStream = link.hasAttribute("data-turbo-stream");
     if (turboStream) form.setAttribute("data-turbo-stream", "");
     this.delegate.submittedFormLinkToLocation(link, location, form);
     document.body.appendChild(form);
-    form.requestSubmit();
-    form.remove();
+    form.addEventListener("turbo:submit-end", (() => form.remove()), {
+      once: true
+    });
+    requestAnimationFrame((() => form.requestSubmit()));
   }
 }
 
@@ -1522,22 +1538,22 @@ function elementIsTracked(element) {
 }
 
 function elementIsScript(element) {
-  const tagName = element.tagName.toLowerCase();
+  const tagName = element.localName;
   return tagName == "script";
 }
 
 function elementIsNoscript(element) {
-  const tagName = element.tagName.toLowerCase();
+  const tagName = element.localName;
   return tagName == "noscript";
 }
 
 function elementIsStylesheet(element) {
-  const tagName = element.tagName.toLowerCase();
+  const tagName = element.localName;
   return tagName == "style" || tagName == "link" && element.getAttribute("rel") == "stylesheet";
 }
 
 function elementIsMetaElementWithName(element, name) {
-  const tagName = element.tagName.toLowerCase();
+  const tagName = element.localName;
   return tagName == "meta" && element.getAttribute("name") == name;
 }
 
@@ -1563,7 +1579,18 @@ class PageSnapshot extends Snapshot {
     return new this(body, new HeadSnapshot(head));
   }
   clone() {
-    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
+    const clonedElement = this.element.cloneNode(true);
+    const selectElements = this.element.querySelectorAll("select");
+    const clonedSelectElements = clonedElement.querySelectorAll("select");
+    for (const [index, source] of selectElements.entries()) {
+      const clone = clonedSelectElements[index];
+      for (const option of clone.selectedOptions) option.selected = false;
+      for (const option of source.selectedOptions) clone.options[option.index].selected = true;
+    }
+    for (const clonedPasswordInput of clonedElement.querySelectorAll('input[type="password"]')) {
+      clonedPasswordInput.value = "";
+    }
+    return new PageSnapshot(clonedElement, this.headSnapshot);
   }
   get headElement() {
     return this.headSnapshot.element;
@@ -1616,7 +1643,8 @@ const defaultOptions = {
   willRender: true,
   updateHistory: true,
   shouldCacheSnapshot: true,
-  acceptsStreamResponse: false
+  acceptsStreamResponse: false,
+  initiator: document.documentElement
 };
 
 var SystemStatusCode;
@@ -1629,7 +1657,6 @@ var SystemStatusCode;
 
 class Visit {
   constructor(delegate, location, restorationIdentifier, options = {}) {
-    this.identifier = uuid();
     this.timingMetrics = {};
     this.followedRedirect = false;
     this.historyChanged = false;
@@ -1645,7 +1672,7 @@ class Visit {
       resolve: resolve,
       reject: reject
     }));
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse} = Object.assign(Object.assign({}, defaultOptions), options);
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse, initiator: initiator} = Object.assign(Object.assign({}, defaultOptions), options);
     this.action = action;
     this.historyChanged = historyChanged;
     this.referrer = referrer;
@@ -1658,6 +1685,7 @@ class Visit {
     this.scrolled = !willRender;
     this.shouldCacheSnapshot = shouldCacheSnapshot;
     this.acceptsStreamResponse = acceptsStreamResponse;
+    this.initiator = initiator;
   }
   get adapter() {
     return this.delegate.adapter;
@@ -1724,7 +1752,7 @@ class Visit {
     if (this.hasPreloadedResponse()) {
       this.simulateRequest();
     } else if (this.shouldIssueRequest() && !this.request) {
-      this.request = new FetchRequest(this, FetchMethod.get, this.location);
+      this.request = new FetchRequest(this, FetchMethod.get, this.location, undefined, this.initiator);
       this.request.perform();
     }
   }
@@ -1814,7 +1842,6 @@ class Visit {
     if (this.redirectedToLocation && !this.followedRedirect && ((_a = this.response) === null || _a === void 0 ? void 0 : _a.redirected)) {
       this.adapter.visitProposedToLocation(this.redirectedToLocation, {
         action: "replace",
-        willRender: false,
         response: this.response
       });
       this.followedRedirect = true;
@@ -2229,7 +2256,7 @@ class Navigator {
     this.delegate = delegate;
   }
   proposeVisit(location, options = {}) {
-    if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
+    if (this.delegate.allowsVisitingLocation(location, options)) {
       if (locationIsVisitable(location, this.view.snapshot.rootLocation)) {
         return this.delegate.visitProposedToLocation(location, options);
       } else {
@@ -2442,6 +2469,31 @@ class ScrollObserver {
   }
 }
 
+class StreamMessageRenderer {
+  render({fragment: fragment}) {
+    Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), (() => document.documentElement.appendChild(fragment)));
+  }
+  enteringBardo(currentPermanentElement, newPermanentElement) {
+    newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true));
+  }
+  leavingBardo() {}
+}
+
+function getPermanentElementMapForFragment(fragment) {
+  const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement);
+  const permanentElementMap = {};
+  for (const permanentElementInDocument of permanentElementsInDocument) {
+    const {id: id} = permanentElementInDocument;
+    for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
+      const elementInStream = getPermanentElementById(streamElement.templateElement.content, id);
+      if (elementInStream) {
+        permanentElementMap[id] = [ permanentElementInDocument, elementInStream ];
+      }
+    }
+  }
+  return permanentElementMap;
+}
+
 class StreamObserver {
   constructor(delegate) {
     this.sources = new Set;
@@ -2803,6 +2855,7 @@ class Session {
     this.streamObserver = new StreamObserver(this);
     this.formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement);
     this.frameRedirector = new FrameRedirector(this, document.documentElement);
+    this.streamMessageRenderer = new StreamMessageRenderer;
     this.drive = true;
     this.enabled = true;
     this.progressBarDelay = 500;
@@ -2846,7 +2899,7 @@ class Session {
     this.adapter = adapter;
   }
   visit(location, options = {}) {
-    const frameElement = document.getElementById(options.frame || "");
+    const frameElement = options.frame ? document.getElementById(options.frame) : null;
     if (frameElement instanceof FrameElement) {
       frameElement.src = location.toString();
       return frameElement.loaded;
@@ -2861,7 +2914,7 @@ class Session {
     this.streamObserver.disconnectStreamSource(source);
   }
   renderStreamMessage(message) {
-    document.documentElement.appendChild(StreamMessage.wrap(message).fragment);
+    this.streamMessageRenderer.render(StreamMessage.wrap(message));
   }
   clearCache() {
     this.view.clearSnapshotCache();
@@ -2907,23 +2960,28 @@ class Session {
     const acceptsStreamResponse = link.hasAttribute("data-turbo-stream");
     this.visit(location.href, {
       action: action,
-      acceptsStreamResponse: acceptsStreamResponse
+      acceptsStreamResponse: acceptsStreamResponse,
+      initiator: link
     });
   }
-  allowsVisitingLocationWithAction(location, action) {
-    return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
+  allowsVisitingLocation(location, options = {}) {
+    return this.locationWithActionIsSamePage(location, options.action) || this.applicationAllowsVisitingLocation(location, options);
   }
   visitProposedToLocation(location, options) {
     extendURLWithDeprecatedProperties(location);
     return this.adapter.visitProposedToLocation(location, options);
   }
   visitStarted(visit) {
+    if (!visit.acceptsStreamResponse) {
+      markAsBusy(document.documentElement);
+    }
     extendURLWithDeprecatedProperties(visit.location);
     if (!visit.silent) {
-      this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
+      this.notifyApplicationAfterVisitingLocation(visit.location, visit.action, visit.initiator);
     }
   }
   visitCompleted(visit) {
+    clearBusyState(document.documentElement);
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
   locationWithActionIsSamePage(location, action) {
@@ -2982,16 +3040,12 @@ class Session {
   frameRendered(fetchResponse, frame) {
     this.notifyApplicationAfterFrameRender(fetchResponse, frame);
   }
-  frameMissing(frame, fetchResponse) {
-    console.warn(`Completing full-page visit as matching frame for #${frame.id} was missing from the response`);
-    return this.visit(fetchResponse.location);
-  }
   applicationAllowsFollowingLinkToLocation(link, location, ev) {
     const event = this.notifyApplicationAfterClickingLinkToLocation(link, location, ev);
     return !event.defaultPrevented;
   }
-  applicationAllowsVisitingLocation(location) {
-    const event = this.notifyApplicationBeforeVisitingLocation(location);
+  applicationAllowsVisitingLocation(location, options = {}) {
+    const event = this.notifyApplicationBeforeVisitingLocation(location, options.initiator);
     return !event.defaultPrevented;
   }
   notifyApplicationAfterClickingLinkToLocation(link, location, event) {
@@ -3004,17 +3058,18 @@ class Session {
       cancelable: true
     });
   }
-  notifyApplicationBeforeVisitingLocation(location) {
+  notifyApplicationBeforeVisitingLocation(location, element) {
     return dispatch("turbo:before-visit", {
+      target: element,
       detail: {
         url: location.href
       },
       cancelable: true
     });
   }
-  notifyApplicationAfterVisitingLocation(location, action) {
-    markAsBusy(document.documentElement);
+  notifyApplicationAfterVisitingLocation(location, action, element) {
     return dispatch("turbo:visit", {
+      target: element,
       detail: {
         url: location.href,
         action: action
@@ -3036,7 +3091,6 @@ class Session {
     return dispatch("turbo:render");
   }
   notifyApplicationAfterPageLoad(timing = {}) {
-    clearBusyState(document.documentElement);
     return dispatch("turbo:load", {
       detail: {
         url: this.location.href,
@@ -3334,8 +3388,9 @@ class FrameController {
           session.frameRendered(fetchResponse, this.element);
           session.frameLoaded(this.element);
           this.fetchResponseLoaded(fetchResponse);
-        } else if (this.sessionWillHandleMissingFrame(fetchResponse)) {
-          await session.frameMissing(this.element, fetchResponse);
+        } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+          console.warn(`A matching frame for #${this.element.id} was missing from the response, transforming into full-page Visit.`);
+          this.visitResponse(fetchResponse.response);
         }
       }
     } catch (error) {
@@ -3390,19 +3445,13 @@ class FrameController {
     await this.loadResponse(response);
     this.resolveVisitPromise();
   }
-  requestFailedWithResponse(request, response) {
+  async requestFailedWithResponse(request, response) {
     console.error(response);
+    await this.loadResponse(response);
     this.resolveVisitPromise();
   }
   requestErrored(request, error) {
     console.error(error);
-    dispatch("turbo:fetch-request-error", {
-      target: this.element,
-      detail: {
-        request: request,
-        error: error
-      }
-    });
     this.resolveVisitPromise();
   }
   requestFinished(_request) {
@@ -3501,17 +3550,38 @@ class FrameController {
       session.history.update(method, expandURL(this.frame.src || ""), this.restorationIdentifier);
     }
   }
-  sessionWillHandleMissingFrame(fetchResponse) {
+  willHandleFrameMissingFromResponse(fetchResponse) {
     this.element.setAttribute("complete", "");
+    const response = fetchResponse.response;
+    const visit = async (url, options = {}) => {
+      if (url instanceof Response) {
+        this.visitResponse(url);
+      } else {
+        session.visit(url, options);
+      }
+    };
     const event = dispatch("turbo:frame-missing", {
       target: this.element,
       detail: {
-        fetchResponse: fetchResponse
+        response: response,
+        visit: visit
       },
       cancelable: true
     });
     return !event.defaultPrevented;
   }
+  async visitResponse(response) {
+    const wrapped = new FetchResponse(response);
+    const responseHTML = await wrapped.responseHTML;
+    const {location: location, redirected: redirected, statusCode: statusCode} = wrapped;
+    return session.visit(location, {
+      response: {
+        redirected: redirected,
+        statusCode: statusCode,
+        responseHTML: responseHTML
+      }
+    });
+  }
   findFrameElement(element, submitter) {
     var _a;
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
@@ -3647,6 +3717,9 @@ function activateElement(element, currentURL) {
 }
 
 class StreamElement extends HTMLElement {
+  static async renderElement(newElement) {
+    await newElement.performAction();
+  }
   async connectedCallback() {
     try {
       await this.render();
@@ -3659,9 +3732,10 @@ class StreamElement extends HTMLElement {
   async render() {
     var _a;
     return (_a = this.renderPromise) !== null && _a !== void 0 ? _a : this.renderPromise = (async () => {
-      if (this.dispatchEvent(this.beforeRenderEvent)) {
+      const event = this.beforeRenderEvent;
+      if (this.dispatchEvent(event)) {
         await nextAnimationFrame();
-        this.performAction();
+        await event.detail.render(this);
       }
     })();
   }
@@ -3702,7 +3776,11 @@ class StreamElement extends HTMLElement {
     return this.templateElement.content.cloneNode(true);
   }
   get templateElement() {
-    if (this.firstElementChild instanceof HTMLTemplateElement) {
+    if (this.firstElementChild === null) {
+      const template = this.ownerDocument.createElement("template");
+      this.appendChild(template);
+      return template;
+    } else if (this.firstElementChild instanceof HTMLTemplateElement) {
       return this.firstElementChild;
     }
     this.raise("first child element must be a <template> element");
@@ -3728,7 +3806,8 @@ class StreamElement extends HTMLElement {
       bubbles: true,
       cancelable: true,
       detail: {
-        newStream: this
+        newStream: this,
+        render: StreamElement.renderElement
       }
     });
   }
@@ -3813,10 +3892,16 @@ start();
 
 var turbo_es2017Esm = Object.freeze({
   __proto__: null,
+  FrameElement: FrameElement,
+  get FrameLoadingStyle() {
+    return FrameLoadingStyle;
+  },
   FrameRenderer: FrameRenderer,
   PageRenderer: PageRenderer,
   PageSnapshot: PageSnapshot,
   StreamActions: StreamActions,
+  StreamElement: StreamElement,
+  StreamSourceElement: StreamSourceElement,
   cache: cache,
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
@@ -3907,13 +3992,26 @@ class TurboCableStreamSourceElement extends HTMLElement {
 
 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);
+function encodeMethodIntoRequestBody(event) {
+  if (event.target instanceof HTMLFormElement) {
+    const {target: form, detail: {fetchOptions: fetchOptions}} = event;
+    form.addEventListener("turbo:submit-start", (({detail: {formSubmission: {submitter: submitter}}}) => {
+      const method = submitter && submitter.formMethod || fetchOptions.body.get("_method") || form.getAttribute("method");
+      if (!/get/i.test(method)) {
+        if (/post/i.test(method)) {
+          fetchOptions.body.delete("_method");
+        } else {
+          fetchOptions.body.set("_method", method);
+        }
+        fetchOptions.method = "post";
+      }
+    }), {
+      once: true
+    });
   }
 }
 
-addEventListener("turbo:submit-start", overrideMethodWithFormmethod);
+addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {
   logger: self.console,

package/app/javascript/turbo/fetch_requests.js

@@ -0,0 +1,19 @@
+export function encodeMethodIntoRequestBody(event) {
+  if (event.target instanceof HTMLFormElement) {
+    const { target: form, detail: { fetchOptions } } = event
+
+    form.addEventListener("turbo:submit-start", ({ detail: { formSubmission: { submitter } } }) => {
+      const method = (submitter && submitter.formMethod) || fetchOptions.body.get("_method") || form.getAttribute("method")
+
+      if (!/get/i.test(method)) {
+        if (/post/i.test(method)) {
+          fetchOptions.body.delete("_method")
+        } else {
+          fetchOptions.body.set("_method", method)
+        }
+
+        fetchOptions.method = "post"
+      }
+    }, { once: true })
+  }
+}

package/app/javascript/turbo/index.js

@@ -1,5 +1,4 @@
 import "./cable_stream_source_element"
-import { overrideMethodWithFormmethod } from "./form_submissions"
 
 import * as Turbo from "@hotwired/turbo"
 export { Turbo }
@@ -7,4 +6,6 @@ export { Turbo }
 import * as cable from "./cable"
 export { cable }
 
-addEventListener("turbo:submit-start", overrideMethodWithFormmethod)
+import { encodeMethodIntoRequestBody } from "./fetch_requests"
+
+addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo-rails",
-  "version": "7.2.0-beta.2",
+  "version": "7.2.0-rc.2",
   "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",
@@ -13,7 +13,7 @@
     "release": "npm publish && git commit -am \"$npm_package_name v$npm_package_version\" && git push"
   },
   "dependencies": {
-    "@hotwired/turbo": "^7.2.0-beta.2",
+    "@hotwired/turbo": "^7.2.0-rc.2",
     "@rails/actioncable": "^7.0"
   },
   "devDependencies": {

package/app/javascript/turbo/form_submissions.js

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