fix: proper scoring

Author: posva

src/codegen/generateRouteResolver.spec.ts

@@ -57,7 +57,7 @@ describe('generateRouteRecordPath', () => {
       generateRouteRecordPath({ importsMap, node, paramParsersMap: new Map() })
     ).toMatchInlineSnapshot(`
       "path: new MatcherPatternPathCustomParams(
-          /^\\/a\\/([^/]+)$/i,
+          /^\\/a\\/([^/]+?)$/i,
           {
             b: {},
           },
@@ -76,7 +76,7 @@ describe('generateRouteRecordPath', () => {
       })
     ).toMatchInlineSnapshot(`
       "path: new MatcherPatternPathCustomParams(
-          /^\\/a\\/([^/]+)\\/([^/]+)$/i,
+          /^\\/a\\/([^/]+?)\\/([^/]+?)$/i,
           {
             b: {},
             c: {},
@@ -92,7 +92,7 @@ describe('generateRouteRecordPath', () => {
       generateRouteRecordPath({ importsMap, node, paramParsersMap: new Map() })
     ).toMatchInlineSnapshot(`
       "path: new MatcherPatternPathCustomParams(
-          /^\\/a\\/([^/]+)?$/i,
+          /^\\/a\\/([^/]+?)?$/i,
           {
             b: {},
           },
@@ -140,7 +140,7 @@ describe('generateRouteRecordPath', () => {
       generateRouteRecordPath({ importsMap, node, paramParsersMap: new Map() })
     ).toMatchInlineSnapshot(`
       "path: new MatcherPatternPathCustomParams(
-          /^\\/a\\/a-([^/]+)-c-([^/]+)$/i,
+          /^\\/a\\/a-([^/]+?)-c-([^/]+?)$/i,
           {
             b: {},
             d: {},
@@ -253,10 +253,10 @@ describe('generateRouteResolver', () => {
       })
 
       export const resolver = createStaticResolver([
-        r_0,  // /a
-        r_2,  // /b/c
         r_3,  // /b/c/d
         r_5,  // /b/e/f
+        r_2,  // /b/c
+        r_0,  // /a
       ])
       "
     `)
@@ -285,22 +285,140 @@ describe('generateRouteResolver', () => {
 
     expect(resolver.replace(/^.*?createStaticResolver/s, ''))
       .toMatchInlineSnapshot(`
-      "([
-        r_1,   // /a
-        r_11,  // /b/a-b
-        r_7,   // /b/a-:a
-        r_8,   // /b/a-:a?
-        r_10,  // /b/a-:a+
-        r_9,   // /b/a-:a*
-        r_3,   // /b/:a
-        r_4,   // /b/:a?
-        r_6,   // /b/:a+
-        r_5,   // /b/:a*
-        r_0,   // /:all(.*)
-      ])
-      "
-    `)
+        "([
+          r_11,  // /b/a-b
+          r_7,   // /b/a-:a
+          r_3,   // /b/:a
+          r_8,   // /b/a-:a?
+          r_4,   // /b/:a?
+          r_10,  // /b/a-:a+
+          r_6,   // /b/:a+
+          r_9,   // /b/a-:a*
+          r_5,   // /b/:a*
+          r_1,   // /a
+          r_0,   // /:all(.*)
+        ])
+        "
+      `)
   })
 
   it.todo('strips off empty parent records')
 })
+
+describe('route prioritization in resolver', () => {
+  function getRouteOrderFromResolver(tree: PrefixTree): string[] {
+    const resolver = generateRouteResolver(
+      tree,
+      DEFAULT_OPTIONS,
+      new ImportsMap(),
+      new Map()
+    )
+
+    // Extract the order from the resolver output
+    const lines = resolver.split('\n').filter((line) => line.includes('// /'))
+    return lines.map((line) => line.split('// ')[1] || '')
+  }
+
+  it('prioritizes routes correctly in resolver output', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+
+    // Create routes with different specificity levels
+    tree.insert('static', 'static.vue')
+    tree.insert('[id]', '[id].vue')
+    tree.insert('[[optional]]', '[[optional]].vue')
+    tree.insert('prefix-[id]-suffix', 'prefix-[id]-suffix.vue')
+    tree.insert('[...all]', '[...all].vue')
+
+    // Routes should be ordered from most specific to least specific
+    expect(getRouteOrderFromResolver(tree)).toEqual([
+      '/static', // static routes first
+      '/prefix-:id-suffix', // mixed routes with static content
+      '/:id', // pure parameter routes
+      '/:optional?', // optional parameter routes
+      '/:all(.*)', // catch-all routes last
+    ])
+  })
+
+  it('handles nested route prioritization correctly', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+
+    // Create nested routes with different patterns
+    tree.insert('api/users', 'api/users.vue')
+    tree.insert('api/[resource]', 'api/[resource].vue')
+    tree.insert('prefix-[param]/static', 'prefix-[param]/static.vue')
+    tree.insert('[dynamic]/static', '[dynamic]/static.vue')
+    tree.insert('[x]/[y]', '[x]/[y].vue')
+
+    // Routes with more static content should come first
+    expect(getRouteOrderFromResolver(tree)).toEqual([
+      '/api/users', // all static segments
+      '/api/:resource', // static root, param child
+      '/prefix-:param/static', // mixed root, static child
+      '/:dynamic/static', // param root, static child
+      '/:x/:y', // all param segments
+    ])
+  })
+
+  it('orders complex mixed routes appropriately', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+
+    // Create routes with various subsegment complexity
+    tree.insert('users', 'users.vue') // pure static
+    tree.insert('prefix-[id]', 'prefix-[id].vue') // prefix + param
+    tree.insert('[id]-suffix', '[id]-suffix.vue') // param + suffix
+    tree.insert('pre-[a]-mid-[b]-end', 'complex.vue') // complex mixed
+    tree.insert('[a]-[b]', '[a]-[b].vue') // params with separator
+    tree.insert('[param]', '[param].vue') // pure param
+
+    expect(getRouteOrderFromResolver(tree)).toEqual([
+      '/users', // pure static wins
+      '/pre-:a-mid-:b-end', // most static content in mixed
+      '/:id-suffix', // static suffix
+      '/prefix-:id', // static prefix
+      '/:a-:b', // params with static separator
+      '/:param', // pure param last
+    ])
+  })
+
+  it('handles optional and repeatable params in nested contexts', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+
+    // Create nested routes with optional and repeatable params
+    tree.insert('api/static', 'api/static.vue')
+    tree.insert('api/[[optional]]', 'api/[[optional]].vue')
+    tree.insert('api/[required]', 'api/[required].vue')
+    tree.insert('api/[repeatable]+', 'api/[repeatable]+.vue')
+    tree.insert('api/[[optional]]+', 'api/[[optional]]+.vue')
+    tree.insert('api/[...catchall]', 'api/[...catchall].vue')
+
+    expect(getRouteOrderFromResolver(tree)).toEqual([
+      '/api/static', // static segment wins
+      '/api/:required', // required param
+      '/api/:optional?', // optional param
+      '/api/:repeatable+', // repeatable param
+      '/api/:optional*', // optional repeatable param
+      '/api/:catchall(.*)', // catch-all last
+    ])
+  })
+
+  it('handles complex subsegments in deeply nested routes', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+
+    // Create deeply nested routes with complex subsegment patterns
+    tree.insert('api/v1/users', 'api/v1/users.vue')
+    tree.insert('api/v1/user-[id]', 'api/v1/user-[id].vue')
+    tree.insert('api/v1/[type]/list', 'api/v1/[type]/list.vue')
+    tree.insert('api/v1/[type]/[id]', 'api/v1/[type]/[id].vue')
+    tree.insert('api/v1/prefix-[a]-mid-[b]', 'api/v1/prefix-[a]-mid-[b].vue')
+    tree.insert('api/v1/[x]-[y]-[z]', 'api/v1/[x]-[y]-[z].vue')
+
+    expect(getRouteOrderFromResolver(tree)).toEqual([
+      '/api/v1/users', // all static segments
+      '/api/v1/user-:id', // mixed with static prefix
+      '/api/v1/prefix-:a-mid-:b', // complex mixed pattern
+      '/api/v1/:x-:y-:z', // multiple params with separators (mixed subsegments rank higher)
+      '/api/v1/:type/list', // param + static child
+      '/api/v1/:type/:id', // all param segments
+    ])
+  })
+})

src/codegen/generateRouteResolver.ts

@@ -5,12 +5,56 @@ import { ts } from '../utils'
 import { generateParamsOptions, ParamParsersMap } from './generateParamParsers'
 import { generatePageImport } from './generateRouteRecords'
 
+/**
+ * Compare two score arrays for sorting routes by priority.
+ * Higher scores should come first (more specific routes).
+ */
+function compareRouteScore(a: number[][], b: number[][]): number {
+  const maxLength = Math.max(a.length, b.length)
+
+  for (let i = 0; i < maxLength; i++) {
+    const aSegment = a[i] || []
+    const bSegment = b[i] || []
+
+    // Compare segment by segment, but consider the "minimum" score of each segment
+    // since mixed segments with params should rank lower than pure static
+    const aMinScore = aSegment.length > 0 ? Math.min(...aSegment) : 0
+    const bMinScore = bSegment.length > 0 ? Math.min(...bSegment) : 0
+
+    if (aMinScore !== bMinScore) {
+      return bMinScore - aMinScore // Higher minimum score wins
+    }
+
+    // If minimum scores are equal, compare average scores
+    const aAvgScore =
+      aSegment.length > 0
+        ? aSegment.reduce((sum, s) => sum + s, 0) / aSegment.length
+        : 0
+    const bAvgScore =
+      bSegment.length > 0
+        ? bSegment.reduce((sum, s) => sum + s, 0) / bSegment.length
+        : 0
+
+    if (aAvgScore !== bAvgScore) {
+      return bAvgScore - aAvgScore // Higher average score wins
+    }
+
+    // If averages are equal, prefer fewer subsegments (less complexity)
+    if (aSegment.length !== bSegment.length) {
+      return aSegment.length - bSegment.length
+    }
+  }
+
+  // If all segments are equal, prefer fewer segments (shorter paths)
+  return a.length - b.length
+}
+
 interface GenerateRouteResolverState {
   id: number
   matchableRecords: {
     path: string
     varName: string
-    score: number
+    score: number[][]
   }[]
 }
 
@@ -43,7 +87,7 @@ ${records.join('\n\n')}
 
 export const resolver = createStaticResolver([
 ${state.matchableRecords
-  .sort((a, b) => b.score - a.score)
+  .sort((a, b) => compareRouteScore(a.score, b.score))
   .map(
     ({ varName, path }) =>
       `  ${varName},  ${' '.repeat(String(state.id).length - varName.length + 2)}// ${path}`

src/core/tree.ts

@@ -300,16 +300,16 @@ export class TreeNode {
     return '/^' + re + '$/i'
   }
 
-  get score(): number {
-    let score = 666
+  get score(): number[][] {
+    const scores: number[][] = []
     let node: TreeNode | undefined = this
 
     while (node && !node.isRoot()) {
-      score = Math.min(score, node.value.score)
+      scores.unshift(node.value.score)
       node = node.parent
     }
 
-    return score
+    return scores
   }
 
   get matcherParams() {

src/core/treeNodeValue.ts

@@ -195,7 +195,7 @@ class _TreeNodeValueBase {
 export class TreeNodeValueStatic extends _TreeNodeValueBase {
   override _type: TreeNodeType.static = TreeNodeType.static
 
-  readonly score = 300
+  readonly score = [300]
 
   constructor(
     rawSegment: string,
@@ -210,7 +210,7 @@ export class TreeNodeValueGroup extends _TreeNodeValueBase {
   override _type: TreeNodeType.group = TreeNodeType.group
   groupName: string
 
-  readonly score = 300
+  readonly score = [300]
 
   constructor(
     rawSegment: string,
@@ -253,23 +253,21 @@ export class TreeNodeValueParam extends _TreeNodeValueBase {
     this.params = params
   }
 
-  // FIXME: implement scoring from vue-router
-  get score(): number {
-    const malus = Math.max(
-      ...this.params.map((p) =>
-        p.isSplat ? 500 : (p.optional ? 10 : 0) + (p.repeatable ? 20 : 0)
-      )
-    )
+  // Calculate score for each subsegment to handle mixed static/param parts
+  get score(): number[] {
+    return this.subSegments.map((segment) => {
+      if (typeof segment === 'string') {
+        // Static subsegment gets highest score
+        return 300
+      } else {
+        // Parameter subsegment - calculate malus based on param properties
+        const malus = segment.isSplat
+          ? 500
+          : (segment.optional ? 10 : 0) + (segment.repeatable ? 20 : 0)
 
-    return (
-      80 -
-      malus +
-      (this.params.length > 0 &&
-      this.subSegments.length > 1 &&
-      this.subSegments.some((s) => typeof s === 'string' && s.length > 0)
-        ? 35
-        : 0)
-    )
+        return 80 - malus
+      }
+    })
   }
 
   get re(): string {

vitest.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vitest/config'
 import Vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'url'
 
-const __dirname = new URL('.', import.meta.url).pathname
 export default defineConfig({
   resolve: {
     alias: [
@@ -20,6 +19,7 @@ export default defineConfig({
       },
     ],
   },
+
   plugins: [Vue()],
 
   test: {