From 365e6e6ea7ac77b1015ac37ff0c736857165d44e Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 9 Aug 2023 13:45:53 +0200
Subject: [PATCH] chore: testing in playground

---
 playground/src/pages/[name].vue | 58 +++++++++++++++++++++------------
 playground/vite.config.ts       |  3 ++
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/playground/src/pages/[name].vue b/playground/src/pages/[name].vue
index bce5e284f..2cf04800d 100644
--- a/playground/src/pages/[name].vue
+++ b/playground/src/pages/[name].vue
@@ -1,32 +1,43 @@
 <script lang="ts">
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-export const useUserData = defineLoader('/[name]', async (route) => {
-  await delay(1000)
-  if (route.name === '/[name]') {
-    route.params
-  }
-  const user = {
-    name: route.params.name || 'Edu',
-    // @ts-expect-error: no id param!
-    id: route.params.id || 24,
-    when: new Date().toUTCString(),
-  }
-  return user
-})
+export const useUserData = defineLoader(
+  '/[name]',
+  async (route) => {
+    await delay(1000)
+    if (route.name === '/[name]') {
+      route.params
+    }
+    const user = {
+      name: route.params.name || 'Edu',
+      // @ts-expect-error: no id param!
+      id: route.params.id || 24,
+      when: new Date().toUTCString(),
+    }
+    return user
+  },
+  { key: 'user' }
+)
 
 const other = 'hello'
 
-const useOne = defineLoader(async (route) => {
-  if (route.name === '/[name]') {
-    route.params.name
-  }
-
-  return { one: 'one' }
-})
+const useOne = defineLoader(
+  async (route) => {
+    const user = await useUserData()
+    if (route.name === '/[name]') {
+      route.params.name
+    }
+
+    return {
+      one: 'one',
+      user: user.name,
+    }
+  },
+  { key: 'one' }
+)
 const useTwo = defineLoader(async () => ({ two: 'two' }), { lazy: true })
 
-export { useOne, other }
+export { useOne, other, useTwo }
 export default {}
 </script>
 
@@ -111,6 +122,11 @@ definePage({
     <p v-show="false">{{ thing }}</p>
     <p v-if="pending">Loading user...</p>
     <pre v-else>{{ user }}</pre>
+
+    <p>one:</p>
+    <pre>{{ one }}</pre>
+    <p>two</p>
+    <pre>{{ two }}</pre>
   </main>
 </template>
 
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 5726fee3d..7a4ea23e1 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -124,6 +124,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      'unplugin-vue-router/runtime': fileURLToPath(
+        new URL('../src/runtime.ts', import.meta.url)
+      ),
     },
   },
 })