refactor: fix local playground

Author: posva

docs/guide/extending-routes.md

@@ -89,7 +89,7 @@ Note you can specify the language to use with `<route lang="yaml">`. By default,
 
 ## Extending routes at runtime
 
-As an escape-hatch, it's possible to extend the routes **at runtime** by simply changing the `routes` array before passing it to `createRouter()`. Since these changes are made at runtime, they are not reflected in the generated `typed-router.d.ts` file.
+As an escape-hatch, it's possible to extend the routes **at runtime** by simply changing or cloning the `routes` array before passing it to `createRouter()`. Since these changes are made at runtime, they are not reflected in the generated `typed-router.d.ts` file.
 
 ```js{4-9}
 import { createWebHistory, createRouter } from 'vue-router'

playground/auto-imports.d.ts

@@ -5,7 +5,8 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const defineBasicLoader: typeof import('unplugin-vue-router/data-loaders/basic')['defineBasicLoader']
+  const defineBasicLoader: typeof import('../src/data-loaders/entries/basic')['defineBasicLoader']
+  const defineColadaLoader: typeof import('../src/data-loaders/entries/pinia-colada')['defineColadaLoader']
   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const useRoute: typeof import('vue-router')['useRoute']

playground/src/main.ts

@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
 import { MutationCache, QueryCache, VueQueryPlugin } from '@tanstack/vue-query'
 import { createPinia } from 'pinia'
 import { PiniaColada } from '@pinia/colada'
 import { router } from './router'
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
 
 const app = createApp(App)
 

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { simulateError, useUserData } from '@/loaders/colada-loaders'
-import { serialize } from '@pinia/colada'
+import { serializeTreeMap } from '@pinia/colada'
 import { getActivePinia } from 'pinia'
 
 definePage({
@@ -15,7 +15,7 @@ const pinia = getActivePinia()!
 function copy() {
   console.log(
     JSON.parse(
-      JSON.stringify(serialize(pinia.state.value._pc_query.entryRegistry))
+      JSON.stringify(serializeTreeMap(pinia.state.value._pc_query.entryRegistry))
     )
   )
 }

playground/tsconfig.json

@@ -5,7 +5,8 @@
     "./src/**/*.ts",
     "./src/**/*.vue",
     "./typed-router.d.ts",
-    "./auto-imports.d.ts"
+    "./auto-imports.d.ts",
+    "../src"
   ],
   "compilerOptions": {
     "baseUrl": ".",
@@ -16,19 +17,19 @@
         "./src/*"
       ],
       "unplugin-vue-router/runtime": [
-        "../src/runtime"
+        "../src/runtime.ts"
       ],
       "unplugin-vue-router/types": [
-        "../src/types"
+        "../src/types.ts"
       ],
       "unplugin-vue-router/data-loaders": [
-        "../src/data-loaders/index"
+        "../src/data-loaders/entries/index.ts"
       ],
       "unplugin-vue-router/data-loaders/basic": [
-        "../src/data-loaders/basic"
+        "../src/data-loaders/entries/basic.ts"
       ],
       "unplugin-vue-router/data-loaders/pinia-colada": [
-        "../src/data-loaders/pinia-colada"
+        "../src/data-loaders/entries/pinia-colada.ts"
       ],
     },
   },

playground/vite.config.ts

@@ -16,6 +16,27 @@ import VueDevtools from 'vite-plugin-vue-devtools'
 
 export default defineConfig({
   clearScreen: false,
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '~': fileURLToPath(new URL('./src', import.meta.url)),
+      'unplugin-vue-router/runtime': fileURLToPath(
+        new URL('../src/runtime.ts', import.meta.url)
+      ),
+      'unplugin-vue-router/types': fileURLToPath(
+        new URL('../src/types.ts', import.meta.url)
+      ),
+      'unplugin-vue-router/data-loaders/basic': fileURLToPath(
+        new URL('../src/data-loaders/entries/basic.ts', import.meta.url)
+      ),
+      'unplugin-vue-router/data-loaders/pinia-colada': fileURLToPath(
+        new URL('../src/data-loaders/entries/pinia-colada.ts', import.meta.url)
+      ),
+      'unplugin-vue-router/data-loaders': fileURLToPath(
+        new URL('../src/data-loaders/entries/index.ts', import.meta.url)
+      ),
+    },
+  },
   build: {
     sourcemap: true,
   },
@@ -130,23 +151,18 @@ export default defineConfig({
       imports: [
         VueRouterAutoImports,
         {
-          'unplugin-vue-router/data-loaders/basic': ['defineBasicLoader'],
+          // NOTE: we need to match the resolved paths to local files for development
+          // instead of just 'unplugin-vue-router/data-loaders/basic': ['defineBasicLoader'],
+          [fileURLToPath(
+            new URL('../src/data-loaders/entries/basic.ts', import.meta.url)
+          )]: ['defineBasicLoader'],
+          // [fileURLToPath(
+          //   new URL('../src/data-loaders/entries/pinia-colada.ts', import.meta.url)
+          // )]: ['defineColadaLoader'],
         },
       ],
     }),
     VueDevtools(),
     Inspect(),
   ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '~': fileURLToPath(new URL('./src', import.meta.url)),
-      'unplugin-vue-router/runtime': fileURLToPath(
-        new URL('../src/runtime.ts', import.meta.url)
-      ),
-      'unplugin-vue-router/types': fileURLToPath(
-        new URL('../src/types.ts', import.meta.url)
-      ),
-    },
-  },
 })

src/data-loaders/defineColadaLoader.ts

@@ -14,6 +14,7 @@ import type {
   UseDataLoader,
   UseDataLoaderResult,
   _DefineLoaderEntryMap,
+  _PromiseMerged,
 } from 'unplugin-vue-router/runtime'
 import {
   ABORT_CONTROLLER_KEY,
@@ -24,7 +25,6 @@ import {
   PENDING_LOCATION_KEY,
   STAGED_NO_VALUE,
   NavigationResult,
-  type _PromiseMerged,
   assign,
   getCurrentContext,
   isSubsetOf,

src/data-loaders/defineLoader.spec.ts

@@ -3,7 +3,7 @@
  */
 import { App, defineComponent } from 'vue'
 import {
-  DefineDataLoaderOptions,
+  type DefineDataLoaderOptions,
   INITIAL_DATA_KEY,
   SERVER_INITIAL_DATA_KEY,
   defineBasicLoader,

src/data-loaders/defineLoader.test-d.ts

@@ -42,12 +42,8 @@ describe('defineBasicLoader', () => {
     expectTypeOf<Ref<UserData | undefined>>(
       defineBasicLoader(loaderUser, { lazy: true })().data
     )
-  })
-
-  it('removes undefined from non lazy loaders', () => {
-    expectTypeOf<Ref<UserData>>(defineBasicLoader(loaderUser, {})().data)
-    expectTypeOf<Ref<UserData>>(
-      defineBasicLoader(loaderUser, { lazy: false })().data
+    expectTypeOf<Ref<UserData | undefined>>(
+      defineBasicLoader(loaderUser, { lazy: () => false })().data
     )
   })
 
@@ -58,12 +54,12 @@ describe('defineBasicLoader', () => {
     expectTypeOf<Promise<UserData>>(defineBasicLoader(loaderUser, {})())
   })
 
-  expectTypeOf<{ data: Ref<UserData> }>(
+  expectTypeOf<{ data: Ref<UserData | undefined> }>(
     defineBasicLoader(loaderUser, { lazy: false })()
   )
 
   it('allows returning a Navigation Result without a type error', () => {
-    expectTypeOf<{ data: Ref<UserData> }>(
+    expectTypeOf<{ data: Ref<UserData | undefined> }>(
       defineBasicLoader(
         async () => {
           if (Math.random()) {

tsconfig.json

@@ -50,7 +50,10 @@
       ],
       "unplugin-vue-router/runtime": [
         "./src/runtime.ts"
-      ]
+      ],
+      // "unplugin-vue-router/data-loaders": [
+      //   "./src/data-loaders/entries/index.ts"
+      // ]
     },
     "types": [
       "node",