docs: updates to implementations

docs/rfcs/data-loaders/basic.md

@@ -1,7 +1,76 @@
 # `defineBasicLoader()`
 
+Basic data loader that always reruns on navigation.
+
+::: warning
+Data Loaders are experimental. Feedback is very welcome to shape the future of data loaders in Vue Router.
+:::
+
 ## Setup
 
 ## Example
 
+```vue
+<script lang="ts">
+import { defineBasicLoader } from 'unplugin-vue-router/runtime'
+import { getUserById } from '../api'
+
+export const useUserData = defineBasicLoader(
+  (to, { signal }) => {
+    return getUserById(to.params.id, { signal })
+  },
+  {
+    // used for SSR only
+    key: 'user-data',
+  }
+)
+</script>
+
+<script lang="ts" setup>
+const route = useRoute('/users/[id]')
+
+const {
+  user,
+  error
+  isLoading,
+  reload,
+} = useUserData()
+</script>
+
+<template>
+  <main>
+    <h1>Basic Data Loader Example</h1>
+    <pre>User: {{ route.params.id }}</pre>
+
+    <fieldset>
+      <legend>Controls</legend>
+
+      <button @click="reload()">Refetch</button>
+    </fieldset>
+
+    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 - 1 } }"
+      >Previous</RouterLink
+    >
+    |
+    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 + 1 } }"
+      >Next</RouterLink
+    >
+
+    <h2>State</h2>
+
+    <p>
+      <code>isLoading: {{ isLoading }}</code>
+    </p>
+    <pre v-if="error">Error: {{ error }}</pre>
+    <pre v-else>{{ user == null ? String(user) : user }}</pre>
+  </main>
+</template>
+```
+
 ## SSR
+
+## Nuxt
+
+## Unresolved Questions
+
+- Should this basic version also track what is used in the route object, like [Svelte Data Loaders do](https://kit.svelte.dev/docs/load#rerunning-load-functions)?

docs/rfcs/data-loaders/colada.md

@@ -4,12 +4,25 @@ Loaders that use [@pinia/colada](https://github.com/posva/pinia-colada) under th
 
 The key used in these loaders are directly passed to `useQuery()` from `@pinia/colada` and are therefore invalidated by `useMutation()` calls.
 
+::: warning
+Pinia Colada is Experimental (like data loaders). Feedback is very welcome to shape the future of data loaders in Vue Router.
+:::
+
 ## Setup
 
-Follow the instructions in [@pinia/colada](https://github.com/posva/pinia-colada).
+Follow the installation instructions in [@pinia/colada](https://github.com/posva/pinia-colada).
 
 ## Example
 
+<!--
+TODO: example with twoslash when it works
+// ---cut-start---
+import 'unplugin-vue-router/client'
+import './typed-router.d'
+// ---cut-end---
+// @moduleResolution: bundler
+ -->
+
 ```vue
 <script lang="ts">
 import { defineColadaLoader } from 'unplugin-vue-router/runtime'
@@ -72,7 +85,7 @@ const {
 ```
 
 ::: tip
-Pass a route name to `defineColadaLoader` to get typed routes in the `query` function.
+If you are using unplugin-vue-router, you can pass a route name to `defineColadaLoader` to get typed routes in the `query` function.
 
 ```ts
 export const useUserData = defineColadaLoader('/users/[id]', {
@@ -88,4 +101,10 @@ To avoid unnecessary frequent refreshes, Pinia Colada refreshes the data when na
 
 ## Route tracking
 
-The `query` function tracks what is used in the `to` parameter and will only refresh the data if **tracked** properties change. This means that if you use `to.params.id` in the `query` function, it will only refetch the data if the `id` parameter changes but not if other properties like `to.query`, `to.hash` or even `to.params.other` change.
+The `query` function tracks what is used in the `to` parameter and will only refresh the data if **tracked** properties change. This means that if you use `to.params.id` in the `query` function, it will only refetch the data if the `id` parameter changes but not if other properties like `to.query`, `to.hash` or even `to.params.other` change. To make sure the data is updated, it will still refresh in these scenarios. Configure the `staleTime` option to control how often the data should be refreshed.
+
+## SSR
+
+## Nuxt
+
+## Unresolved questions

package.json

@@ -160,7 +160,7 @@
   },
   "devDependencies": {
     "@pinia/colada": "^0.5.3",
-    "@shikijs/vitepress-twoslash": "1.1.5",
+    "@shikijs/vitepress-twoslash": "1.1.6",
     "@tanstack/vue-query": "^5.22.2",
     "@types/node": "^20.11.19",
     "@vitest/coverage-v8": "^1.3.0",
@@ -188,7 +188,7 @@
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-markdown": "^0.25.0",
     "unplugin-vue-router": "workspace:*",
-    "vite": "^5.1.3",
+    "vite": "^5.1.4",
     "vitepress": "1.0.0-rc.44",
     "vitest": "^1.3.0",
     "vue": "^3.4.19",

playground/package.json

@@ -11,7 +11,7 @@
     "@vue/tsconfig": "^0.5.1",
     "json-server": "^0.17.3",
     "unplugin-vue-router": "workspace:*",
-    "vite": "^5.1.3",
+    "vite": "^5.1.4",
     "vite-plugin-inspect": "^0.8.3",
     "vue": "^3.3.7"
   },

playground/src/pages/users/colada-loader.[id].vue

@@ -32,7 +32,7 @@ export const useUserData = defineColadaLoader('/users/colada-loader.[id]', {
     return user
   },
   key: (to) => {
-    console.log('[🍹] key', to.fullPath)
+    // console.log('[🍹] key', to.fullPath)
     return ['loader-users', to.params.id]
   },
   staleTime: 10000,