feat(extendRoutes): allow relative path overrides

src/core/context.ts

@@ -1,7 +1,7 @@
 import { ResolvedOptions } from '../options'
 import { TreeNode, PrefixTree } from './tree'
 import { promises as fs } from 'fs'
-import { asRoutePath, ImportsMap, logTree, throttle } from './utils'
+import { asRoutePath, ImportsMap, joinPath, logTree, throttle } from './utils'
 import { generateRouteNamedMap } from '../codegen/generateRouteMap'
 import { MODULE_ROUTES_PATH, MODULE_VUE_ROUTER_AUTO } from './moduleConstants'
 import { generateRouteRecord } from '../codegen/generateRouteRecords'
@@ -114,10 +114,26 @@ export function createRoutesContext(options: ResolvedOptions) {
     const routeBlock = getRouteBlock(filePath, content, options)
     // TODO: should warn if hasDefinePage and customRouteBlock
     // if (routeBlock) logger.log(routeBlock)
-    node.setCustomRouteBlock(filePath, {
+
+    const routeOverrides = {
       ...routeBlock,
       ...definedPageNameAndPath,
-    })
+    }
+
+    if (routeOverrides.path != null && !routeOverrides.path.startsWith('/')) {
+      let parent = node.parent
+
+      while (parent && !parent.value.components.size) {
+        parent = parent.parent
+      }
+
+      routeOverrides.path = joinPath(
+        parent?.value.path || '',
+        routeOverrides.path
+      )
+    }
+
+    node.setCustomRouteBlock(filePath, routeOverrides)
   }
 
   async function addPage(

src/core/customBlock.ts

@@ -13,18 +13,7 @@ export function getRouteBlock(
   const parsedSFC = parse(content, { pad: 'space' }).descriptor
   const blockStr = parsedSFC?.customBlocks.find((b) => b.type === 'route')
 
-  if (!blockStr) return
-
-  let result = parseCustomBlock(blockStr, path, options)
-
-  // validation
-  if (result) {
-    if (result.path != null && !result.path.startsWith('/')) {
-      warn(`Overridden path must start with "/". Found in "${path}".`)
-    }
-  }
-
-  return result
+  if (blockStr) return parseCustomBlock(blockStr, path, options)
 }
 
 export interface CustomRouteBlock

src/core/extendRoutes.spec.ts

@@ -251,4 +251,23 @@ describe('EditableTreeNode', () => {
       },
     ])
   })
+
+  it('can override the path', () => {
+    const tree = new PrefixTree(RESOLVED_OPTIONS)
+    const editable = new EditableTreeNode(tree)
+    const parent = editable.insert('parent', 'file.vue')
+    const child = parent.insert('child', 'file.vue')
+    const grandChild = child.insert('grandchild', 'file.vue')
+
+    child.path = 'relative'
+    parent.path = 'relative'
+    expect(parent.path).toBe('/parent')
+    expect(child.path).toBe('relative')
+    expect(child.fullPath).toBe('/parent/relative')
+    expect(grandChild.fullPath).toBe('/parent/relative/grandchild')
+    child.path = '/absolute'
+    expect(child.path).toBe('/absolute')
+    expect(child.fullPath).toBe('/absolute')
+    expect(grandChild.fullPath).toBe('/absolute/grandchild')
+  })
 })

src/core/extendRoutes.ts

@@ -142,9 +142,12 @@ export class EditableTreeNode {
    * Override the path of the route. You must ensure `params` match with the existing path.
    */
   set path(path: string) {
-    if (!path.startsWith('/')) {
+    if (
+      (!this.node.parent || this.node.parent.isRoot()) &&
+      !path.startsWith('/')
+    ) {
       warn(
-        `Only absolute paths are supported. Make sure that "${path}" starts with a slash "/".`
+        `Only absolute paths are supported at the root of the route tree. Make sure that "${path}" starts with a slash "/".`
       )
       return
     }

src/core/tree.ts

@@ -195,7 +195,7 @@ export class TreeNode {
    * Returns the route path of the node including parent paths.
    */
   get fullPath() {
-    return this.value.overrides.path ?? this.value.path
+    return this.value.path
   }
 
   /**

src/core/treeNodeValue.ts

@@ -70,9 +70,14 @@ class _TreeNodeValueBase {
    * fullPath of the node based on parent nodes
    */
   get path(): string {
-    const parentPath = this.parent?.path
+    if (this.overrides.path?.startsWith('/')) {
+      return this.overrides.path
+    }
+
     // both the root record and the index record have a path of /
     const pathSegment = this.overrides.path ?? this.pathSegment
+    const parentPath = this.parent?.path
+
     return (!parentPath || parentPath === '/') && pathSegment === ''
       ? '/'
       : joinPath(parentPath || '', pathSegment)