feat: allow removing a route from types

Author: posva

playground/src/pages/articles.vue

@@ -33,6 +33,11 @@ if (routeHasParam(route, 'id')) {
   route.name satisfies '/articles/[id]' | '/articles/[id]+'
   route.params.id satisfies string | [string, ...string[]]
 }
+
+definePage({
+  // remove the name to avoid the page appearing in types
+  name: false,
+})
 </script>
 
 <template>

playground/typed-router.d.ts

@@ -29,7 +29,6 @@ declare module 'vue-router/auto-routes' {
     '/@[profileId]': RouteRecordInfo<'/@[profileId]', '/@:profileId', { profileId: ParamValue<true> }, { profileId: ParamValue<false> }>,
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/about.extra.nested': RouteRecordInfo<'/about.extra.nested', '/about/extra/nested', Record<never, never>, Record<never, never>>,
-    '/articles': RouteRecordInfo<'/articles', '/articles', Record<never, never>, Record<never, never>, '/articles/' | '/articles/[id]' | '/articles/[id]+'>,
     '/articles/': RouteRecordInfo<'/articles/', '/articles', Record<never, never>, Record<never, never>>,
     '/articles/[id]': RouteRecordInfo<'/articles/[id]', '/articles/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/articles/[id]+': RouteRecordInfo<'/articles/[id]+', '/articles/:id+', { id: ParamValueOneOrMore<true> }, { id: ParamValueOneOrMore<false> }>,
@@ -145,7 +144,7 @@ declare module 'vue-router/auto-routes' {
       views: never
     }
     'src/pages/articles.vue': {
-      routes: '/articles' | '/articles/' | '/articles/[id]' | '/articles/[id]+'
+      routes: '/articles/' | '/articles/[id]' | '/articles/[id]+'
       views: 'default'
     }
     'src/pages/articles/index.vue': {

src/codegen/generateRouteFileInfoMap.ts

@@ -76,7 +76,7 @@ function generateRouteFileInfoLines(
 
   const routeNames = [node, ...node.getChildrenDeepSorted()]
     // an unnamed route cannot be accessed in types
-    .filter((node) => node.name)
+    .filter((node): node is TreeNode & { name: string } => !!node.name)
     .map((node) => node.name)
 
   // Most of the time we only have one view, but with named views we can have multiple.

src/core/customBlock.ts

@@ -23,7 +23,7 @@ export interface CustomRouteBlock
       'components' | 'component' | 'children' | 'beforeEnter' | 'name'
     >
   > {
-  name?: string | undefined
+  name?: string | undefined | false
 }
 
 function parseCustomBlock(

src/core/definePage.ts

@@ -189,7 +189,7 @@ export function definePageTransform({
 export function extractDefinePageNameAndPath(
   sfcCode: string,
   id: string
-): { name?: string; path?: string } | null | undefined {
+): { name?: string | false; path?: string } | null | undefined {
   if (!sfcCode.includes(MACRO_DEFINE_PAGE)) return
 
   const { ast, definePageNodes } = getCodeAst(sfcCode, id)
@@ -221,10 +221,14 @@ export function extractDefinePageNameAndPath(
   for (const prop of routeRecord.properties) {
     if (prop.type === 'ObjectProperty' && prop.key.type === 'Identifier') {
       if (prop.key.name === 'name') {
-        if (prop.value.type !== 'StringLiteral') {
-          warn(`route name must be a string literal. Found in "${id}".`)
+        if (
+          prop.value.type !== 'StringLiteral' &&
+          (prop.value.type !== 'BooleanLiteral' || prop.value.value !== false)
+        ) {
+          warn(`route name must be a string literal or false. Found in "${id}".`)
         } else {
-          routeInfo.name = prop.value.value
+          // TODO: why does TS not narrow down the type?
+          routeInfo.name = (prop.value.value as string | false)
         }
       } else if (prop.key.name === 'path') {
         if (prop.value.type !== 'StringLiteral') {

src/core/extendRoutes.ts

@@ -85,7 +85,7 @@ export class EditableTreeNode {
    * nothing.
    * @see {@link isPassThrough}
    */
-  get name(): string {
+  get name(): string | false {
     return this.node.name
   }
 

src/core/tree.ts

@@ -239,9 +239,9 @@ export class TreeNode {
     const overrideName = this.value.overrides.name
     // allows passing a null or empty name so the route is not named
     // and isn't listed in the route map
-    return overrideName !== undefined
-      ? overrideName
-      : this.options.getRouteName(this)
+    return overrideName === undefined
+      ? this.options.getRouteName(this)
+      : overrideName
   }
 
   /**

src/core/treeNodeValue.ts

@@ -10,7 +10,7 @@ export const enum TreeNodeType {
 
 export interface RouteRecordOverride
   extends Partial<Pick<RouteRecordRaw, 'meta' | 'props' | 'alias' | 'path'>> {
-  name?: string | undefined
+  name?: string | undefined | false
 }
 
 export type SubSegment = string | TreeRouteParam

src/runtime.ts

@@ -51,5 +51,11 @@ export function _mergeRouteRecord(
  */
 export interface DefinePage
   extends Partial<
-    Omit<RouteRecordRaw, 'children' | 'components' | 'component'>
-  > {}
+    Omit<RouteRecordRaw, 'children' | 'components' | 'component' | 'name'>
+  > {
+  /**
+   * A route name. If not provided, the name will be generated based on the file path.
+   * Can be set to `false` to remove the name from types.
+   */
+  name?: string | false
+}