TS cleanup for <Link> component + View Transition prop in Svelte (#2667)

* Svelte

* Vue

Author: pascalbaljet

packages/svelte/src/components/Link.svelte

@@ -1,31 +1,25 @@
 <script lang="ts">
   import { isUrlMethodPair } from '@inertiajs/core'
-  import type {
-    CacheForOption,
-    FormDataConvertible,
-    LinkPrefetchOption,
-    Method,
-    PreserveStateOption,
-    UrlMethodPair,
-  } from '@inertiajs/core'
+  import type { LinkComponentBaseProps } from '@inertiajs/core'
   import { inertia } from '../index'
 
-  export let href: string | UrlMethodPair = ''
+  export let href: LinkComponentBaseProps['href'] = ''
   export let as: keyof HTMLElementTagNameMap = 'a'
-  export let data: Record<string, FormDataConvertible> = {}
-  export let method: Method = 'get'
-  export let replace: boolean = false
-  export let preserveScroll: PreserveStateOption = false
-  export let preserveState: PreserveStateOption | null = null
-  export let preserveUrl: boolean = false
-  export let only: string[] = []
-  export let except: string[] = []
-  export let headers: Record<string, string> = {}
-  export let queryStringArrayFormat: 'brackets' | 'indices' = 'brackets'
-  export let async: boolean = false
-  export let prefetch: boolean | LinkPrefetchOption | LinkPrefetchOption[] = false
-  export let cacheFor: CacheForOption | CacheForOption[] = 0
-  export let cacheTags: string | string[] = []
+  export let data: LinkComponentBaseProps['data'] = {}
+  export let method: LinkComponentBaseProps['method'] = 'get'
+  export let replace: LinkComponentBaseProps['replace'] = false
+  export let preserveScroll: LinkComponentBaseProps['preserveScroll'] = false
+  export let preserveState: LinkComponentBaseProps['preserveState'] | null = null
+  export let preserveUrl: LinkComponentBaseProps['preserveUrl'] = false
+  export let only: LinkComponentBaseProps['only'] = []
+  export let except: LinkComponentBaseProps['except'] = []
+  export let headers: LinkComponentBaseProps['headers'] = {}
+  export let queryStringArrayFormat: LinkComponentBaseProps['queryStringArrayFormat'] = 'brackets'
+  export let async: LinkComponentBaseProps['async'] = false
+  export let prefetch: LinkComponentBaseProps['prefetch'] = false
+  export let cacheFor: LinkComponentBaseProps['cacheFor'] = 0
+  export let cacheTags: LinkComponentBaseProps['cacheTags'] = []
+  export let viewTransition: LinkComponentBaseProps['viewTransition'] = false
 
   $: _method = isUrlMethodPair(href) ? href.method : method
   $: _href = isUrlMethodPair(href) ? href.url : href
@@ -57,6 +51,7 @@
     prefetch,
     cacheFor,
     cacheTags,
+    viewTransition,
   }}
   {...$$restProps}
   {...elProps}

packages/svelte/test-app/Pages/ViewTransition/PageA.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { inertia, router } from '@inertiajs/svelte'
+  import { Link, router } from '@inertiajs/svelte'
 
   const transitionWithBoolean = () => {
     router.visit('/view-transition/page-b', {
@@ -36,13 +36,11 @@
 <button on:click={transitionWithBoolean}>Transition with boolean</button>
 <button on:click={transitionWithCallback}>Transition with callback</button>
 <button on:click={clientSideReplace}>Client-side replace</button>
-<a
+<Link
   href="/view-transition/page-b"
-  use:inertia={{
-    viewTransition: (viewTransition) => {
-      viewTransition.ready.then(() => console.log('ready'))
-      viewTransition.updateCallbackDone.then(() => console.log('updateCallbackDone'))
-      viewTransition.finished.then(() => console.log('finished'))
-    },
-  }}>Link to Page B</a
+  viewTransition={(viewTransition) => {
+    viewTransition.ready.then(() => console.log('ready'))
+    viewTransition.updateCallbackDone.then(() => console.log('updateCallbackDone'))
+    viewTransition.finished.then(() => console.log('finished'))
+  }}>Link to Page B</Link
 >

packages/vue3/src/link.ts

@@ -1,8 +1,5 @@
 import {
   ActiveVisit,
-  CacheForOption,
-  CancelTokenCallback,
-  GlobalEventCallback,
   isUrlMethodPair,
   LinkComponentBaseProps,
   LinkPrefetchOption,
@@ -29,107 +26,107 @@ const Link: InertiaLink = defineComponent({
   name: 'Link',
   props: {
     as: {
-      type: [String, Object] as PropType<string | Component>,
+      type: [String, Object] as PropType<InertiaLinkProps['as']>,
       default: 'a',
     },
     data: {
-      type: Object,
+      type: Object as PropType<InertiaLinkProps['data']>,
       default: () => ({}),
     },
     href: {
       type: [String, Object] as PropType<InertiaLinkProps['href']>,
       default: '',
     },
     method: {
-      type: String as PropType<Method>,
+      type: String as PropType<InertiaLinkProps['method']>,
       default: 'get',
     },
     replace: {
-      type: Boolean,
+      type: Boolean as PropType<InertiaLinkProps['replace']>,
       default: false,
     },
     preserveScroll: {
-      type: Boolean,
+      type: [Boolean, String, Function] as PropType<InertiaLinkProps['preserveScroll']>,
       default: false,
     },
     preserveState: {
-      type: Boolean,
+      type: [Boolean, String, Function] as PropType<InertiaLinkProps['preserveState']>,
       default: null,
     },
     preserveUrl: {
-      type: Boolean,
+      type: Boolean as PropType<InertiaLinkProps['preserveUrl']>,
       default: false,
     },
     only: {
-      type: Array<string>,
+      type: Array as PropType<InertiaLinkProps['only']>,
       default: () => [],
     },
     except: {
-      type: Array<string>,
+      type: Array as PropType<InertiaLinkProps['except']>,
       default: () => [],
     },
     headers: {
-      type: Object,
+      type: Object as PropType<InertiaLinkProps['headers']>,
       default: () => ({}),
     },
     queryStringArrayFormat: {
-      type: String as PropType<'brackets' | 'indices'>,
+      type: String as PropType<InertiaLinkProps['queryStringArrayFormat']>,
       default: 'brackets',
     },
     async: {
-      type: Boolean,
+      type: Boolean as PropType<InertiaLinkProps['async']>,
       default: false,
     },
     prefetch: {
-      type: [Boolean, String, Array] as PropType<boolean | LinkPrefetchOption | LinkPrefetchOption[]>,
+      type: [Boolean, String, Array] as PropType<InertiaLinkProps['prefetch']>,
       default: false,
     },
     cacheFor: {
-      type: [Number, String, Array] as PropType<CacheForOption | CacheForOption[]>,
+      type: [Number, String, Array] as PropType<InertiaLinkProps['cacheFor']>,
       default: 0,
     },
     onStart: {
-      type: Function as PropType<GlobalEventCallback<'start'>>,
+      type: Function as PropType<InertiaLinkProps['onStart']>,
       default: noop,
     },
     onProgress: {
-      type: Function as PropType<GlobalEventCallback<'progress'>>,
+      type: Function as PropType<InertiaLinkProps['onProgress']>,
       default: noop,
     },
     onFinish: {
-      type: Function as PropType<GlobalEventCallback<'finish'>>,
+      type: Function as PropType<InertiaLinkProps['onFinish']>,
       default: noop,
     },
     onBefore: {
-      type: Function as PropType<GlobalEventCallback<'before'>>,
+      type: Function as PropType<InertiaLinkProps['onBefore']>,
       default: noop,
     },
     onCancel: {
-      type: Function as PropType<GlobalEventCallback<'cancel'>>,
+      type: Function as PropType<InertiaLinkProps['onCancel']>,
       default: noop,
     },
     onSuccess: {
-      type: Function as PropType<GlobalEventCallback<'success'>>,
+      type: Function as PropType<InertiaLinkProps['onSuccess']>,
       default: noop,
     },
     onError: {
-      type: Function as PropType<GlobalEventCallback<'error'>>,
+      type: Function as PropType<InertiaLinkProps['onError']>,
       default: noop,
     },
     onCancelToken: {
-      type: Function as PropType<CancelTokenCallback>,
+      type: Function as PropType<InertiaLinkProps['onCancelToken']>,
       default: noop,
     },
     onPrefetching: {
-      type: Function as PropType<GlobalEventCallback<'prefetching'>>,
+      type: Function as PropType<InertiaLinkProps['onPrefetching']>,
       default: noop,
     },
     onPrefetched: {
-      type: Function as PropType<GlobalEventCallback<'prefetched'>>,
+      type: Function as PropType<InertiaLinkProps['onPrefetched']>,
       default: noop,
     },
     cacheTags: {
-      type: [String, Array] as PropType<string | string[]>,
+      type: [String, Array] as PropType<InertiaLinkProps['cacheTags']>,
       default: () => [],
     },
     viewTransition: {