refactored route matching to include new logic for matching query

src/components/routerLink.browser.spec.ts

@@ -6,7 +6,7 @@ import { Route } from '@/types'
 import { component, createRouter } from '@/utilities'
 
 test('renders an anchor tag with the correct href and slot content', () => {
-  const path = 'path/:param'
+  const path = '/path/:param'
   const param = 'param'
   const content = 'hello world'
   const href = path.replace(':param', param)

src/components/routerView.browser.spec.ts

@@ -32,18 +32,18 @@ test('renders component for initial route', () => {
 test('renders components for initial route', () => {
   const childRoute = {
     name: 'child',
-    path: 'child',
+    path: '/child',
     component: { template: 'Child' },
   } as const satisfies Route
 
   const parentRoute = {
     name: 'parent',
-    path: '',
+    path: '/parent',
     children: [childRoute],
   } as const satisfies Route
 
   const router = createRouter([parentRoute], {
-    initialUrl: childRoute.path,
+    initialUrl: '/parent/child',
   })
 
   const root = {
@@ -62,19 +62,19 @@ test('renders components for initial route', () => {
 test('updates components when route changes', async () => {
   const childA = {
     name: 'childA',
-    path: 'childA',
+    path: '/childA',
     component: { template: 'ChildA' },
   } as const satisfies Route
 
   const childB = {
     name: 'childB',
-    path: 'childB',
+    path: '/childB',
     component: { template: 'ChildB' },
   } as const satisfies Route
 
   const childC = {
     name: 'childC',
-    path: 'childC',
+    path: '/childC',
     component: { template: 'ChildC' },
   } as const satisfies Route
 

src/types/index.ts

@@ -4,6 +4,7 @@ export * from './middleware'
 export * from './params'
 export * from './register'
 export * from './resolved'
+export * from './routeMatchRule'
 export * from './routeMethod'
 export * from './routeMethods'
 export * from './router'

src/types/routeMatchRule.ts

@@ -0,0 +1,4 @@
+import { Resolved } from '@/types/resolved'
+import { Route } from '@/types/routes'
+
+export type RouteMatchRule = (route: Resolved<Route>, url: string) => boolean

src/utilities/createRouter.ts

@@ -1,13 +1,12 @@
 import { reactive, readonly, App, InjectionKey } from 'vue'
 import { RouterLink, RouterView } from '@/components'
 import { Resolved, Route, Routes, Router, RouterOptions, RouterPushOptions, RegisteredRouter, RouterReplaceOptions, RouterPush } from '@/types'
-import { createRouteMethods, createRouterNavigation, resolveRoutes, routeMatch, getInitialUrl, resolveRoutesRegex, assembleUrl, flattenParentMatches } from '@/utilities'
+import { createRouteMethods, createRouterNavigation, resolveRoutes, routeMatch, getInitialUrl, assembleUrl, flattenParentMatches } from '@/utilities'
 
 export const routerInjectionKey: InjectionKey<RegisteredRouter> = Symbol()
 
 export function createRouter<T extends Routes>(routes: T, options: RouterOptions = {}): Router<T> {
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
   const navigation = createRouterNavigation({
     onLocationUpdate,
   })
@@ -27,7 +26,7 @@ export function createRouter<T extends Routes>(routes: T, options: RouterOptions
   }
 
   function getRoute(url: string): Resolved<Route> {
-    const route = routeMatch(resolvedWithRegex, url)
+    const route = routeMatch(resolved, url)
 
     if (!route) {
       // not found

src/utilities/index.ts

@@ -11,11 +11,12 @@ export * from './paramsFinder'
 export * from './path'
 export * from './query'
 export * from './resolveRoutes'
-export * from './resolveRoutesRegex'
 export * from './routeMatch'
+export * from './routeMatchRegexRules'
 export * from './routeRegex'
 export * from './routerNavigation'
 export * from './string'
 export * from './testHelpers'
 export * from './updateBrowserUrl'
 export * from './urlAssembly'
+export * from './urlSplitter'

src/utilities/paramValidation.spec.ts

@@ -11,7 +11,7 @@ test('given route WITHOUT params, always return true', () => {
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/no-params', resolved)
+  const response = routeParamsAreValid(resolved, '/no-params')
 
   expect(response).toBe(true)
 })
@@ -24,7 +24,7 @@ test('given route with simple string param and value present, returns true', ()
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/simple/ABC', resolved)
+  const response = routeParamsAreValid(resolved, '/simple/ABC')
 
   expect(response).toBe(true)
 })
@@ -37,7 +37,7 @@ test('given route with OPTIONAL string param WITHOUT value present, returns true
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/simple/', resolved)
+  const response = routeParamsAreValid(resolved, '/simple/')
 
   expect(response).toBe(true)
 })
@@ -52,7 +52,7 @@ test('given route with non-string param with value that satisfies, returns true'
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/simple/123', resolved)
+  const response = routeParamsAreValid(resolved, '/simple/123')
 
   expect(response).toBe(true)
 })
@@ -67,7 +67,7 @@ test('given route with non-string param with value that does NOT satisfy, return
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/simple/fail', resolved)
+  const response = routeParamsAreValid(resolved, '/simple/fail')
 
   expect(response).toBe(false)
 })
@@ -82,7 +82,7 @@ test('given route with OPTIONAL non-string param with value that does NOT satisf
   }
   const [resolved] = resolveRoutes([route])
 
-  const response = routeParamsAreValid('/simple/fail', resolved)
+  const response = routeParamsAreValid(resolved, '/simple/fail')
 
   expect(response).toBe(false)
 })

src/utilities/paramValidation.ts

@@ -1,7 +1,7 @@
-import { Param, Resolved, Route } from '@/types'
+import { Param, RouteMatchRule } from '@/types'
 import { getParamValue, getParamValuesFromUrl } from '@/utilities'
 
-export function routeParamsAreValid(url: string, route: Resolved<Route>): boolean {
+export const routeParamsAreValid: RouteMatchRule = (route, url) => {
   const params = Object.entries<Param[]>(route.params)
 
   for (const [key, paramsTuple] of params) {

src/utilities/routeMatch.spec.ts

@@ -1,7 +1,6 @@
 import { expect, test } from 'vitest'
 import { Routes } from '@/types'
 import { resolveRoutes } from '@/utilities/resolveRoutes'
-import { resolveRoutesRegex } from '@/utilities/resolveRoutesRegex'
 import { routeMatch } from '@/utilities/routeMatch'
 import { component } from '@/utilities/testHelpers'
 
@@ -27,8 +26,7 @@ test('given path WITHOUT params, returns match', () => {
   ] as const satisfies Routes
 
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
-  const match = routeMatch(resolvedWithRegex, '/parent/child/grandchild')
+  const match = routeMatch(resolved, '/parent/child/grandchild')
 
   expect(match?.name).toBe('grandchild')
 })
@@ -54,8 +52,7 @@ test('given path to unnamed parent, without option to get to leaf, returns undef
   ] as const satisfies Routes
 
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
-  const match = routeMatch(resolvedWithRegex, '/unnamed')
+  const match = routeMatch(resolved, '/unnamed')
 
   expect(match).toBeUndefined()
 })
@@ -75,8 +72,7 @@ test('given path to unnamed  parent, with option to get to leaf, returns availab
   ] as const satisfies Routes
 
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
-  const match = routeMatch(resolvedWithRegex, '/unnamed')
+  const match = routeMatch(resolved, '/unnamed')
 
   expect(match?.name).toBe('unnamed-child-root')
 })
@@ -103,8 +99,7 @@ test('given path that includes named parent and path to leaf, return first match
   ] as const satisfies Routes
 
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
-  const match = routeMatch(resolvedWithRegex, '/named-parent')
+  const match = routeMatch(resolved, '/named-parent')
 
   expect(match?.name).toBe('namedGrandchild')
 })
@@ -119,8 +114,23 @@ test('given route with simple string param WITHOUT value present, returns undefi
   ]
 
   const resolved = resolveRoutes(routes)
-  const resolvedWithRegex = resolveRoutesRegex(resolved)
-  const response = routeMatch(resolvedWithRegex, '/simple/')
+  const response = routeMatch(resolved, '/simple/')
+
+  expect(response).toBeUndefined()
+})
+
+test.skip('given route with simple string query param WITHOUT value present, returns undefined', () => {
+  const routes: Routes = [
+    {
+      name: 'simple-params',
+      path: '',
+      query: 'simple=:simple',
+      component,
+    },
+  ]
+
+  const resolved = resolveRoutes(routes)
+  const response = routeMatch(resolved, 'irrelevant?missing=params')
 
   expect(response).toBeUndefined()
 })

src/utilities/routeMatch.ts

@@ -1,12 +1,10 @@
 import { Route } from '@/types'
 import { Resolved } from '@/types/resolved'
 import { routeParamsAreValid } from '@/utilities/paramValidation'
-import { ResolvedWithRegex } from '@/utilities/resolveRoutesRegex'
+import { routePathMatches, routeQueryMatches } from '@/utilities/routeMatchRegexRules'
 
-export function routeMatch(routes: ResolvedWithRegex[], path: string): Resolved<Route> | undefined {
-  const { route } = routes.find(({ regexp, route }) => {
-    return regexp.test(path) && routeParamsAreValid(path, route)
-  }) ?? {}
+export function routeMatch(routes: Resolved<Route>[], url: string): Resolved<Route> | undefined {
+  const rules = [routePathMatches, routeQueryMatches, routeParamsAreValid]
 
-  return route
+  return routes.find(route => rules.every(test => test(route, url)))
 }