feat: add install function to router (#106)

* feat: add install function to router

* fix lint

* fix tests

* remove use router in tests

* revert some tests

* remove exports

* Update src/index.ts

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

diff --git a/playground/main.ts b/playground/main.ts
index 03e6d42c27e9fac09ab0f1d7d6700373635c570c..97771cb183873f23258b65b8b74ee0e8993b8f22 100644 (file)
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import { router, routerHistory } from './router'
 import { globalState } from './store'
-import { RouterPlugin } from '../src'
 import App from './App.vue'
 
 declare global {
@@ -18,6 +17,6 @@ window.r = router
 
 const app = createApp(App)
 app.provide('state', globalState)
-app.use(RouterPlugin, router)
+app.use(router)
 
 app.mount('#app')

diff --git a/src/index.ts b/src/index.ts
index 4721e2504dda2836924d8eab9cc313e94a5cd8d0..4f623a7ffa279dd2ac00625bc4e7429205c8437f 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,8 @@
 import { createRouter, Router } from './router'
-import { App, Ref, InjectionKey } from 'vue'
+import { Ref, InjectionKey } from 'vue'
 import createHistory from './history/html5'
 import createMemoryHistory from './history/memory'
 import createHashHistory from './history/hash'
-import { View } from './components/View'
-import Link from './components/Link'
 import {
   RouteLocationNormalized,
   START_LOCATION_NORMALIZED as START_LOCATION,
@@ -22,32 +20,6 @@ declare module 'vue' {
   function inject(name: 'route'): Ref<RouteLocationNormalized>
 }
 
-export function RouterPlugin(app: App, router: Router) {
-  // TODO: remove as any
-  app.component('RouterLink', Link as any)
-  app.component('RouterView', View as any)
-
-  let started = false
-  // TODO: can we use something that isn't a mixin?
-  app.mixin({
-    beforeCreate() {
-      if (!started) {
-        // TODO: this initial navigation is only necessary on client, on server it doesn't make sense
-        // because it will create an extra unecessary navigation and could lead to problems
-        router.push(router.history.location).catch(err => {
-          console.error('Unhandled error', err)
-        })
-        started = true
-      }
-    },
-  })
-
-  // TODO: merge strats?
-
-  app.provide('router', router)
-  app.provide('route', router.currentRoute)
-}
-
 export {
   createHistory,
   createMemoryHistory,

diff --git a/src/router.ts b/src/router.ts
index 6714f996103b0a4f3b81bbfcd35fb4fd63a8baaf..865720cbfa3f5df17c9a90be9cc2a4da40aa3b9e 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -34,8 +34,10 @@ import { extractComponentsGuards, guardToPromiseFn } from './utils'
 import { useCallbacks } from './utils/callbacks'
 import { encodeParam } from './utils/encoding'
 import { decode } from './utils/encoding'
-import { ref, Ref, markNonReactive, nextTick } from 'vue'
+import { ref, Ref, markNonReactive, nextTick, App } from 'vue'
 import { RouteRecordMatched } from './matcher/types'
+import Link from './components/Link'
+import { View } from './components/View'
 
 type ErrorHandler = (error: any) => any
 // resolve, reject arguments of Promise constructor
@@ -71,6 +73,8 @@ export interface Router {
   // TODO: also return a ListenerRemover
   onError(handler: ErrorHandler): void
   isReady(): Promise<void>
+
+  install(app: App): void
 }
 
 const isClient = typeof window !== 'undefined'
@@ -531,7 +535,35 @@ export function createRouter({
     isReady,
 
     history,
+    install(app: App) {
+      applyRouterPlugin(app, this)
+    },
   }
 
   return router
 }
+
+function applyRouterPlugin(app: App, router: Router) {
+  // TODO: remove as any
+  app.component('RouterLink', Link as any)
+  app.component('RouterView', View as any)
+
+  let started = false
+  // TODO: can we use something that isn't a mixin?
+  app.mixin({
+    beforeCreate() {
+      if (!started) {
+        // TODO: this initial navigation is only necessary on client, on server it doesn't make sense
+        // because it will create an extra unecessary navigation and could lead to problems
+        router.push(router.history.location).catch(err => {
+          console.error('Unhandled error', err)
+        })
+        started = true
+      }
+    },
+  })
+
+  // TODO: merge strats?
+  app.provide('router', router)
+  app.provide('route', router.currentRoute)
+}