Add the target element to turbo:before-fetch-request and turbo:before…

…-fetch-response events (#367)

Co-authored-by: John Kapantzakis <kapantzak@192.168.2.5>

src/core/drive/form_submission.ts

@@ -54,7 +54,7 @@ export class FormSubmission {
     this.formElement = formElement
     this.submitter = submitter
     this.formData = buildFormData(formElement, submitter)
-    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body)
+    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement)
     this.mustRedirect = mustRedirect
   }
 

src/core/frames/frame_controller.ts

@@ -233,7 +233,7 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
   // Private
 
   private async visit(url: Locatable) {
-    const request = new FetchRequest(this, FetchMethod.get, expandURL(url))
+    const request = new FetchRequest(this, FetchMethod.get, expandURL(url), undefined, this.element)
 
     return new Promise<void>(resolve => {
       this.resolveVisitPromise = () => {

src/http/fetch_request.ts

@@ -1,4 +1,5 @@
 import { FetchResponse } from "./fetch_response"
+import { FrameElement } from "../elements/frame_element"
 import { dispatch } from "../util"
 
 export interface FetchRequestDelegate {
@@ -47,10 +48,11 @@ export class FetchRequest {
   readonly headers: FetchRequestHeaders
   readonly url: URL
   readonly body?: FetchRequestBody
+  readonly target?: FrameElement | HTMLFormElement | null
   readonly abortController = new AbortController
   private resolveRequestPromise = (value: any) => {}
 
-  constructor(delegate: FetchRequestDelegate, method: FetchMethod, location: URL, body: FetchRequestBody = new URLSearchParams) {
+  constructor(delegate: FetchRequestDelegate, method: FetchMethod, location: URL, body: FetchRequestBody = new URLSearchParams, target: FrameElement | HTMLFormElement | null = null) {
     this.delegate = delegate
     this.method = method
     this.headers = this.defaultHeaders
@@ -60,6 +62,7 @@ export class FetchRequest {
       this.body = body
       this.url = location
     }
+    this.target = target
   }
 
   get location(): URL {
@@ -98,7 +101,7 @@ export class FetchRequest {
 
   async receive(response: Response): Promise<FetchResponse> {
     const fetchResponse = new FetchResponse(response)
-    const event = dispatch("turbo:before-fetch-response", { cancelable: true, detail: { fetchResponse } })
+    const event = dispatch("turbo:before-fetch-response", { cancelable: true, detail: { fetchResponse }, target: this.target as EventTarget })
     if (event.defaultPrevented) {
       this.delegate.requestPreventedHandlingResponse(this, fetchResponse)
     } else if (fetchResponse.succeeded) {
@@ -137,7 +140,15 @@ export class FetchRequest {
 
   private async allowRequestToBeIntercepted(fetchOptions: RequestInit) {
     const requestInterception = new Promise(resolve => this.resolveRequestPromise = resolve)
-    const event = dispatch("turbo:before-fetch-request", { cancelable: true, detail: { fetchOptions, url: this.url.href, resume: this.resolveRequestPromise } })
+    const event = dispatch("turbo:before-fetch-request", {
+      cancelable: true,
+      detail: {
+        fetchOptions,
+        url: this.url.href,
+        resume: this.resolveRequestPromise
+      },
+      target: this.target as EventTarget
+    })
     if (event.defaultPrevented) await requestInterception
   }
 }

src/tests/fixtures/form.html

@@ -137,7 +137,7 @@
     </div>
     <hr>
     <div id="targets-frame">
-      <form action="/__turbo/redirect" method="post" data-turbo-frame="frame" class="one">
+      <form id="form_one" action="/__turbo/redirect" method="post" data-turbo-frame="frame" class="one">
         <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
         <button type="submit">Submit</button>
       </form>

src/tests/functional/form_submission_tests.ts

@@ -400,6 +400,16 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await message.getVisibleText(), "Link!")
   }
 
+  async "test turbo:before-fetch-request fires on the form element"() {
+    await this.clickSelector('#targets-frame form.one [type="submit"]')
+    this.assert.ok(await this.nextEventOnTarget("form_one", "turbo:before-fetch-request"))
+  }
+
+  async "test turbo:before-fetch-response fires on the form element"() {
+    await this.clickSelector('#targets-frame form.one [type="submit"]')
+    this.assert.ok(await this.nextEventOnTarget("form_one", "turbo:before-fetch-response"))
+  }
+
   get formSubmitted(): Promise<boolean> {
     return this.hasSelector("html[data-form-submitted]")
   }

src/tests/functional/frame_tests.ts

@@ -199,6 +199,16 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.equal(requestLogs.length, 0)
   }
 
+  async "test turbo:before-fetch-request fires on the frame element"() {
+    await this.clickSelector("#hello a")
+    this.assert.ok(await this.nextEventOnTarget("frame", "turbo:before-fetch-request"))
+  }
+
+  async "test turbo:before-fetch-response fires on the frame element"() {
+    await this.clickSelector("#hello a")
+    this.assert.ok(await this.nextEventOnTarget("frame", "turbo:before-fetch-response"))
+  }
+
   get frameScriptEvaluationCount(): Promise<number | undefined> {
     return this.evaluate(() => window.frameScriptEvaluationCount)
   }