move prefetch logic out of useLink and into composables

src/compositions/useLink.ts

@@ -1,18 +1,17 @@
-import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue, watch } from 'vue'
-import { usePropStore } from '@/compositions/usePropStore'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
+import { usePrefetchedComponent } from '@/compositions/usePrefetchedComponent'
+import { usePrefetchedProps } from '@/compositions/usePrefetchedProps'
 import { useRouter } from '@/compositions/useRouter'
 import { InvalidRouteParamValueError } from '@/errors/invalidRouteParamValueError'
 import { RouterResolveOptions } from '@/services/createRouterResolve'
-import { isWithComponent, isWithComponents } from '@/types/createRouteOptions'
-import { PrefetchConfig, PrefetchConfigs, getPrefetchOption } from '@/types/prefetch'
+import { PrefetchConfig, PrefetchConfigs } from '@/types/prefetch'
 import { RegisteredRoutes, RegisteredRoutesName } from '@/types/register'
 import { ResolvedRoute } from '@/types/resolved'
 import { RouterPushOptions } from '@/types/routerPush'
 import { RouterReplaceOptions } from '@/types/routerReplace'
 import { RouteParamsByKey } from '@/types/routeWithParams'
 import { Url, isUrl } from '@/types/url'
 import { AllPropertiesAreOptional } from '@/types/utilities'
-import { isAsyncComponent } from '@/utilities/components'
 
 export type UseLink = {
   /**
@@ -78,9 +77,6 @@ export function useLink(
   const sourceRef = toRef(source)
   const paramsRef = computed<Record<PropertyKey, unknown>>(() => isUrl(sourceRef.value) ? {} : toValue(paramsOrOptions))
   const optionsRef = computed<UseLinkOptions>(() => isUrl(sourceRef.value) ? toValue(paramsOrOptions) : toValue(maybeOptions))
-  const { getPrefetchProps, setPrefetchProps } = usePropStore()
-
-  let props: Record<string, unknown> = {}
 
   const href = computed(() => {
     if (isUrl(sourceRef.value)) {
@@ -103,8 +99,21 @@ export function useLink(
   const isExactMatch = computed(() => !!route.value && router.route.matched === route.value.matched)
   const isExternal = computed(() => router.isExternal(href.value))
 
+  const prefectConfig = computed<PrefetchConfigs>(() => {
+    const { prefetch: routerPrefetch } = router
+    const { prefetch: linkPrefetch } = optionsRef.value
+
+    return {
+      routerPrefetch,
+      linkPrefetch,
+    }
+  })
+
+  const { commitPrefetchedProps } = usePrefetchedProps(route, prefectConfig)
+  usePrefetchedComponent(route, prefectConfig)
+
   const push: UseLink['push'] = (options) => {
-    setPrefetchProps(props)
+    commitPrefetchedProps()
 
     return router.push(href.value, { ...optionsRef.value, ...options })
   }
@@ -113,25 +122,6 @@ export function useLink(
     return push(options)
   }
 
-  watch(route, route => {
-    if (!route) {
-      return
-    }
-
-    const { prefetch: routerPrefetch } = router
-    const { prefetch: linkPrefetch } = optionsRef.value
-
-    prefetchComponentsForRoute(route, {
-      routerPrefetch,
-      linkPrefetch,
-    })
-
-    props = getPrefetchProps(route, {
-      routerPrefetch,
-      linkPrefetch,
-    })
-  }, { immediate: true })
-
   return {
     route,
     href,
@@ -141,32 +131,4 @@ export function useLink(
     push,
     replace,
   }
-}
-
-function prefetchComponentsForRoute(route: ResolvedRoute, { routerPrefetch, linkPrefetch }: PrefetchConfigs): void {
-
-  route.matches.forEach(route => {
-    const shouldPrefetchComponents = getPrefetchOption({
-      routePrefetch: route.prefetch,
-      routerPrefetch,
-      linkPrefetch,
-    }, 'components')
-
-    if (!shouldPrefetchComponents) {
-      return
-    }
-
-    if (isWithComponent(route) && isAsyncComponent(route.component)) {
-      route.component.setup()
-    }
-
-    if (isWithComponents(route)) {
-      Object.values(route.components).forEach(component => {
-        if (isAsyncComponent(component)) {
-          component.setup()
-        }
-      })
-    }
-  })
-
 }

src/compositions/usePrefetchedComponent.ts

@@ -0,0 +1,35 @@
+import { computed, MaybeRef, ref, watch } from 'vue'
+import { isWithComponent, isWithComponents } from '@/types/createRouteOptions'
+import { getPrefetchOption, PrefetchConfigs } from '@/types/prefetch'
+import { ResolvedRoute } from '@/types/resolved'
+import { isAsyncComponent } from '@/utilities/components'
+
+export function usePrefetchedComponent(route: MaybeRef<ResolvedRoute | undefined>, prefetch: MaybeRef<PrefetchConfigs | undefined>): void {
+  const routeRef = ref(route)
+  const prefetchRef = ref(prefetch)
+
+  const matchesToPrefetchComponents = computed(() => {
+    const matches = routeRef.value?.matches ?? []
+
+    return matches.filter(route => getPrefetchOption({
+      ...prefetchRef.value,
+      routePrefetch: route.prefetch,
+    }, 'components'))
+  })
+
+  watch(matchesToPrefetchComponents, routes => {
+    routes.forEach(route => {
+      if (isWithComponent(route) && isAsyncComponent(route.component)) {
+        route.component.setup()
+      }
+
+      if (isWithComponents(route)) {
+        Object.values(route.components).forEach(component => {
+          if (isAsyncComponent(component)) {
+            component.setup()
+          }
+        })
+      }
+    })
+  }, { immediate: true })
+}

src/compositions/usePrefetchedProps.ts

@@ -0,0 +1,30 @@
+import { MaybeRef, Ref, ref, watch } from 'vue'
+import { usePropStore } from '@/compositions/usePropStore'
+import { PrefetchConfigs } from '@/types/prefetch'
+import { ResolvedRoute } from '@/types/resolved'
+
+export type UsePrefetchedProps = {
+  prefetchProps: Ref<Record<string, unknown>>,
+  commitPrefetchedProps: () => void,
+}
+
+export function usePrefetchedProps(route: MaybeRef<ResolvedRoute | undefined>, prefetch: MaybeRef<PrefetchConfigs | undefined>): UsePrefetchedProps {
+  const routeRef = ref(route)
+  const prefetchRef = ref(prefetch)
+  const store = usePropStore()
+  const prefetchProps = ref<Record<string, unknown>>({})
+
+  watch([routeRef, prefetchRef], ([route, prefetch]) => {
+    if (!route) {
+      return
+    }
+
+    prefetchProps.value = store.getPrefetchProps(route, prefetch ?? {})
+  }, { immediate: true })
+
+  function commitPrefetchedProps(): void {
+    store.setPrefetchProps(prefetchProps.value)
+  }
+
+  return { prefetchProps, commitPrefetchedProps }
+}