Skip to content

Commit a7943c6

Browse files
posvaposva
committed
feat: add dynamic routing at router level
1 parent cc45057 commit a7943c6

File tree

8 files changed

+253
-12
lines changed

8 files changed

+253
-12
lines changed

‎__tests__/router.spec.ts

+117
Original file line numberDiff line numberDiff line change
@@ -333,4 +333,121 @@ describe('Router', () => {
333333
})
334334

335335
// it('redirects with route record redirect')
336+
337+
describe('Dynamic Routing', () => {
338+
it('resolves new added routes', async () => {
339+
const { router } = await newRouter()
340+
expect(router.resolve('/new-route')).toMatchObject({
341+
name: undefined,
342+
matched: [],
343+
})
344+
router.addRoute({
345+
path: '/new-route',
346+
component: components.Foo,
347+
name: 'new route',
348+
})
349+
expect(router.resolve('/new-route')).toMatchObject({
350+
name: 'new route',
351+
})
352+
})
353+
354+
it('can redirect to children in the middle of navigation', async () => {
355+
const { router } = await newRouter()
356+
expect(router.resolve('/new-route')).toMatchObject({
357+
name: undefined,
358+
matched: [],
359+
})
360+
let removeRoute: (() => void) | undefined
361+
router.addRoute({
362+
path: '/dynamic',
363+
component: components.Nested,
364+
name: 'dynamic parent',
365+
options: { end: false, strict: true },
366+
beforeEnter(to, from, next) {
367+
if (!removeRoute) {
368+
removeRoute = router.addRoute('dynamic parent', {
369+
path: 'child',
370+
name: 'dynamic child',
371+
component: components.Foo,
372+
})
373+
next(to.fullPath)
374+
} else next()
375+
},
376+
})
377+
378+
router.push('/dynamic/child').catch(() => {})
379+
await tick()
380+
expect(router.currentRoute.value).toMatchObject({
381+
name: 'dynamic child',
382+
})
383+
})
384+
385+
it('can reroute when adding a new route', async () => {
386+
const { router } = await newRouter()
387+
await router.push('/p/p')
388+
expect(router.currentRoute.value).toMatchObject({
389+
name: 'Param',
390+
})
391+
router.addRoute({
392+
path: '/p/p',
393+
component: components.Foo,
394+
name: 'pp',
395+
})
396+
await router.replace(router.currentRoute.value.fullPath)
397+
expect(router.currentRoute.value).toMatchObject({
398+
name: 'pp',
399+
})
400+
})
401+
402+
it('stops resolving removed routes', async () => {
403+
const { router } = await newRouter()
404+
// regular route
405+
router.removeRoute('Foo')
406+
expect(router.resolve('/foo')).toMatchObject({
407+
name: undefined,
408+
matched: [],
409+
})
410+
// dynamic route
411+
const removeRoute = router.addRoute({
412+
path: '/new-route',
413+
component: components.Foo,
414+
name: 'new route',
415+
})
416+
removeRoute()
417+
expect(router.resolve('/new-route')).toMatchObject({
418+
name: undefined,
419+
matched: [],
420+
})
421+
})
422+
423+
it('can reroute when removing route', async () => {
424+
const { router } = await newRouter()
425+
router.addRoute({
426+
path: '/p/p',
427+
component: components.Foo,
428+
name: 'pp',
429+
})
430+
await router.push('/p/p')
431+
router.removeRoute('pp')
432+
await router.replace(router.currentRoute.value.fullPath)
433+
expect(router.currentRoute.value).toMatchObject({
434+
name: 'Param',
435+
})
436+
})
437+
438+
it('can reroute when removing route through returned function', async () => {
439+
const { router } = await newRouter()
440+
const remove = router.addRoute({
441+
path: '/p/p',
442+
component: components.Foo,
443+
name: 'pp',
444+
})
445+
await router.push('/p/p')
446+
remove()
447+
await router.push('/p/p')
448+
expect(router.currentRoute.value).toMatchObject({
449+
name: 'Param',
450+
})
451+
})
452+
})
336453
})

‎playground/router.ts

+17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createRouter, createWebHistory } from '../src'
22
import Home from './views/Home.vue'
33
import Nested from './views/Nested.vue'
4+
import Dynamic from './views/Dynamic.vue'
45
import User from './views/User.vue'
56
import NotFound from './views/NotFound.vue'
67
import component from './views/Generic.vue'
@@ -9,6 +10,7 @@ import GuardedWithLeave from './views/GuardedWithLeave.vue'
910
import ComponentWithData from './views/ComponentWithData.vue'
1011
import { globalState } from './store'
1112
import { scrollWaiter } from './scrollWaiter'
13+
let removeRoute: (() => void) | undefined
1214

1315
// const hist = new HTML5History()
1416
// const hist = new HashHistory()
@@ -57,6 +59,21 @@ export const router = createRouter({
5759
},
5860
],
5961
},
62+
{
63+
path: '/dynamic',
64+
name: 'dynamic',
65+
component: Nested,
66+
options: { end: false, strict: true },
67+
beforeEnter(to, from, next) {
68+
if (!removeRoute) {
69+
removeRoute = router.addRoute('dynamic', {
70+
path: 'child',
71+
component: Dynamic,
72+
})
73+
next(to.fullPath)
74+
} else next()
75+
},
76+
},
6077
],
6178
async scrollBehavior(to, from, savedPosition) {
6279
await scrollWaiter.wait()

‎playground/views/Dynamic.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>This was added dynamically</div>
3+
</template>
4+
5+
<script>
6+
import { defineComponent } from 'vue'
7+
8+
export default defineComponent({
9+
name: 'Dynamic',
10+
})
11+
</script>

‎src/matcher/index.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ interface RouterMatcher {
2222
(matcher: RouteRecordMatcher): void
2323
(name: Required<RouteRecord>['name']): void
2424
}
25-
// TODO:
26-
// getRoutes: () => RouteRecordMatcher[]
25+
getRoutes: () => RouteRecordMatcher[]
2726
getRecordMatcher: (
2827
name: Required<RouteRecord>['name']
2928
) => RouteRecordMatcher | undefined
@@ -45,6 +44,7 @@ export function createRouterMatcher(
4544
return matcherMap.get(name)
4645
}
4746

47+
// TODO: add routes to children of parent
4848
function addRoute(
4949
record: Readonly<RouteRecord>,
5050
parent?: RouteRecordMatcher
@@ -116,6 +116,10 @@ export function createRouterMatcher(
116116
}
117117
}
118118

119+
function getRoutes() {
120+
return matchers
121+
}
122+
119123
function insertMatcher(matcher: RouteRecordMatcher) {
120124
let i = 0
121125
// console.log('i is', { i })
@@ -199,7 +203,7 @@ export function createRouterMatcher(
199203
// add initial routes
200204
routes.forEach(route => addRoute(route))
201205

202-
return { addRoute, resolve, removeRoute, getRecordMatcher }
206+
return { addRoute, resolve, removeRoute, getRoutes, getRecordMatcher }
203207
}
204208

205209
/**

‎src/matcher/path-parser-ranker.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export function tokensToParser(
179179
}
180180

181181
// only apply the strict bonus to the last score
182-
if (options.strict) {
182+
if (options.strict && options.end) {
183183
const i = score.length - 1
184184
score[i][score[i].length - 1] += PathScore.BonusStrict
185185
}
@@ -188,6 +188,8 @@ export function tokensToParser(
188188
if (!options.strict) pattern += '/?'
189189

190190
if (options.end) pattern += '$'
191+
// allow paths like /dynamic to only match dynamic or dynamic/... but not dynamic_somethingelse
192+
else if (options.strict) pattern += '(?:/|$)'
191193

192194
const re = new RegExp(pattern, options.sensitive ? '' : 'i')
193195

‎src/router.ts

+90-7
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,13 @@ import {
2929
} from './utils'
3030
import { useCallbacks } from './utils/callbacks'
3131
import { encodeParam, decode } from './utils/encoding'
32-
import { normalizeQuery, parseQuery, stringifyQuery } from './utils/query'
33-
import { ref, Ref, markNonReactive, nextTick, App } from 'vue'
32+
import {
33+
normalizeQuery,
34+
parseQuery,
35+
stringifyQuery,
36+
LocationQueryValue,
37+
} from './utils/query'
38+
import { ref, Ref, markNonReactive, nextTick, App, warn } from 'vue'
3439
import { RouteRecordNormalized } from './matcher/types'
3540
import { Link } from './components/Link'
3641
import { View } from './components/View'
@@ -58,6 +63,11 @@ export interface Router {
5863
history: RouterHistory
5964
currentRoute: Ref<Immutable<RouteLocationNormalized>>
6065

66+
addRoute(parentName: string, route: RouteRecord): () => void
67+
addRoute(route: RouteRecord): () => void
68+
removeRoute(name: string): void
69+
getRoutes(): RouteRecordNormalized[]
70+
6171
resolve(to: RouteLocation): RouteLocationNormalized
6272
createHref(to: RouteLocationNormalized): string
6373
push(to: RouteLocation): Promise<RouteLocationNormalized>
@@ -100,6 +110,33 @@ export function createRouter({
100110
const encodeParams = applyToParams.bind(null, encodeParam)
101111
const decodeParams = applyToParams.bind(null, decode)
102112

113+
function addRoute(parentOrRoute: string | RouteRecord, route?: RouteRecord) {
114+
let parent: Parameters<typeof matcher['addRoute']>[1] | undefined
115+
let record: RouteRecord
116+
if (typeof parentOrRoute === 'string') {
117+
parent = matcher.getRecordMatcher(parentOrRoute)
118+
record = route!
119+
} else {
120+
record = parentOrRoute
121+
}
122+
123+
return matcher.addRoute(record, parent)
124+
}
125+
126+
function removeRoute(name: string) {
127+
let recordMatcher = matcher.getRecordMatcher(name)
128+
if (recordMatcher) {
129+
matcher.removeRoute(recordMatcher)
130+
} else if (__DEV__) {
131+
// TODO: adapt if we allow Symbol as a name
132+
warn(`Cannot remove non-existant route "${name}"`)
133+
}
134+
}
135+
136+
function getRoutes(): RouteRecordNormalized[] {
137+
return matcher.getRoutes().map(routeMatcher => routeMatcher.record)
138+
}
139+
103140
function resolve(
104141
location: RouteLocation,
105142
currentLocation?: RouteLocationNormalized
@@ -161,14 +198,12 @@ export function createRouter({
161198
): Promise<RouteLocationNormalized> {
162199
const toLocation: RouteLocationNormalized = (pendingLocation = resolve(to))
163200
const from: RouteLocationNormalized = currentRoute.value
201+
// @ts-ignore: no need to check the string as force do not exist on a string
202+
const force: boolean | undefined = to.force
164203

165204
// TODO: should we throw an error as the navigation was aborted
166205
// TODO: needs a proper check because order in query could be different
167-
if (
168-
from !== START_LOCATION_NORMALIZED &&
169-
from.fullPath === toLocation.fullPath
170-
)
171-
return from
206+
if (!force && isSameLocation(from, toLocation)) return from
172207

173208
toLocation.redirectedFrom = redirectedFrom
174209

@@ -427,12 +462,19 @@ export function createRouter({
427462

428463
const router: Router = {
429464
currentRoute,
465+
466+
addRoute,
467+
removeRoute,
468+
getRoutes,
469+
430470
push,
431471
replace,
432472
resolve,
473+
433474
beforeEach: beforeGuards.add,
434475
afterEach: afterGuards.add,
435476
createHref,
477+
436478
onError: errorHandlers.add,
437479
isReady,
438480

@@ -497,3 +539,44 @@ function extractChangingRecords(
497539

498540
return [leavingRecords, updatingRecords, enteringRecords]
499541
}
542+
543+
function isSameLocation(
544+
a: RouteLocationNormalized,
545+
b: RouteLocationNormalized
546+
): boolean {
547+
return (
548+
a.name === b.name &&
549+
a.path === b.path &&
550+
a.hash === b.hash &&
551+
isSameLocationQuery(a.query, b.query)
552+
)
553+
}
554+
555+
function isSameLocationQuery(
556+
a: RouteLocationNormalized['query'],
557+
b: RouteLocationNormalized['query']
558+
): boolean {
559+
const aKeys = Object.keys(a)
560+
const bKeys = Object.keys(b)
561+
if (aKeys.length !== bKeys.length) return false
562+
let i = 0
563+
let key: string
564+
while (i < aKeys.length) {
565+
key = aKeys[i]
566+
if (key !== bKeys[i]) return false
567+
if (!isSameLocationQueryValue(a[key], b[key])) return false
568+
i++
569+
}
570+
571+
return true
572+
}
573+
574+
function isSameLocationQueryValue(
575+
a: LocationQueryValue | LocationQueryValue[],
576+
b: LocationQueryValue | LocationQueryValue[]
577+
): boolean {
578+
if (typeof a !== typeof b) return false
579+
if (Array.isArray(a))
580+
return a.every((value, i) => value === (b as LocationQueryValue[])[i])
581+
return a === b
582+
}

‎src/types/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,14 @@ export interface LocationAsRelative {
4444
}
4545

4646
export interface RouteLocationOptions {
47+
/**
48+
* Replace the entry in the history instead of pushing a new entry
49+
*/
4750
replace?: boolean
51+
/**
52+
* Triggers the navigation even if the location is the same as the current one
53+
*/
54+
force?: boolean
4855
}
4956

5057
// User level location

‎src/utils/query.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { decode, encodeQueryProperty } from '../utils/encoding'
22

3-
type LocationQueryValue = string | null
3+
export type LocationQueryValue = string | null
44
type LocationQueryValueRaw = LocationQueryValue | number | undefined
55
export type LocationQuery = Record<
66
string,

0 commit comments

Comments
 (0)