fix(experimental): reuse parent path for index routes

Author: posva

src/codegen/generateRouteResolver.spec.ts

@@ -320,6 +320,101 @@ describe('generateRouteResolver', () => {
     `)
   })
 
+  it('reuses parent path matcher when possible', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    const importsMap = new ImportsMap()
+    tree.insert('a', 'a.vue')
+    tree.insert('a/index', 'a/index.vue')
+    tree.insert('a/about', 'a/about.vue')
+
+    // with a param
+    tree.insert('p/[id]', 'p/[id].vue')
+    tree.insert('p/[id]/index', 'p/[id]/index.vue')
+    tree.insert('p/[id]/details', 'p/[id]/details.vue')
+
+    const resolver = generateRouteResolver(
+      tree,
+      DEFAULT_OPTIONS,
+      importsMap,
+      new Map()
+    )
+
+    expect(resolver).toMatchInlineSnapshot(`
+      "
+      const __route_0 = normalizeRouteRecord({
+        name: '/a',
+        path: new MatcherPatternPathStatic('/a'),
+        components: {
+          'default': () => import('a.vue')
+        },
+      })
+      const __route_1 = normalizeRouteRecord({
+        name: '/a/',
+        path: __route_0.path,
+        components: {
+          'default': () => import('a/index.vue')
+        },
+        parent: __route_0,
+      })
+      const __route_2 = normalizeRouteRecord({
+        name: '/a/about',
+        path: new MatcherPatternPathStatic('/a/about'),
+        components: {
+          'default': () => import('a/about.vue')
+        },
+        parent: __route_0,
+      })
+
+      const __route_3 = normalizeRouteRecord({
+        name: '/p/[id]',
+        path: new MatcherPatternPathDynamic(
+          /^\\/p\\/([^/]+?)$/i,
+          {
+            id: [/* no parser */],
+          },
+          ["p",1],
+          /* trailingSlash */
+        ),
+        components: {
+          'default': () => import('p/[id].vue')
+        },
+      })
+      const __route_4 = normalizeRouteRecord({
+        name: '/p/[id]/',
+        path: __route_3.path,
+        components: {
+          'default': () => import('p/[id]/index.vue')
+        },
+        parent: __route_3,
+      })
+      const __route_5 = normalizeRouteRecord({
+        name: '/p/[id]/details',
+        path: new MatcherPatternPathDynamic(
+          /^\\/p\\/([^/]+?)\\/details$/i,
+          {
+            id: [/* no parser */],
+          },
+          ["p",1,"details"],
+          /* trailingSlash */
+        ),
+        components: {
+          'default': () => import('p/[id]/details.vue')
+        },
+        parent: __route_3,
+      })
+
+      export const resolver = createFixedResolver([
+        __route_1,  // /a
+        __route_2,  // /a/about
+        __route_4,  // /p/:id
+        __route_5,  // /p/:id/details
+        __route_3,  // /p/:id
+        __route_0,  // /a
+      ])
+      "
+    `)
+  })
+
   it('generates correct nested layouts', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     const importsMap = new ImportsMap()
@@ -354,7 +449,7 @@ describe('generateRouteResolver', () => {
       })
       const __route_1 = normalizeRouteRecord({
         name: '/a/(a-home)',
-        path: new MatcherPatternPathStatic('/a'),
+        path: __route_0.path,
         components: {
           'default': () => import('a/(a-home).vue')
         },
@@ -370,7 +465,7 @@ describe('generateRouteResolver', () => {
       })
       const __route_3 = normalizeRouteRecord({
         name: '/a/b/(b-home)',
-        path: new MatcherPatternPathStatic('/a/b'),
+        path: __route_2.path,
         components: {
           'default': () => import('a/b/(b-home).vue')
         },

src/codegen/generateRouteResolver.ts

@@ -177,7 +177,7 @@ export function generateRouteRecord({
     })
     const routeRecordObject = `{
   ${recordName}
-  ${generateRouteRecordPath({ node, importsMap, paramParsersMap })}${
+  ${generateRouteRecordPath({ node, importsMap, paramParsersMap, parentVar })}${
     queryProperty ? `\n  ${queryProperty}` : ''
   }${formatMeta(node, '  ')}
   ${recordComponents}${parentVar ? `\n  parent: ${parentVar},` : ''}
@@ -248,14 +248,25 @@ export function generateRouteRecordPath({
   node,
   importsMap,
   paramParsersMap,
+  parentVar,
 }: {
   node: TreeNode
   importsMap: ImportsMap
   paramParsersMap: ParamParsersMap
+  parentVar?: string | null | undefined
 }) {
   if (!node.isMatchable()) {
     return ''
   }
+
+  // reuse the parent path matcher if it's exactly the same
+  // this allows defining index pages and letting the router
+  // recognize them by just checking the recorde.path === record.parent.path
+  // it's used for active route matching
+  if (parentVar && node.regexp === node.parent?.regexp) {
+    return `path: ${parentVar}.path,`
+  }
+
   const params = node.pathParams
   if (params.length > 0) {
     return `path: new MatcherPatternPathDynamic(

src/core/tree.ts

@@ -9,6 +9,7 @@ import {
 import type { TreeNodeValue } from './treeNodeValue'
 import { CustomRouteBlock } from './customBlock'
 import { RouteMeta } from 'vue-router'
+import { ESCAPED_TRAILING_SLASH_RE } from './utils'
 
 export interface TreeNodeOptions extends ResolvedOptions {
   treeNodeOptions?: TreeNodeValueOptions
@@ -365,13 +366,13 @@ export class TreeNode {
       }
     }
 
-    // TODO: trailingSlash
     return (
       '/^' +
       // Avoid adding a leading slash if the first segment
       // is an optional segment that already includes it
       (re.startsWith('(?:\\/') ? '' : '\\/') +
-      re +
+      // TODO: trailingSlash
+      re.replace(ESCAPED_TRAILING_SLASH_RE, '') +
       '$/i'
     )
   }

src/core/utils.ts

@@ -106,8 +106,9 @@ export function throttle(fn: () => void, wait: number, initialWait: number) {
   }
 }
 
-const LEADING_SLASH_RE = /^\//
-const TRAILING_SLASH_RE = /\/$/
+export const LEADING_SLASH_RE = /^\//
+export const TRAILING_SLASH_RE = /\/$/
+export const ESCAPED_TRAILING_SLASH_RE = /\\\/$/
 export function joinPath(...paths: string[]): string {
   let result = ''
   for (const path of paths) {