From 26437f240dd51df195820b7da300d3f6dfdb8336 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 16 Feb 2020 23:53:43 +0100
Subject: [PATCH] refactor: use InjectionKeys for route and router

---
 playground/App.vue      | 29 ++++++++++++++++++++++-------
 src/components/Link.ts  |  3 ++-
 src/components/View.ts  |  3 ++-
 src/index.ts            | 24 ++++++++++++++++--------
 src/injectKeys.ts       |  7 +++++++
 src/matcher/index.ts    |  2 ++
 src/navigationGuards.ts |  4 +++-
 7 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 src/injectKeys.ts

diff --git a/playground/App.vue b/playground/App.vue
index 93a7f575..5e75a641 100644
--- 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 9c0d8d51..f22670e7 100644
--- 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 1fac1901..564f488b 100644
--- 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 6fadc302..d4357479 100644
--- 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
index 00000000..75700fdc
--- /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 f40234c3..b3f215a7 100644
--- 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 274fa469..97eecc8f 100644
--- 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))
 }
-- 
2.47.3