[Deprecation]: Remove internal objects from public API

The `FetchRequest`, `FetchResponse`, and `FormSubmission` objects are internal abstractions that facilitate Turbo's management of HTTP and Form Submission life cycles. Currently, references to instances of those classes are available through `event.detail` for the following events: * `turbo:frame-render` * `turbo:before-fetch-request` * `turbo:before-fetch-response` * `turbo:submit-start` * `turbo:submit-end` Similarly, the `turbo:before-fetch-request` exposes a `fetchOptions` object that is a separate instance from the one used to submit the request. This means that **any** modifications to **any** value made from within an event listener are ineffective and **do not change** the ensuing request. This commit deprecates those properties in favor of their built-in foundations, namely: * [Request][] * [Response][] The properties that expose those instances will remain as deprecations, but will be inaccessible after an `8.0` release. [Request]: https://developer.mozilla.org/en-US/docs/Web/API/Request [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
hotwired · Sep 12, 2023 · ed669b8 · ed669b8
1 parent 4570b9e
commit ed669b8
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 126 deletions.
diff --git a/src/core/drive/form_submission.js b/src/core/drive/form_submission.js
@@ -104,7 +104,7 @@ export class FormSubmission {
     if (!fetchRequest.isSafe) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token")
       if (token) {
-        fetchRequest.headers["X-CSRF-Token"] = token
+        fetchRequest.headers.set("X-CSRF-Token", token)
       }
     }
 
@@ -114,12 +114,23 @@ export class FormSubmission {
   }
 
   requestStarted(fetchRequest) {
+    const formSubmission = this
+
     this.state = FormSubmissionState.waiting
     this.submitter?.setAttribute("disabled", "")
     this.setSubmitsWith()
     dispatch("turbo:submit-start", {
       target: this.formElement,
-      detail: { formSubmission: this }
+      detail: {
+        request: fetchRequest.request,
+        submitter: this.submitter,
+
+        get formSubmission() {
+          console.warn("`event.detail.formSubmission` is deprecated. Use `event.target`, `event.detail.submitter`, and `event.detail.request` instead")
+
+          return formSubmission
+        }
+      }
     })
     this.delegate.formSubmissionStarted(this)
   }
@@ -136,13 +147,31 @@ export class FormSubmission {
       this.delegate.formSubmissionErrored(this, error)
     } else {
       this.state = FormSubmissionState.receiving
-      this.result = { success: true, fetchResponse: fetchResponse }
+      this.result = {
+        success: true,
+        response: fetchResponse.response,
+
+        get fetchResponse() {
+          console.warn("`event.detail.fetchResponse` is deprecated. Use `event.detail.response` instead")
+
+          return fetchResponse
+        }
+      }
       this.delegate.formSubmissionSucceededWithResponse(this, fetchResponse)
     }
   }
 
   requestFailedWithResponse(fetchRequest, fetchResponse) {
-    this.result = { success: false, fetchResponse: fetchResponse }
+    this.result = {
+      success: false,
+      response: fetchResponse.response,
+
+      get fetchResponse() {
+        console.warn("`event.detail.fetchResponse` is deprecated. Use `event.detail.response` instead")
+
+        return fetchResponse
+      }
+    }
     this.delegate.formSubmissionFailedWithResponse(this, fetchResponse)
   }
 
@@ -151,13 +180,26 @@ export class FormSubmission {
     this.delegate.formSubmissionErrored(this, error)
   }
 
-  requestFinished(_fetchRequest) {
+  requestFinished(fetchRequest) {
     this.state = FormSubmissionState.stopped
     this.submitter?.removeAttribute("disabled")
     this.resetSubmitterText()
+    const { formSubmission } = this
+
     dispatch("turbo:submit-end", {
       target: this.formElement,
-      detail: { formSubmission: this, ...this.result }
+      detail: {
+        request: fetchRequest.request,
+        submitter: this.submitter,
+
+        get formSubmission() {
+          console.warn("`event.detail.formSubmission` is deprecated. Use `event.target`, `event.detail.submitter`, and `event.detail.request` instead")
+
+          return formSubmission
+        },
+
+        ...this.result
+      }
     })
     this.delegate.formSubmissionFinished(this)
   }

diff --git a/src/core/frames/frame_controller.js b/src/core/frames/frame_controller.js
@@ -192,7 +192,7 @@ export class FrameController {
   // Fetch request delegate
 
   prepareRequest(request) {
-    request.headers["Turbo-Frame"] = this.id
+    request.headers.set("Turbo-Frame", this.id)
 
     if (this.currentNavigationElement?.hasAttribute("data-turbo-stream")) {
       request.acceptResponseType(StreamMessage.contentType)

diff --git a/src/core/session.js b/src/core/session.js
@@ -353,7 +353,15 @@ export class Session {
 
   notifyApplicationAfterFrameRender(fetchResponse, frame) {
     return dispatch("turbo:frame-render", {
-      detail: { fetchResponse },
+      detail: {
+        response: fetchResponse.response,
+
+        get fetchResponse() {
+          console.warn("`event.detail.fetchResponse` is deprecated. Use `event.detail.response` instead")
+
+          return fetchResponse
+        }
+      },
       target: frame,
       cancelable: true
     })

diff --git a/src/http/fetch_request.js b/src/http/fetch_request.js
@@ -47,58 +47,38 @@ export class FetchRequest {
   #resolveRequestPromise = (_value) => {}
 
   constructor(delegate, method, location, requestBody = new URLSearchParams(), target = null, enctype = FetchEnctype.urlEncoded) {
+    method = fetchMethodFromString(method)
+
     const [url, body] = buildResourceAndBody(expandURL(location), method, requestBody, enctype)
 
     this.delegate = delegate
-    this.url = url
     this.target = target
-    this.fetchOptions = {
+    this.request = new Request(url.href, {
       credentials: "same-origin",
       redirect: "follow",
       method: method,
       headers: { ...this.defaultHeaders },
       body: body,
       signal: this.abortSignal,
       referrer: this.delegate.referrer?.href
-    }
+    })
     this.enctype = enctype
   }
 
   get method() {
-    return this.fetchOptions.method
-  }
-
-  set method(value) {
-    const fetchBody = this.isSafe ? this.url.searchParams : this.fetchOptions.body || new FormData()
-    const fetchMethod = fetchMethodFromString(value) || FetchMethod.get
-
-    this.url.search = ""
-
-    const [url, body] = buildResourceAndBody(this.url, fetchMethod, fetchBody, this.enctype)
-
-    this.url = url
-    this.fetchOptions.body = body
-    this.fetchOptions.method = fetchMethod
+    return this.request.method
   }
 
   get headers() {
-    return this.fetchOptions.headers
-  }
-
-  set headers(value) {
-    this.fetchOptions.headers = value
+    return this.request.headers
   }
 
   get body() {
-    if (this.isSafe) {
-      return this.url.searchParams
-    } else {
-      return this.fetchOptions.body
-    }
+    return this.request.body
   }
 
-  set body(value) {
-    this.fetchOptions.body = value
+  get url() {
+    return this.request.url
   }
 
   get location() {
@@ -123,7 +103,7 @@ export class FetchRequest {
     await this.#allowRequestToBeIntercepted(fetchOptions)
     try {
       this.delegate.requestStarted(this)
-      const response = await fetch(this.url.href, fetchOptions)
+      const response = await fetch(this.request)
       return await this.receive(response)
     } catch (error) {
       if (error.name !== "AbortError") {
@@ -138,10 +118,20 @@ export class FetchRequest {
   }
 
   async receive(response) {
+    const { request } = this
     const fetchResponse = new FetchResponse(response)
     const event = dispatch("turbo:before-fetch-response", {
       cancelable: true,
-      detail: { fetchResponse },
+      detail: {
+        request,
+        response,
+
+        get fetchResponse() {
+          console.warn("`event.detail.fetchResponse` is deprecated. Use `event.detail.response` instead")
+
+          return fetchResponse
+        }
+      },
       target: this.target
     })
     if (event.defaultPrevented) {
@@ -169,29 +159,40 @@ export class FetchRequest {
   }
 
   acceptResponseType(mimeType) {
-    this.headers["Accept"] = [mimeType, this.headers["Accept"]].join(", ")
+    this.headers.set("Accept", [mimeType, this.headers.get("Accept")].join(", "))
   }
 
   async #allowRequestToBeIntercepted(fetchOptions) {
+    const { url } = this.request
     const requestInterception = new Promise((resolve) => (this.#resolveRequestPromise = resolve))
     const event = dispatch("turbo:before-fetch-request", {
       cancelable: true,
       detail: {
-        fetchOptions,
-        url: this.url,
+        get fetchOptions() {
+          console.warn("`event.detail.fetchOptions` is deprecated. Use `event.detail.request` instead")
+
+          return fetchOptions
+        },
+
+        get url() {
+          console.warn("`event.detail.url` is deprecated. Use `event.detail.request.url` instead")
+
+          return url
+        },
+
+        request: this.request,
         resume: this.#resolveRequestPromise
       },
       target: this.target
     })
-    this.url = event.detail.url
     if (event.defaultPrevented) await requestInterception
   }
 
   #willDelegateErrorHandling(error) {
     const event = dispatch("turbo:fetch-request-error", {
       target: this.target,
       cancelable: true,
-      detail: { request: this, error: error }
+      detail: { request: this.request, error: error }
     })
 
     return !event.defaultPrevented

diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html" data-skip-event-details="turbo:submit-start turbo:submit-end turbo:fetch-request-error">
+<html id="html">
   <head>
     <meta charset="utf-8">
     <title>Form</title>

diff --git a/src/tests/fixtures/navigation.html b/src/tests/fixtures/navigation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html" data-skip-event-details="turbo:submit-start turbo:submit-end">
+<html id="html">
   <head>
     <meta charset="utf-8">
     <meta name="csp-nonce" content="123">

diff --git a/src/tests/fixtures/stream.html b/src/tests/fixtures/stream.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-skip-event-details="turbo:submit-start turbo:submit-end">
+<html>
   <head>
     <meta charset="utf-8">
     <title>Turbo Streams</title>

diff --git a/src/tests/fixtures/tabs.html b/src/tests/fixtures/tabs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-skip-event-details="turbo:fetch-request-error">
+<html>
   <head>
     <meta charset="utf-8">
     <title>Tabs</title>

diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
@@ -9,6 +9,20 @@
         returned[key] = value.toJSON()
       } else if (value instanceof Element) {
         returned[key] = value.outerHTML
+      } else if (value instanceof Headers) {
+        returned[key] = Object.fromEntries(value.entries())
+      } else if (value instanceof Request) {
+        const { method, url, headers } = value
+
+        returned[key] = serializeToChannel({ method, url, headers })
+      } else if (value instanceof Response) {
+        const { url, status, headers } = value
+
+        returned[key] = serializeToChannel({ url, status, headers })
+      } else if (value instanceof AbortSignal) {
+        returned[key] = "cannot encode AbortSignal instance"
+      } else if (key === "formSubmission") {
+        returned[key] = "cannot encode FormSubmission instance"
       } else if (typeof value == "object") {
         if (visited.has(value)) {
           returned[key] = "skipped to prevent infinitely recursing"

diff --git a/src/tests/fixtures/visit.html b/src/tests/fixtures/visit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html" data-skip-event-details="turbo:fetch-request-error">
+<html id="html">
   <head>
     <meta charset="utf-8">
     <title>Turbo</title>