Internal TypeScript improvements (#2640)

* react/vue

* wip

* svelte

* Update useForm.ts

* Update InfiniteScroll.svelte

* Update useForm.ts

* Update useForm.ts

Author: pascalbaljet

packages/core/src/debug.ts

@@ -2,8 +2,7 @@ export const stackTrace = (autolog = true) => {
   try {
     throw new Error()
   } catch (e) {
-    // @ts-ignore
-    const stack = e.stack
+    const stack = (e as Error).stack
 
     if (!autolog) {
       return stack

packages/react/src/Form.ts

@@ -70,7 +70,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     ref,
   ) => {
     const form = useForm<Record<string, any>>({})
-    const formElement = useRef<HTMLFormElement>(null)
+    const formElement = useRef<HTMLFormElement>(undefined)
 
     const resolvedMethod = useMemo(() => {
       return isUrlMethodPair(action) ? action.method : (method.toLowerCase() as Method)
@@ -96,13 +96,15 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
 
       const formEvents: Array<keyof HTMLElementEventMap> = ['input', 'change', 'reset']
 
-      formEvents.forEach((e) => formElement.current.addEventListener(e, updateDirtyState))
+      formEvents.forEach((e) => formElement.current!.addEventListener(e, updateDirtyState))
 
       return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
     }, [])
 
     const reset = (...fields: string[]) => {
-      resetFormFields(formElement.current, defaultData.current, fields)
+      if (formElement.current) {
+        resetFormFields(formElement.current, defaultData.current, fields)
+      }
     }
 
     const resetAndClearErrors = (...fields: string[]) => {

packages/react/src/InfiniteScroll.ts

@@ -181,8 +181,8 @@ const InfiniteScroll = forwardRef<InfiniteScrollRef, ComponentProps>(
 
         // Elements
         getTriggerMargin: () => callbackPropsRef.current.buffer,
-        getStartElement: () => resolvedStartElement,
-        getEndElement: () => resolvedEndElement,
+        getStartElement: () => resolvedStartElement!,
+        getEndElement: () => resolvedEndElement!,
         getItemsElement: () => resolvedItemsElement,
         getScrollableParent: () => scrollableParent,
 

packages/react/src/Link.ts

@@ -9,6 +9,7 @@ import {
   router,
   shouldIntercept,
   shouldNavigate,
+  VisitOptions,
 } from '@inertiajs/core'
 import { createElement, ElementType, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 
@@ -59,7 +60,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
     ref,
   ) => {
     const [inFlightCount, setInFlightCount] = useState(0)
-    const hoverTimeout = useRef<number>(null)
+    const hoverTimeout = useRef<number>(undefined)
 
     const _method = useMemo(() => {
       return isUrlMethodPair(href) ? href.method : (method.toLowerCase() as Method)
@@ -82,7 +83,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
     const url = useMemo(() => mergeDataArray[0], [mergeDataArray])
     const _data = useMemo(() => mergeDataArray[1], [mergeDataArray])
 
-    const baseParams = useMemo(
+    const baseParams = useMemo<VisitOptions>(
       () => ({
         data: _data,
         method: _method,
@@ -98,7 +99,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
       [_data, _method, preserveScroll, preserveState, preserveUrl, replace, only, except, headers, async],
     )
 
-    const visitParams = useMemo(
+    const visitParams = useMemo<VisitOptions>(
       () => ({
         ...baseParams,
         onCancelToken,

packages/react/src/PageContext.ts

@@ -1,6 +1,7 @@
+import { Page } from '@inertiajs/core'
 import { createContext } from 'react'
 
-const pageContext = createContext(undefined)
+const pageContext = createContext<Page | null>(null)
 pageContext.displayName = 'InertiaPageContext'
 
 export default pageContext

packages/react/src/useForm.ts

@@ -1,12 +1,14 @@
 import {
   CancelToken,
+  Errors,
   ErrorValue,
   FormDataErrors,
   FormDataKeys,
   FormDataType,
   FormDataValues,
   Method,
   Progress,
+  RequestPayload,
   router,
   UrlMethodPair,
   VisitOptions,
@@ -27,6 +29,8 @@ export type SetDataAction<TForm extends Record<any, any>> = SetDataByObject<TFor
   SetDataByKeyValuePair<TForm>
 
 type FormOptions = Omit<VisitOptions, 'data'>
+type SubmitArgs = [Method, string, FormOptions?] | [UrlMethodPair, FormOptions?]
+type TransformCallback<TForm> = (data: TForm) => object
 
 export interface InertiaFormProps<TForm extends object> {
   data: TForm
@@ -38,7 +42,7 @@ export interface InertiaFormProps<TForm extends object> {
   wasSuccessful: boolean
   recentlySuccessful: boolean
   setData: SetDataAction<TForm>
-  transform: (callback: (data: TForm) => object) => void
+  transform: (callback: TransformCallback<TForm>) => void
   setDefaults(): void
   setDefaults<T extends FormDataKeys<TForm>>(field: T, value: FormDataValues<TForm, T>): void
   setDefaults(fields: Partial<TForm>): void
@@ -47,7 +51,7 @@ export interface InertiaFormProps<TForm extends object> {
   resetAndClearErrors<K extends FormDataKeys<TForm>>(...fields: K[]): void
   setError<K extends FormDataKeys<TForm>>(field: K, value: ErrorValue): void
   setError(errors: FormDataErrors<TForm>): void
-  submit: (...args: [Method, string, FormOptions?] | [UrlMethodPair, FormOptions?]) => void
+  submit: (...args: SubmitArgs) => void
   get: (url: string, options?: FormOptions) => void
   patch: (url: string, options?: FormOptions) => void
   post: (url: string, options?: FormOptions) => void
@@ -66,23 +70,23 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKeyOrInitialValues?: string | TForm | (() => TForm),
   maybeInitialValues?: TForm | (() => TForm),
 ): InertiaFormProps<TForm> {
-  const isMounted = useRef(null)
+  const isMounted = useRef(false)
   const rememberKey = typeof rememberKeyOrInitialValues === 'string' ? rememberKeyOrInitialValues : null
   const [defaults, setDefaults] = useState(
     (typeof rememberKeyOrInitialValues === 'string' ? maybeInitialValues : rememberKeyOrInitialValues) || ({} as TForm),
   )
   const cancelToken = useRef<CancelToken | null>(null)
-  const recentlySuccessfulTimeoutId = useRef(null)
+  const recentlySuccessfulTimeoutId = useRef<number>(undefined)
   const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : useState(defaults)
   const [errors, setErrors] = rememberKey
     ? useRemember({} as FormDataErrors<TForm>, `${rememberKey}:errors`)
     : useState({} as FormDataErrors<TForm>)
   const [hasErrors, setHasErrors] = useState(false)
   const [processing, setProcessing] = useState(false)
-  const [progress, setProgress] = useState(null)
+  const [progress, setProgress] = useState<Progress | null>(null)
   const [wasSuccessful, setWasSuccessful] = useState(false)
   const [recentlySuccessful, setRecentlySuccessful] = useState(false)
-  const transform = useRef((data) => data)
+  const transform = useRef<TransformCallback<TForm>>((data) => data)
   const isDirty = useMemo(() => !isEqual(data, defaults), [data, defaults])
 
   useEffect(() => {
@@ -97,16 +101,16 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   const setDefaultsCalledInOnSuccess = useRef(false)
 
   const submit = useCallback(
-    (...args) => {
+    (...args: SubmitArgs) => {
       const objectPassed = args[0] !== null && typeof args[0] === 'object'
 
-      const method = objectPassed ? args[0].method : args[0]
-      const url = objectPassed ? args[0].url : args[1]
+      const method = objectPassed ? args[0].method : (args[0] as Method)
+      const url = objectPassed ? args[0].url : (args[1] as string)
       const options = (objectPassed ? args[1] : args[2]) ?? {}
 
       setDefaultsCalledInOnSuccess.current = false
 
-      const _options = {
+      const _options: VisitOptions = {
         ...options,
         onCancelToken: (token) => {
           cancelToken.current = token
@@ -132,7 +136,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           }
         },
         onProgress: (event) => {
-          setProgress(event)
+          setProgress(event || null)
 
           if (options.onProgress) {
             return options.onProgress(event)
@@ -168,7 +172,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           if (isMounted.current) {
             setProcessing(false)
             setProgress(null)
-            setErrors(errors)
+            setErrors(errors as FormDataErrors<TForm>)
             setHasErrors(true)
           }
 
@@ -200,10 +204,12 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         },
       }
 
+      const transformedData = transform.current(data) as RequestPayload
+
       if (method === 'delete') {
-        router.delete(url, { ..._options, data: transform.current(data) })
+        router.delete(url, { ..._options, data: transformedData })
       } else {
-        router[method](url, transform.current(data), _options)
+        router[method](url, transformedData, _options)
       }
     },
     [data, setErrors, transform],
@@ -266,7 +272,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   }, [dataAsDefaults])
 
   const reset = useCallback(
-    (...fields) => {
+    (...fields: string[]) => {
       if (fields.length === 0) {
         setData(defaults)
       } else {
@@ -300,12 +306,12 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   )
 
   const clearErrors = useCallback(
-    (...fields) => {
+    (...fields: string[]) => {
       setErrors((errors) => {
         const newErrors = Object.keys(errors).reduce(
           (carry, field) => ({
             ...carry,
-            ...(fields.length > 0 && !fields.includes(field) ? { [field]: errors[field] } : {}),
+            ...(fields.length > 0 && !fields.includes(field) ? { [field]: (errors as Errors)[field] } : {}),
           }),
           {},
         )
@@ -317,16 +323,18 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   )
 
   const resetAndClearErrors = useCallback(
-    (...fields) => {
+    (...fields: string[]) => {
       reset(...fields)
       clearErrors(...fields)
     },
     [reset, clearErrors],
   )
 
-  const createSubmitMethod = (method) => (url, options) => {
-    submit(method, url, options)
-  }
+  const createSubmitMethod =
+    (method: Method) =>
+    (url: string, options: VisitOptions = {}) => {
+      submit(method, url, options)
+    }
   const getMethod = useCallback(createSubmitMethod('get'), [submit])
   const post = useCallback(createSubmitMethod('post'), [submit])
   const put = useCallback(createSubmitMethod('put'), [submit])
@@ -339,7 +347,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     }
   }, [])
 
-  const transformFunction = useCallback((callback) => {
+  const transformFunction = useCallback((callback: TransformCallback<TForm>) => {
     transform.current = callback
   }, [])
 

packages/svelte/package.json

@@ -35,7 +35,7 @@
     }
   },
   "scripts": {
-    "build": "pnpm package && publint",
+    "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",
     "build:with-deps": "svelte-kit sync && vite build --config vite-with-deps.config.js",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

packages/svelte/src/components/Form.svelte

@@ -5,6 +5,7 @@
     mergeDataIntoQueryString,
     type Errors,
     type FormComponentProps,
+    type Method,
     type FormDataConvertible,
     type VisitOptions,
     isUrlMethodPair,
@@ -45,8 +46,8 @@
   let isDirty = false
   let defaultData: FormData = new FormData()
 
-  $: _method = isUrlMethodPair(action) ? action.method : (method.toLowerCase() as FormComponentProps['method'])
-  $: _action = isUrlMethodPair(action) ? action.url : action
+  $: _method = isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method)
+  $: _action = isUrlMethodPair(action) ? action.url : (action as string)
 
   function getFormData(): FormData {
     return new FormData(formElement)
@@ -117,7 +118,7 @@
       ...options,
     }
 
-    $form.transform(() => transform(_data)).submit(_method, url, submitOptions)
+    $form.transform(() => transform!(_data)).submit(_method, url, submitOptions)
   }
 
   function handleSubmit(event: Event) {

packages/svelte/src/components/InfiniteScroll.svelte

@@ -9,7 +9,7 @@
   } from '@inertiajs/core'
   import { onDestroy, onMount } from 'svelte'
 
-  export let data: InfiniteScrollComponentBaseProps['data'] = undefined
+  export let data: InfiniteScrollComponentBaseProps['data']
   export let buffer: InfiniteScrollComponentBaseProps['buffer'] = 0
   export let as: InfiniteScrollComponentBaseProps['as'] = 'div'
   export let manual: InfiniteScrollComponentBaseProps['manual'] = false
@@ -126,28 +126,28 @@
 
     infiniteScrollInstance = useInfiniteScroll({
       // Data
-      getPropName: () => data,
-      inReverseMode: () => reverse,
+      getPropName: () => data!,
+      inReverseMode: () => reverse ?? false,
       shouldFetchNext: () => !onlyPrevious,
       shouldFetchPrevious: () => !onlyNext,
-      shouldPreserveUrl: () => preserveUrl,
+      shouldPreserveUrl: () => preserveUrl ?? false,
 
       // Elements
-      getTriggerMargin: () => buffer,
-      getStartElement: () => resolvedStartElement,
-      getEndElement: () => resolvedEndElement,
-      getItemsElement: () => resolvedItemsElement,
+      getTriggerMargin: () => buffer ?? 0,
+      getStartElement: () => resolvedStartElement!,
+      getEndElement: () => resolvedEndElement!,
+      getItemsElement: () => resolvedItemsElement!,
       getScrollableParent: () => (resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null),
 
       // Request callbacks
       onBeforePreviousRequest: () => (loadingPrevious = true),
       onBeforeNextRequest: () => (loadingNext = true),
       onCompletePreviousRequest: () => {
-        requestCount = infiniteScrollInstance.dataManager.getRequestCount()
+        requestCount = infiniteScrollInstance!.dataManager.getRequestCount()
         loadingPrevious = false
       },
       onCompleteNextRequest: () => {
-        requestCount = infiniteScrollInstance.dataManager.getRequestCount()
+        requestCount = infiniteScrollInstance!.dataManager.getRequestCount()
         loadingNext = false
       },
     })
@@ -167,7 +167,7 @@
     }
   }
 
-  $: manualMode = manual || (manualAfter > 0 && requestCount >= manualAfter)
+  $: manualMode = manual || (manualAfter !== undefined && manualAfter > 0 && requestCount >= manualAfter)
   $: autoLoad = !manualMode
 
   $: headerAutoMode = autoLoad && !onlyNext

packages/svelte/src/link.ts

@@ -136,7 +136,7 @@ function link(
       return 30_000
     })()
 
-    cacheTags = cacheTagValues
+    cacheTags = Array.isArray(cacheTagValues) ? cacheTagValues : [cacheTagValues]
 
     method = isUrlMethodPair(params.href) ? params.href.method : (params.method?.toLowerCase() as Method) || 'get'
     ;[href, data] = hrefAndData(method, params)