feat: allow post-processing generated DTS file

[Anoesj]

This adds a postProcessDTS option, which is a sync or async function that receives the generated DTS file's contents and lets that function return a modified string. This allows frameworks to add info of their own on the type-level in the generated DTS file.

An example of how this may be used:

• A framework, such as Nuxt, passes routesFolder: [] and uses beforeWriteFiles to provide their own route tree.
• If the framework wants to store more info about that generated tree in a DTS file, they can now append this info to the generated DTS file. That info might for example contain a Record of file paths mapped to their corresponding route names.

I included an E2E test that tests this functionality. I couldn't figure out whether the E2E tests are actually ran in the CI though? They don't seem to be ran when running pnpm test. However, I did run the test manually and it did succeed.

[pkg-pr-new]

Open in Stackblitz

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

commit: 1297a75

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.

Project coverage is 61.66%. Comparing base (70e454d) to head (1297a75).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/core/context.ts	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #601      +/-   ##
==========================================
- Coverage   61.72%   61.66%   -0.06%     
==========================================
  Files          32       32              
  Lines        3135     3138       +3     
  Branches      580      580              
==========================================
  Hits         1935     1935              
- Misses       1194     1197       +3     
  Partials        6        6              

☔ 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.

[posva]

Thanks! Ideally, editing the tree would be a preferred approach. Do you have any specific use case that requires this approach? It seems a bit like an escape hatch

[Anoesj]

Thanks! Ideally, editing the tree would be a preferred approach. Do you have any specific use case that requires this approach? It seems a bit like an escape hatch

I get that, and we should probably include a warning that this is not meant for altering the generated output. The idea here is that a framework may want to append something to the generated file, such as this potential Nuxt example:

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
// It's recommended to commit this file.
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.

declare module 'vue-router/auto-routes' {
  import type {
    RouteRecordInfo,
    ParamValue,
    ParamValueOneOrMore,
    ParamValueZeroOrMore,
    ParamValueZeroOrOne,
  } from 'vue-router'

  /**
   * Route name map generated by unplugin-vue-router
   */
  export interface RouteNamedMap {
    'index': RouteRecordInfo<'index', '/', Record<never, never>, Record<never, never>>,
    'topics-id': RouteRecordInfo<'topics-id', '/topics/:id()', { id: ParamValue<true> }, { id: ParamValue<false> }>,
    'topics-id-view': RouteRecordInfo<'topics-id-view', '/topics/:id()/whatever/view', { id: ParamValue<true> }, { id: ParamValue<false> }>,
  }
}

declare module '#app' {
  export interface RouteFilePathNameMap {
    '/app/pages/index.vue': 'index',
    '/app/pages/topics/[id].vue': 'topics-id',
    '/app/pages/topics/[id]/view.vue': 'topics-id-view',
  }
}

Another idea might be to add a afterWriteFiles hook instead with the PrefixTree passed as an argument, so a framework can write a file of its own right after unplugin-vue-router has written the typed router DTS file.
Never mind, frameworks can just write their own file after await scanPages(false)

[posva]

That part can be added to a different dts. I think that makes more sense

[Anoesj]

Fair enough! So just write the separate DTS file after await scanPages(false) in that framework's codebase, right?

[posva]

Yes, that sounds right