feat: automatically type useRoute() with a volar plugin (#609)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <[email protected]>

Author: 3 people

package.json

@@ -77,6 +77,12 @@
       "import": "./dist/data-loaders/pinia-colada.js",
       "require": "./dist/data-loaders/pinia-colada.cjs"
     },
+    "./volar/sfc-route-blocks": {
+      "require": "./dist/volar/sfc-route-blocks.cjs"
+    },
+    "./volar/sfc-typed-router": {
+      "require": "./dist/volar/sfc-typed-router.cjs"
+    },
     "./client": {
       "types": "./client.d.ts"
     }
@@ -134,13 +140,15 @@
   },
   "dependencies": {
     "@vue-macros/common": "3.0.0-beta.15",
+    "@vue/language-core": "^3.0.1",
     "ast-walker-scope": "^0.8.1",
     "chokidar": "^4.0.3",
     "fast-glob": "^3.3.3",
     "json5": "^2.2.3",
     "local-pkg": "^1.1.1",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
+    "muggle-string": "^0.4.1",
     "pathe": "^2.0.3",
     "picomatch": "^4.0.2",
     "scule": "^1.3.0",
@@ -197,7 +205,7 @@
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
     "vue-router-mock": "^1.1.0",
-    "vue-tsc": "^2.2.10",
+    "vue-tsc": "^3.0.1",
     "vuefire": "^3.2.1",
     "webpack": "^5.99.9",
     "yorkie": "^2.0.0"

playground/src/components/TestSetup.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { onBeforeRouteLeave } from 'vue-router'
+import { onBeforeRouteLeave, type RouteMap } from 'vue-router'
+
+const route = useRoute()
+
+route.name satisfies keyof RouteMap
 
 onBeforeRouteLeave((to) => {
   if (to.name === '/[name]') {

playground/src/pages/@[profileId].vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Alias } from 'vite'
-const route = useRoute('/@[profileId]')
+const route = useRoute()
 
 const route2 = definePage<{ thing: string; alias: Alias }>({
   meta: {

playground/src/pages/[...path]+.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
 
-const route = useRoute('/[...path]+')
+const route = useRoute()
 </script>
 
 <template>
@@ -11,7 +11,7 @@ const route = useRoute('/[...path]+')
   </main>
 </template>
 
-<route>
+<route lang="json">
 {
   "props": true
 }

playground/src/pages/[...path].vue

@@ -1,13 +1,11 @@
 <template>
   <main>
     <h1>Not Found</h1>
-    <p>
-      {{ $route.name === '/[...path]' && $route.params.path }} does not exist.
-    </p>
+    <p>{{ $route.params.path }} does not exist.</p>
   </main>
 </template>
 
-<route>
+<route lang="json">
 {
   "props": true
 }

playground/src/pages/[name].vue

@@ -49,6 +49,7 @@ import {
   onBeforeRouteUpdate,
   type RouteLocationNormalized,
 } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 const thing = 'THING'
 
@@ -90,8 +91,8 @@ if (routeLocation.name === '/[name]') {
   routeLocation.params.id
 }
 
-const route = useRoute('/[name]')
-const anyRoute = useRoute()
+const route = useRoute()
+const anyRoute = useRoute<keyof RouteNamedMap>()
 if (anyRoute.name == '/articles/[id]') {
   console.log('anyRoute.params', anyRoute.params.id)
 }
@@ -133,7 +134,7 @@ definePage({
 
 <template>
   <main>
-    <h1>Param: {{ $route.name === '/[name]' && $route.params.name }}</h1>
+    <h1>Param: {{ $route.params.name }}</h1>
     <h2>Param: {{ route.params.name }}</h2>
     <p v-show="false">{{ thing }}</p>
     <p v-if="isLoading">Loading user...</p>

playground/src/pages/articles.vue

@@ -1,4 +1,39 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+const route = useRoute()
+route.name
+
+// NOTE: I wonder if this helper is worth exposing in vue router
+function routeHasParam<
+  Route extends RouteLocationNormalizedLoaded,
+  Param extends keyof Exclude<Route['params'], Record<PropertyKey, never>>,
+>(
+  route: Route,
+  key: Param
+): route is Exclude<Route, { params: Record<PropertyKey, never> }> & {
+  params: Record<Param, unknown>
+} {
+  return key in route.params
+}
+
+if ('id' in route.params) {
+  // @ts-expect-error: TS limitation?
+  route.name satisfies '/articles/[id]' | '/articles/[id]+'
+  route.params.id satisfies string | [string, ...string[]]
+}
+
+if (route.name !== '/articles' && route.name !== '/articles/') {
+  route.name satisfies '/articles/[id]' | '/articles/[id]+'
+  route.params.id satisfies string | [string, ...string[]]
+}
+
+if (routeHasParam(route, 'id')) {
+  route.name
+  route.name satisfies '/articles/[id]' | '/articles/[id]+'
+  route.params.id satisfies string | [string, ...string[]]
+}
+</script>
 
 <template>
   <h1>Articles</h1>

playground/src/pages/custom-name-and-path.vue

@@ -1,6 +1,5 @@
 <route lang="json">
 {
-  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",
   "name": "the most rebel",
   "path": "/most-rebel",
   "props": true
@@ -10,3 +9,7 @@
 <!-- For some reason, a local link doesn't work... -->
 
 <template>custom names</template>
+
+<script setup lang="ts">
+useRoute().name satisfies 'the most rebel'
+</script>

playground/src/pages/deep/nesting/works/custom-name-and-path.vue

@@ -1,6 +1,5 @@
 <route lang="json">
 {
-  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",
   "name": "deep the most rebel",
   "path": "/deep-most-rebel"
 }

playground/src/pages/named-views/parent.vue

@@ -0,0 +1,7 @@
+<template>
+  <RouterView name="default" />
+  <RouterView name="a" />
+  <RouterView name="b" />
+  <!-- @vue-expect-error TODO: -->
+  <RouterView name="c" />
+</template>