Convert JavaScript To TypeScript

[kzkn]

For fix #18

[kzkn]

I could't set "strict": true in tsconfig.json because I couldn't resolve the type error on this line.

[kzkn]

I have fixed the type error.

[seanpdoyle]

@kzkn thank you for taking this one on!

As the original author of app/javascript/turbo/fetch_requests.ts, I thought it'd be good to pull this down locally and test out the types. How do you feel about making some of the following changes?

diff --git a/app/javascript/turbo/fetch_requests.ts b/app/javascript/turbo/fetch_requests.ts
index a62e0a4..8e5c027 100644
--- a/app/javascript/turbo/fetch_requests.ts
+++ b/app/javascript/turbo/fetch_requests.ts
@@ -1,36 +1,54 @@
-import type { TurboBeforeFetchRequestEvent, TurboSubmitStartEvent } from '@hotwired/turbo'
+import type { TurboBeforeFetchRequestEvent, TurboSubmitStartEvent } from "@hotwired/turbo"
 
-export function encodeMethodIntoRequestBody(event: Event) {
-  let ev = event as TurboBeforeFetchRequestEvent
-  if (ev.target instanceof HTMLFormElement) {
-    const { target: form, detail: { fetchOptions } } = ev
+export function encodeMethodIntoRequestBody(event: TurboBeforeFetchRequestEvent) {
+  if (event.target instanceof HTMLFormElement) {
+    const { target: form, detail: { fetchOptions } } = event
 
-    form.addEventListener("turbo:submit-start", ev => {
-      const { detail: { formSubmission: { submitter } } } = ev as TurboSubmitStartEvent
-      const method = detectSubmitMethod(form, submitter, fetchOptions) || ""
+    form.addEventListener("turbo:submit-start", <EventListener>(({ detail: { formSubmission: { submitter } } }: TurboSubmitStartEvent) => {
+      const body = isBodyInit(fetchOptions.body) ? fetchOptions.body : new URLSearchParams()
+      const method = determineFetchMethod(submitter, body, form)
 
       if (!/get/i.test(method)) {
-        const body = fetchOptions.body as FormData | undefined
         if (/post/i.test(method)) {
-          body?.delete("_method")
+          body.delete("_method")
         } else {
-          body?.set("_method", method)
+          body.set("_method", method)
         }
 
         fetchOptions.method = "post"
       }
-    }, { once: true })
+    }), { once: true })
   }
 }
 
-function detectSubmitMethod(form: HTMLElement, submitter: HTMLElement | undefined, fetchOptions: RequestInit): string | null {
-  const _submitter = submitter as HTMLInputElement | HTMLButtonElement | undefined
-  const body = fetchOptions.body as FormData | undefined
-  if (_submitter && _submitter.formMethod) {
-    return _submitter.formMethod
-  } else if (body?.get("_method")) {
-    return body.get("_method") as string | null
+function determineFetchMethod(submitter: HTMLElement | undefined, body: FetchBodyData, form: HTMLFormElement): string {
+  const formMethod = determineFormMethod(submitter)
+  const overrideMethod = body.get("_method")
+  const method = form.getAttribute("method") || "get"
+
+  if (typeof formMethod == "string") {
+    return formMethod
+  } else if (typeof overrideMethod == "string") {
+    return overrideMethod
+  } else {
+    return method
+  }
+}
+
+function determineFormMethod(submitter: HTMLElement | undefined): string | null {
+  if (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) {
+    if (submitter.hasAttribute("formmethod")) {
+      return submitter.formMethod
+    } else {
+      return null
+    }
   } else {
-    return form.getAttribute("method")
+    return null
   }
 }
+
+type FetchBodyData = FormData | URLSearchParams
+
+function isBodyInit(body: BodyInit | null | undefined): body is FetchBodyData {
+  return body instanceof FormData || body instanceof URLSearchParams
+}
diff --git a/app/javascript/turbo/index.ts b/app/javascript/turbo/index.ts
index 7a75be5..e280c5b 100644
--- a/app/javascript/turbo/index.ts
+++ b/app/javascript/turbo/index.ts
@@ -8,4 +8,4 @@ export { cable }
 
 import { encodeMethodIntoRequestBody } from "./fetch_requests"
 
-addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody)
+addEventListener("turbo:before-fetch-request", <EventListener>encodeMethodIntoRequestBody)

[marcoroth]

Thanks for starting this one @kzkn!

This looks good to me so far, I've left two small improvements, but they are non-blocking.

[marcoroth]

To add what @seanpdoyle mentioned in the previous comment: I've opened hotwired/turbo#800 to help with this.

With that you would be able to do something like:

Suggested change

	export function encodeMethodIntoRequestBody(event: Event) {
	let ev = event as TurboBeforeFetchRequestEvent
	if (ev.target instanceof HTMLFormElement) {
	const { target: form, detail: { fetchOptions } } = ev
	form.addEventListener("turbo:submit-start", ev => {
	export function encodeMethodIntoRequestBody(event: TurboBeforeFetchRequestEvent) {
	if (event.target instanceof HTMLFormElement) {
	const { target: form, detail: { fetchOptions } } = event
	form.addEventListener("turbo:submit-start", (ev: TurboSubmitStartEvent) => {

[kzkn]

It looks good to me. I look forward to seeing the pullreq merged 😀

[kzkn]

@seanpdoyle
Thanks for the comment.
I had a hard time sorting this part out. Your code looks better than mine 😄
I rewrote it based on your comments and the code written in #403.

[kzkn]

I have rebased to follow #410

[brunoprietog]

Since Turbo switched to JavaScript, I think we can close this