refactor(link): directly inject the route

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 796a6027749c81eac467798eb05fc262ca8480ea..bd7632bc32f0aa4d22fd93d062f6cf4e0cd8e917 100644 (file)
--- a/__tests__/RouterLink.spec.ts
+++ b/__tests__/RouterLink.spec.ts
@@ -10,8 +10,8 @@ import {
   RouteLocation,
 } from '../src/types'
 import { createMemoryHistory } from '../src'
-import { mount } from './mount'
-import { ref, markNonReactive, nextTick } from 'vue'
+import { mount, createMockedRoute } from './mount'
+import { nextTick } from 'vue'
 import { RouteRecordNormalized } from '../src/matcher/types'
 import { routerKey } from '../src/utils/injectionSymbols'
 
@@ -250,7 +250,7 @@ async function factory(
   resolvedLocation: RouteLocation,
   slotTemplate: string = ''
 ) {
-  // const route = createMockedRoute(initialRoute)
+  const route = createMockedRoute(currentLocation)
   const router = {
     history: createMemoryHistory(),
     createHref(to: RouteLocationNormalized): string {
@@ -258,7 +258,6 @@ async function factory(
     },
     resolve: jest.fn(),
     push: jest.fn().mockResolvedValue(resolvedLocation),
-    currentRoute: ref(markNonReactive(currentLocation)),
   }
   router.resolve.mockReturnValueOnce(resolvedLocation)
 
@@ -266,11 +265,12 @@ async function factory(
     propsData,
     provide: {
       [routerKey as any]: router,
+      ...route.provides,
     },
     slots: { default: slotTemplate },
   })
 
-  return { router, wrapper }
+  return { router, wrapper, route }
 }
 
 describe('RouterLink', () => {
@@ -297,18 +297,16 @@ describe('RouterLink', () => {
   })
 
   it('can change the value', async () => {
-    const to = ref(locations.basic.string)
     const { wrapper, router } = await factory(
       START_LOCATION_NORMALIZED,
-      { to },
+      { to: locations.basic.string },
       locations.basic.normalized
     )
     expect(wrapper.rootEl.querySelector('a')!.getAttribute('href')).toBe(
       '/home'
     )
     router.resolve.mockReturnValueOnce(locations.foo.normalized)
-    to.value = locations.foo.string
-    await nextTick()
+    await wrapper.setProps({ to: locations.foo.string })
     expect(wrapper.rootEl.querySelector('a')!.getAttribute('href')).toBe('/foo')
   })
 

diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 09ab815141e616ccaab3464effd025c7ac7465e3..fa92343513900962c27cfd9cb64f16299b18a827 100644 (file)
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -7,6 +7,7 @@ import {
   _RouteRecordBase,
   RouteComponent,
   RouteRecordRaw,
+  RouteRecordName,
 } from '../src/types'
 import { h, resolveComponent, ComponentOptions } from 'vue'
 import { RouterOptions, createWebHistory, createRouter } from '../src'
@@ -36,7 +37,7 @@ export interface RouteRecordViewLoose
 
 // @ts-ignore we are intentionally overriding the type
 export interface RouteLocationNormalizedLoose extends RouteLocationNormalized {
-  name: string | undefined
+  name: RouteRecordName | null | undefined
   path: string
   // record?
   params: any

diff --git a/src/components/Link.ts b/src/components/Link.ts
index efe531212daf9d391827b6c23ffb9f7be16ae8f1..12db59d1b700795d3f82dc0c210d4aac902c66a9 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -9,7 +9,7 @@ import {
 } from 'vue'
 import { RouteLocationRaw, VueUseOptions, RouteLocation } from '../types'
 import { isSameLocationObject, isSameRouteRecord } from '../utils'
-import { routerKey } from '../utils/injectionSymbols'
+import { routerKey, routeLocationKey } from '../utils/injectionSymbols'
 import { RouteRecord } from '../matcher/types'
 
 interface LinkProps {
@@ -24,7 +24,7 @@ type UseLinkOptions = VueUseOptions<LinkProps>
 // `isExactActive` behavior should go through an RFC
 export function useLink(props: UseLinkOptions) {
   const router = inject(routerKey)!
-  const currentRoute = router.currentRoute
+  const currentRoute = inject(routeLocationKey)!
 
   const route = computed(() => router.resolve(unref(props.to)))
   const href = computed(() => router.createHref(route.value))
@@ -34,7 +34,7 @@ export function useLink(props: UseLinkOptions) {
     const currentMatched: RouteRecord | undefined =
       route.value.matched[route.value.matched.length - 1]
     if (!currentMatched) return -1
-    return currentRoute.value.matched.findIndex(
+    return currentRoute.matched.findIndex(
       isSameRouteRecord.bind(null, currentMatched)
     )
   })
@@ -42,13 +42,13 @@ export function useLink(props: UseLinkOptions) {
   const isActive = computed<boolean>(
     () =>
       activeRecordIndex.value > -1 &&
-      includesParams(currentRoute.value.params, route.value.params)
+      includesParams(currentRoute.params, route.value.params)
   )
   const isExactActive = computed<boolean>(
     () =>
       activeRecordIndex.value > -1 &&
-      activeRecordIndex.value === currentRoute.value.matched.length - 1 &&
-      isSameLocationObject(currentRoute.value.params, route.value.params)
+      activeRecordIndex.value === currentRoute.matched.length - 1 &&
+      isSameLocationObject(currentRoute.params, route.value.params)
   )
 
   // TODO: handle replace prop