Merge pull request #421 from kitbagjs/create-route-type-refactor

Move `props` option to second arg of `createRoute` utility

src/components/routerLink.browser.spec.ts

@@ -560,8 +560,7 @@ describe('prefetch props', () => {
       name: 'route',
       path: '/route',
       component: echo,
-      props: callback,
-    })
+    }, callback)
 
     const router = createRouter([route], {
       initialUrl: '/',
@@ -604,8 +603,7 @@ describe('prefetch props', () => {
       path: '/route',
       component: echo,
       prefetch,
-      props: callback,
-    })
+    }, callback)
 
     const router = createRouter([route], {
       initialUrl: '/',
@@ -646,8 +644,7 @@ describe('prefetch props', () => {
       name: 'route',
       path: '/route',
       component: echo,
-      props: callback,
-    })
+    }, callback)
 
     const router = createRouter([route], {
       initialUrl: '/',
@@ -690,8 +687,7 @@ describe('prefetch props', () => {
       path: '/echo',
       component: echo,
       prefetch: { props: 'eager' },
-      props,
-    })
+    }, props)
 
     const router = createRouter([home, route], {
       initialUrl: '/',
@@ -735,17 +731,15 @@ describe('prefetch props', () => {
       path: '/parent',
       component: echo,
       prefetch: { props: false },
-      props: parentProps,
-    })
+    }, parentProps)
 
     const child = createRoute({
       parent,
       name: 'child',
       path: '/child',
       component: echo,
       prefetch: { props: 'eager' },
-      props: childProps,
-    })
+    }, childProps)
 
     const router = createRouter([home, child], {
       initialUrl: '/',
@@ -781,8 +775,7 @@ describe('prefetch props', () => {
       path: '/routeB',
       component: echo,
       prefetch: { props: 'lazy' },
-      props: callback,
-    })
+    }, callback)
 
     const router = createRouter([routeA, routeB], {
       initialUrl: '/routeA',
@@ -889,8 +882,7 @@ describe('prefetch props', () => {
       path: '/routeB',
       component: echo,
       prefetch: { props: 'intent' },
-      props: callback,
-    })
+    }, callback)
 
     const router = createRouter([routeA, routeB], {
       initialUrl: '/routeA',

src/components/routerView.browser.spec.ts

@@ -294,17 +294,13 @@ test('Binds props and attrs from route', async () => {
     name: 'routeA',
     path: '/routeA/[param]',
     component: echo,
-    props: (route) => ({ value: route.params.param }),
-  })
+  }, (route) => ({ value: route.params.param }))
 
   const routeB = createRoute({
     name: 'routeB',
     path: '/routeB/[param]',
     component: echo,
-    props: (route) => {
-      return { value: route.params.param }
-    },
-  })
+  }, (route) => ({ value: route.params.param }))
 
   const router = createRouter([routeA, routeB], {
     initialUrl: '/',
@@ -336,17 +332,13 @@ test('Updates props and attrs when route params change', async () => {
     name: 'sync',
     path: '/sync/[param]',
     component: echo,
-    props: (route) => ({ value: route.params.param }),
-  })
+  }, (route) => ({ value: route.params.param }))
 
   const asyncProps = createRoute({
     name: 'async',
     path: '/async/[param]',
     component: echo,
-    props: async (route) => {
-      return { value: route.params.param }
-    },
-  })
+  }, async (route) => ({ value: route.params.param }))
 
   const router = createRouter([syncProps, asyncProps], {
     initialUrl: '/',
@@ -390,19 +382,17 @@ test('Props from route can trigger push', async () => {
     name: 'routeA',
     path: '/routeA',
     component: echo,
-    props: (__, context) => {
-      throw context.push('routeB')
-    },
+  }, (__, context) => {
+    throw context.push('routeB')
   })
 
   const routeB = createRoute({
     name: 'routeB',
     path: '/routeB',
     component: echo,
-    props: () => ({
-      value: 'routeB',
-    }),
-  })
+  }, () => ({
+    value: 'routeB',
+  }))
 
   const router = createRouter([routeA, routeB], {
     initialUrl: '/',
@@ -432,9 +422,8 @@ test('Props from route can trigger reject', async () => {
     name: 'routeA',
     path: '/routeA',
     component: echo,
-    props: (__, context) => {
-      throw context.reject('NotFound')
-    },
+  }, (__, context) => {
+    throw context.reject('NotFound')
   })
 
   const router = createRouter([routeA], {
@@ -472,19 +461,17 @@ test('prefetched props trigger push when navigation is initiated', async () => {
     path: '/routeB',
     component: echo,
     prefetch: { props: true },
-    props: (__, { push }) => {
-      throw push('routeC')
-    },
+  }, (__, { push }) => {
+    throw push('routeC')
   })
 
   const routeC = createRoute({
     name: 'routeC',
     path: '/routeC',
     component: echo,
-    props: () => ({
-      value: 'routeC',
-    }),
-  })
+  }, () => ({
+    value: 'routeC',
+  }))
 
   const router = createRouter([routeA, routeB, routeC], {
     initialUrl: '/routeA',
@@ -523,19 +510,17 @@ test('prefetched async props trigger push when navigation is initiated', async (
     path: '/routeB',
     component,
     prefetch: { props: true },
-    props: async (__, { push }) => {
-      throw push('routeC')
-    },
+  }, (__, { push }) => {
+    throw push('routeC')
   })
 
   const routeC = createRoute({
     name: 'routeC',
     path: '/routeC',
     component: echo,
-    props: () => ({
-      value: 'routeC',
-    }),
-  })
+  }, () => ({
+    value: 'routeC',
+  }))
 
   const router = createRouter([routeA, routeB, routeC], {
     initialUrl: '/routeA',

src/services/component.ts

@@ -11,7 +11,7 @@ export type ComponentProps<TComponent extends Component> = TComponent extends Co
     ? ComponentProps<T>
     : TComponent extends FunctionalComponent<infer T>
       ? T
-      : never
+      : {}
 
 type ComponentPropsGetter<TComponent extends Component> = () => MaybePromise<ComponentProps<TComponent>>
 

src/services/createPropStore.ts

@@ -1,17 +1,16 @@
 import { InjectionKey, reactive } from 'vue'
-import { isWithComponent, isWithComponents } from '@/types/createRouteOptions'
+import { isWithComponentProps, isWithComponentPropsRecord, PropsGetter } from '@/types/createRouteOptions'
 import { getPrefetchOption, PrefetchConfigs, PrefetchStrategy } from '@/types/prefetch'
 import { ResolvedRoute } from '@/types/resolved'
 import { Route } from '@/types/route'
 import { CallbackPushResponse, CallbackRejectResponse, CallbackSuccessResponse, createCallbackContext } from './createCallbackContext'
 import { CallbackContextPushError } from '@/errors/callbackContextPushError'
 import { CallbackContextRejectionError } from '@/errors/callbackContextRejectionError'
 import { getPropsValue } from '@/utilities/props'
-import { PropsCallbackContext } from '@/types/props'
 
 export const propStoreKey: InjectionKey<PropStore> = Symbol()
 
-type ComponentProps = { id: string, name: string, props?: (params: ResolvedRoute, context: PropsCallbackContext) => unknown }
+type ComponentProps = { id: string, name: string, props?: PropsGetter }
 
 type SetPropsResponse = CallbackSuccessResponse | CallbackPushResponse | CallbackRejectResponse
 
@@ -117,11 +116,7 @@ export function createPropStore(): PropStore {
   }
 
   function getComponentProps(options: Route['matched']): ComponentProps[] {
-    if (isWithComponents(options)) {
-      return Object.entries(options.props ?? {}).map(([name, props]) => ({ id: options.id, name, props }))
-    }
-
-    if (isWithComponent(options)) {
+    if (isWithComponentProps(options)) {
       return [
         {
           id: options.id,
@@ -131,6 +126,10 @@ export function createPropStore(): PropStore {
       ]
     }
 
+    if (isWithComponentPropsRecord(options)) {
+      return Object.entries(options.props).map(([name, props]) => ({ id: options.id, name, props }))
+    }
+
     return []
   }