Merge pull request #594 from kitbagjs/fix-registered-assset-types

fix: Registered Router Assets type fix

Author: stackoverfloweth

src/main.ts

@@ -61,7 +61,8 @@ export const query = withParams
 
 // Assets
 import { routerInjectionKey } from './keys'
-import { createRouterAssets } from './services/createRouterAssets'
+import { createRouterAssets, RouterAssets } from './services/createRouterAssets'
+import { RegisteredRouter } from './types/register'
 
 const routerAssets = createRouterAssets(routerInjectionKey)
 
@@ -73,7 +74,7 @@ const routerAssets = createRouterAssets(routerInjectionKey)
  * @returns {RouteHookRemove} A function that removes the added hook.
  * @group Hooks
  */
-export const onBeforeRouteLeave = routerAssets.onBeforeRouteLeave
+export const onBeforeRouteLeave: RouterAssets<RegisteredRouter>['onBeforeRouteLeave'] = routerAssets.onBeforeRouteLeave
 
 /**
  * Registers a hook that is called before a route is updated. Must be called from setup.
@@ -83,7 +84,7 @@ export const onBeforeRouteLeave = routerAssets.onBeforeRouteLeave
  * @returns {RouteHookRemove} A function that removes the added hook.
  * @group Hooks
  */
-export const onBeforeRouteUpdate = routerAssets.onBeforeRouteUpdate
+export const onBeforeRouteUpdate: RouterAssets<RegisteredRouter>['onBeforeRouteUpdate'] = routerAssets.onBeforeRouteUpdate
 
 /**
  * Registers a hook that is called after a route has been left. Must be called during setup.
@@ -93,7 +94,7 @@ export const onBeforeRouteUpdate = routerAssets.onBeforeRouteUpdate
  * @returns {RouteHookRemove} A function that removes the added hook.
  * @group Hooks
  */
-export const onAfterRouteLeave = routerAssets.onAfterRouteLeave
+export const onAfterRouteLeave: RouterAssets<RegisteredRouter>['onAfterRouteLeave'] = routerAssets.onAfterRouteLeave
 
 /**
  * Registers a hook that is called after a route has been updated. Must be called during setup.
@@ -103,7 +104,7 @@ export const onAfterRouteLeave = routerAssets.onAfterRouteLeave
  * @returns {RouteHookRemove} A function that removes the added hook.
  * @group Hooks
  */
-export const onAfterRouteUpdate = routerAssets.onAfterRouteUpdate
+export const onAfterRouteUpdate: RouterAssets<RegisteredRouter>['onAfterRouteUpdate'] = routerAssets.onAfterRouteUpdate
 
 /**
  * A guard to verify if a route or unknown value matches a given route name.
@@ -112,7 +113,7 @@ export const onAfterRouteUpdate = routerAssets.onAfterRouteUpdate
  * @returns True if the current route matches the given route name, false otherwise.
  * @group Type Guards
  */
-export const isRoute = routerAssets.isRoute
+export const isRoute: RouterAssets<RegisteredRouter>['isRoute'] = routerAssets.isRoute
 
 /**
  * A component to render the current route's component.
@@ -121,7 +122,7 @@ export const isRoute = routerAssets.isRoute
  * @returns The router view component.
  * @group Components
  */
-export const RouterView = routerAssets.RouterView
+export const RouterView: RouterAssets<RegisteredRouter>['RouterView'] = routerAssets.RouterView
 
 /**
  * A component to render a link to a route or any url.
@@ -130,7 +131,7 @@ export const RouterView = routerAssets.RouterView
  * @returns The router link component.
  * @group Components
  */
-export const RouterLink = routerAssets.RouterLink
+export const RouterLink: RouterAssets<RegisteredRouter>['RouterLink'] = routerAssets.RouterLink
 
 /**
  * A composition to access the current route or verify a specific route name within a Vue component.
@@ -147,7 +148,7 @@ export const RouterLink = routerAssets.RouterLink
  * @throws {UseRouteInvalidError} Throws an error if the provided route name is not valid or does not match the current route.
  * @group Compositions
  */
-export const useRoute = routerAssets.useRoute
+export const useRoute: RouterAssets<RegisteredRouter>['useRoute'] = routerAssets.useRoute
 
 /**
  * A composition to access the installed router instance within a Vue component.
@@ -157,15 +158,15 @@ export const useRoute = routerAssets.useRoute
  *         ensuring the component does not operate without routing functionality.
  * @group Compositions
  */
-export const useRouter = routerAssets.useRouter
+export const useRouter: RouterAssets<RegisteredRouter>['useRouter'] = routerAssets.useRouter
 
 /**
  * A composition to access a specific query value from the current route.
  *
  * @returns The query value from the router.
  * @group Compositions
  */
-export const useQueryValue = routerAssets.useQueryValue
+export const useQueryValue: RouterAssets<RegisteredRouter>['useQueryValue'] = routerAssets.useQueryValue
 
 /**
  * A composition to export much of the functionality that drives RouterLink component.
@@ -178,7 +179,7 @@ export const useQueryValue = routerAssets.useQueryValue
  * @returns {UseLink} Reactive context values for as well as navigation methods.
  * @group Compositions
  */
-export const useLink = routerAssets.useLink
+export const useLink: RouterAssets<RegisteredRouter>['useLink'] = routerAssets.useLink
 
 declare module 'vue' {
   export interface GlobalComponents {

src/services/createRouterAssets.ts

@@ -9,7 +9,7 @@ import { createUseQueryValue } from '@/compositions/useQueryValue'
 import { createUseLink } from '@/compositions/useLink'
 import { createIsRoute } from '@/guards/routes'
 
-type RouterAssets<TRouter extends Router> = {
+export type RouterAssets<TRouter extends Router> = {
   /**
    * Registers a hook that is called before a route is left. Must be called from setup.
    * This is useful for performing actions or cleanups before navigating away from a route component.