refactor: use InjectionKeys for route and router

diff --git a/playground/App.vue b/playground/App.vue
index 93a7f575dba7e8dd4758442867eef8ad76bd3838..5e75a6415db3a28eedd4260cf59ade966926d7c3 100644 (file)
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -92,6 +92,11 @@
       <li>
         <router-link to="/cant-leave">/cant-leave</router-link>
       </li>
+      <li>
+        <router-link :to="{ name: 'docs', params: { id: 'é' } }"
+          >/docs/é</router-link
+        >
+      </li>
     </ul>
     <!-- <transition
       name="fade"
@@ -104,17 +109,21 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, inject, computed } from 'vue'
 import { scrollWaiter } from './scrollWaiter'
+import { routeKey, routerKey } from '../src'
 
 export default defineComponent({
   name: 'App',
   setup() {
-    const router = inject('router')
+    const router = inject(routerKey)!
+    const route = inject(routeKey)!
+    const a = inject('idk')
     const state = inject('state')
+
     const currentLocation = computed(() => {
-      const { matched, ...rest } = router.currentRoute.value
+      const { matched, ...rest } = route.value
       return rest
     })
 
@@ -126,12 +135,18 @@ export default defineComponent({
     }
 
     const nextUserLink = computed(
-      () =>
-        '/users/' +
-        String((Number(router.currentRoute.value.params.id) || 0) + 1)
+      () => '/users/' + String((Number(route.value.params.id) || 0) + 1)
     )
 
-    return { currentLocation, nextUserLink, state, flushWaiter, setupWaiter }
+    return {
+      currentLocation,
+      nextUserLink,
+      state,
+      flushWaiter,
+      setupWaiter,
+      router,
+      a,
+    }
   },
 })
 </script>

diff --git a/src/components/Link.ts b/src/components/Link.ts
index 9c0d8d51944b44c3308fefc4a561520181fb7656..f22670e7c45e5cce762e3e8048fdb3b50b2a1de1 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -9,6 +9,7 @@ import {
   Ref,
 } from 'vue'
 import { RouteLocation } from '../types'
+import { routerKey } from '../injectKeys'
 
 interface UseLinkProps {
   to: Ref<RouteLocation> | RouteLocation
@@ -17,7 +18,7 @@ interface UseLinkProps {
 
 // TODO: what should be accepted as arguments?
 export function useLink(props: UseLinkProps) {
-  const router = inject('router')
+  const router = inject(routerKey)!
 
   const route = computed(() =>
     router.resolve(isRef(props.to) ? props.to.value : props.to)

diff --git a/src/components/View.ts b/src/components/View.ts
index 1fac190168e57222c8184d257a201ec3e8a03601..564f488bef823344c1111a62d7d465e764da279b 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -10,6 +10,7 @@ import {
   Ref,
 } from 'vue'
 import { RouteRecordNormalized } from '../matcher/types'
+import { routeKey } from '../injectKeys'
 
 // TODO: make it work with no symbols too for IE
 export const matchedRouteKey = Symbol() as InjectionKey<
@@ -26,7 +27,7 @@ export const View = defineComponent({
   },
 
   setup(props, { attrs }) {
-    const route = inject('route')
+    const route = inject(routeKey)!
     const depth: number = inject('routerViewDepth', 0)
     provide('routerViewDepth', depth + 1)
 

diff --git a/src/index.ts b/src/index.ts
index 6fadc302a9ffa6578bd245c6b6cb724a2f33f884..d435747947f08ac212b8faf8afdab351ab798fd6 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,4 @@
 import { createRouter, Router } from './router'
-import { Ref, InjectionKey } from 'vue'
 import createHistory from './history/html5'
 import createMemoryHistory from './history/memory'
 import createHashHistory from './history/hash'
@@ -9,13 +8,22 @@ import {
 } from './types'
 import { onBeforeRouteLeave } from './navigationGuards'
 
-declare module 'vue' {
-  function inject<T>(key: InjectionKey<T> | string): T | undefined
-  function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
-  function inject(key: InjectionKey<any> | string, defaultValue?: unknown): any
-  function inject(name: 'router'): Router
-  function inject(name: 'route'): Ref<RouteLocationNormalized>
-}
+export { PathParserOptions } from './matcher'
+export { RouteLocationOptions } from './types/index'
+
+// declare module '@vue/runtime-core' {
+//   interface Inject {
+//     (name: 'router'): Router
+//     (name: 'route'): Ref<RouteLocationNormalized>
+//   }
+// function inject<T>(key: InjectionKey<T> | string): T | undefined
+// function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
+// function inject(key: InjectionKey<any> | string, defaultValue?: unknown): any
+// export function inject(name: 'router'): Router
+// export function inject(name: 'route'): Ref<RouteLocationNormalized>
+// }
+
+export * from './injectKeys'
 
 export {
   createHistory,

diff --git a/src/injectKeys.ts b/src/injectKeys.ts
new file mode 100644 (file)
index 0000000..75700fd
--- /dev/null
+++ b/src/injectKeys.ts
@@ -0,0 +1,7 @@
+import { InjectionKey, Ref } from 'vue'
+import { Router, RouteLocationNormalized } from '.'
+
+export const routerKey = ('router' as unknown) as InjectionKey<Router>
+export const routeKey = ('route' as unknown) as InjectionKey<
+  Ref<RouteLocationNormalized>
+>

diff --git a/src/matcher/index.ts b/src/matcher/index.ts
index f40234c3e630e588123c5b1b4a2623f530ddc26f..b3f215a761cb0b71f8f3fe4cba89a5862cc8b412 100644 (file)
--- a/src/matcher/index.ts
+++ b/src/matcher/index.ts
@@ -235,3 +235,5 @@ export function normalizeRouteRecord(
     leaveGuards: [],
   }
 }
+
+export { PathParserOptions }

diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
index 274fa469f4a01015d78dd5fc9c2fd2d06429cee8..97eecc8ff12c3a6458ba54455b554e8be66c1539 100644 (file)
--- a/src/navigationGuards.ts
+++ b/src/navigationGuards.ts
@@ -10,7 +10,8 @@ export function onBeforeRouteLeave(leaveGuard: NavigationGuard) {
     return
   }
 
-  const matched = inject(matchedRouteKey, {}).value
+  // TODO: fix wrong type
+  const matched = inject(matchedRouteKey, {} as any).value
 
   if (!matched) {
     __DEV__ &&
@@ -18,5 +19,6 @@ export function onBeforeRouteLeave(leaveGuard: NavigationGuard) {
     return
   }
 
+  // @ts-ignore
   matched.leaveGuards.push(leaveGuard.bind(instance.proxy))
 }