feat: volar plugins #609

Anoesj · 2025-03-19T17:32:42Z

Moved existing Volar plugin for <route> block IntelliSense into src, added it to the building process and added it to exports
- explain in the docs how users can enable the plugin (by adding it to vueCompilerOptions.plugins)
Added Volar plugin for improved useRoute and $route typings
- explain in the docs how users can enable the plugin (by adding it to vueCompilerOptions.plugins)
- add tests
- update playground examples
- use relative paths

Future

Explore other solutions for structuring types, e.g. like how they do it in SvelteKit
Explore adding enhanced typing for <RouterView> slots regarding named views

pkg-pr-new · 2025-03-19T17:33:24Z

npm i https://pkg.pr.new/unplugin-vue-router@609

commit: a5e63cb

codecov · 2025-03-19T17:34:05Z

Codecov Report

Attention: Patch coverage is 29.55665% with 143 lines in your changes missing coverage. Please review.

Project coverage is 59.85%. Comparing base (cd4a3f8) to head (a5e63cb).
Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/volar/entries/sfc-typed-router.ts	0.00%	55 Missing and 1 partial ⚠️
src/volar/entries/sfc-route-blocks.ts	0.00%	49 Missing and 1 partial ⚠️
src/volar/utils/augment-vls-ctx.ts	4.76%	20 Missing ⚠️
src/codegen/generateDTS.ts	0.00%	11 Missing ⚠️
src/core/context.ts	0.00%	4 Missing ⚠️
src/codegen/generateRouteFileInfoMap.ts	96.72%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #609      +/-   ##
==========================================
- Coverage   61.72%   59.85%   -1.87%     
==========================================
  Files          32       36       +4     
  Lines        3135     3333     +198     
  Branches      580      601      +21     
==========================================
+ Hits         1935     1995      +60     
- Misses       1194     1330     +136     
- Partials        6        8       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Anoesj · 2025-03-20T08:08:28Z

src/volar/entries/sfc-typed-router.ts

+
+      // TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?
+
+      const relativeFilePath = ctx.compilerOptions.baseUrl


Will ctx.compilerOptions.baseUrl always equal the VueRouter plugin's root? If not, this might not always work.

Good question

…olar plugin sfc-route-blocks

posva · 2025-04-24T08:49:40Z

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

@@ -0,0 +1,7 @@
+<template>
+  <RouterView name="default" />
+  <RouterView name="a" />


You are typing these too? Pretty neat! It might be worth to adapt types in vue router too first?

I think it was just an experiment, but not sure if I actually finished this. I'll check in a few days!

posva · 2025-04-24T08:59:36Z

src/volar/entries/sfc-typed-router.ts

+
+const plugin: VueLanguagePlugin = (ctx) => {
+  const RE = {
+    USE_ROUTE: {


are regexes the recommended way? Isn't there an ast to traverse instead?

If AST is truly possible, that would be better, but I noticed other Volar plugins usually use regexes too. Maybe @KazariEX could give us his two cents here :)

posva · 2025-04-24T09:00:40Z

src/volar/entries/sfc-typed-router.ts

+
+/*
+  Future ideas:
+  - Enhance typing of `useRouter().currentRoute` and `$router.currentRoute`


It's better not to because the router instance can be passed to functions and it's safer to keep that route as any route

Could you elaborate on how this is different from passing a typed useRoute() or $route to functions like composables? The function you pass it to can choose to either accept a generalize route/router, like ReturnType<typeof useRouter>/ReturnType<typeof useRoute> or make it more specific by requiring the passed router/route with a generic, like ReturnType<typeof useRoute<'blogs'>>. As far as I can remember, useRouter does not accept a generic (yet), but it could and then it should be fine, I think?

posva · 2025-04-24T09:25:46Z

src/volar/entries/sfc-typed-router.ts

+        return
+      }
+
+      // TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?


I think we only want to apply this to page components. The question might be how do we pass those paths from the config

If a file isn't matched, because it's not in the generated RouteFileInfoMap, the route is generalized, I believe. But it needs extensive testing.

posva · 2025-04-24T09:29:12Z

playground/typed-router.d.ts

+   */
+  export type GetPossibleRouteNamesByFilePath<T extends string> = T extends keyof RouteFileInfoMap
+    ? RouteFileInfoMap[T]['routes']
+    : keyof import('vue-router/auto-routes').RouteNamedMap


Why do we need the dynamic import?

I think it had something to do with interface declaration merging. Maybe test if it works without the dynamic import when you extend the RouteNamedMap elsewhere in a project.

posva · 2025-04-24T09:36:32Z

src/codegen/generateRouteFileInfoMap.spec.ts

+      "export interface RouteFileInfoMap {
+        'src/pages/index.vue': {
+          routes: '/',
+          views: never,


Shouldn't they be default in most cases?

If a route file does not have any child routes, you shouldn't be using <RouterView>, right? Or are there edge cases I'm missing here?

posva · 2025-04-25T13:15:42Z

src/codegen/generateRouteFileInfoMap.ts

+  node: TreeNode,
+  options: GenerateRouteFileInfoMapOptions
+): string {
+  const children = node.children.size > 0 ? node.getSortedChildren() : null


we should be able to update the branch and use the new deep version of this

posva · 2025-04-25T13:16:44Z

src/volar/entries/sfc-route-blocks.ts

+            replace(
+              embeddedCode.content,
+              '{',
+              '{\n  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",'


posva · 2025-04-25T13:18:47Z

src/volar/entries/sfc-typed-router.ts

+
+      // TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?
+
+      const relativeFilePath = ctx.compilerOptions.baseUrl


Good question

posva · 2025-04-25T13:19:34Z

src/volar/entries/sfc-typed-router.ts

+        ? relative(ctx.compilerOptions.baseUrl, fileName).replaceAll('\\', '/')
+        : fileName
+
+      const routeNameGetter = `import('vue-router/auto-routes').GetPossibleRouteNamesByFilePath<'${relativeFilePath}'>`


now we should be able to just pass the name of the route associated with the file

Anoesj added 4 commits March 19, 2025 18:06

feat: volar plugins (WIP)

97dea88

chore: playground remove redundant checks

c34c811

chore: add todo to volar plugin sfc-route-blocks

e454ec5

fix: use relative paths in FilePathToRouteNamesMap

102c538

posva added this to unplugin-vue-router Mar 19, 2025

github-project-automation bot moved this to 🆕 New in unplugin-vue-router Mar 19, 2025

posva moved this from 🆕 New to 📋 Backlog in unplugin-vue-router Mar 19, 2025

posva moved this from 📋 Backlog to 🏗 In progress in unplugin-vue-router Mar 19, 2025

Anoesj commented Mar 20, 2025

View reviewed changes

Anoesj and others added 13 commits March 20, 2025 12:09

chore: refactor volar plugin sfc-route-blocks and add todo

59ec2d6

chore: add future ideas comment to volar plugin sfc-typed-router

6a54cf5

feat: automatically add $schema to <route lang="json"> block in v…

79e7b4d

…olar plugin sfc-route-blocks

chore: playground remove redundant useRoute params

63827db

fix: move @vue/language-core to dependencies

df1915c

chore: adjust volar plugins build options

ed1f02e

chore: run prettier

dcf38f2

feat: generate RouteFileInfoMap for Volar plugin sfc-typed-router

66b21dd

test: add tests for generating RouteFileInfoMap

e0c116a

fix: try fix for tests

a42696e

fix: try fix for backslashes in RouteFileInfoMap on Windows

87a1855

fix: remove satisfies in template to fix playground builds

e40752d

style: fix code style

a5e63cb

posva reviewed Apr 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: volar plugins #609

feat: volar plugins #609

Anoesj commented Mar 19, 2025

pkg-pr-new bot commented Mar 19, 2025 •

edited

Loading

codecov bot commented Mar 19, 2025 •

edited

Loading

Anoesj Mar 20, 2025

posva Apr 25, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 24, 2025

Anoesj Apr 26, 2025

posva Apr 25, 2025

posva Apr 25, 2025

posva Apr 25, 2025

posva Apr 25, 2025


		// TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?

		const relativeFilePath = ctx.compilerOptions.baseUrl

feat: volar plugins #609

Are you sure you want to change the base?

feat: volar plugins #609

Conversation

Anoesj commented Mar 19, 2025

Future

pkg-pr-new bot commented Mar 19, 2025 • edited Loading

codecov bot commented Mar 19, 2025 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkg-pr-new bot commented Mar 19, 2025 •

edited

Loading

codecov bot commented Mar 19, 2025 •

edited

Loading