Merge remote-tracking branch 'origin/main'

docs/.vitepress/config.ts

@@ -46,6 +46,7 @@ export default defineConfig({
             { text: 'Routes', link: '/core-concepts/routes' },
             { text: 'External Routes', link: '/core-concepts/external-routes' },
             { text: 'Params', link: '/core-concepts/params' },
+            { text: 'Props', link: '/core-concepts/component-props' },
             { text: 'Router', link: '/core-concepts/router' },
             { text: 'Router Route', link: '/core-concepts/router-route' },
             { text: 'Navigation', link: '/core-concepts/navigation' },

docs/advanced-concepts/prefetching.md

@@ -20,15 +20,14 @@ const user = createRoute({
 
 When your route uses the [props callback](/core-concepts/component-props), Kitbag Router can start fetching your component props before they are needed.
 
-```ts
+```ts {5-9}
 const user = createRoute({
   name: 'user',
   path: '/user/[id]',
   component: defineAsyncComponent(() => import('./UserPage.vue')),
-  props: async (({ id }) => { // [!code focus]
-    const user = await userStore.getById(id) // [!code focus]
-    return { user } // [!code focus]
-  }) // [!code focus]
+}, async (({ id }) => {
+  const user = await userStore.getById(id)
+  return { user }
 })
 ```
 

docs/core-concepts/component-props.md

@@ -2,15 +2,12 @@
 
 With Kitbag Router, you can define a `props` callback on your route. Your callback is given the [`ResolvedRoute`](/api/types/ResolvedRoute) for the route and what it returns will be bound to the component when the component gets mounted inside the `<router-view />`
 
-```ts
+```ts {5}
 const user = createRoute({
   name: 'user',
   path: '/user/[id]',
   component: UserComponent,
-  props: (route) => {
-    return { userId: route.params.id }
-  }
-})
+}, (route) => ({ userId: route.params.id }))
 ```
 
 This is obviously useful for assigning static values or route params down to your view components props but it also gives you
@@ -31,16 +28,15 @@ Your callback will throw a Typescript error if it returns anything other than th
 
 The props call back supports promises. This means you can do much more than just forward values from params or insert static values. For example, we can take an id route param and fetch the `User` before mounting the component.
 
-```ts
+```ts {5-9}
 const user = createRoute({
   name: 'user',
   path: '/user/[id]',
   component: UserComponent,
-  props: async (route) => {
-    const user = await userStore.getById(route.params.id)
+}, async (route) => {
+  const user = await userStore.getById(route.params.id)
 
-    return { user }
-  })
+  return { user }
 })
 ```
 
@@ -63,14 +59,13 @@ const user = createRoute({
   name: 'user',
   path: '/user/[id]',
   component: UserComponent,
-  props: async (route, { reject }) => {
-    try {
-      const user = await userStore.getById(route.params.id)
-
-      return { user }
-    } catch (error) {
-      reject('NotFound')
-    }
-  })
-})
+}, async (route, { reject }) => {
+  try {
+    const user = await userStore.getById(route.params.id)
+
+    return { user }
+  } catch (error) {
+    reject('NotFound')
+  }
+}))
 ```

docs/core-concepts/routes.md

@@ -110,17 +110,14 @@ const home = createRoute({
 
 The `props` property is used to define props for route components. It must be a callback function that returns an object. Everything returned from the callback will be bound to the component.
 
-```ts {7-9}
+```ts {7}
 import HomeView from './components/HomeView.vue'
 
 const home = createRoute({
   name: 'home',
   path: '/',
   component: HomeView,
-  props: () => ({
-    userId: 1,
-  }),
-})
+}, () => ({ userId: 1 }))
 ```
 
 ### Arguments