Skip to content

Commit d9dad0b

Browse files
posvaposva
committed
feat(guards): next callback beforeRouteEnter
1 parent e4b3fbe commit d9dad0b

13 files changed

+257
-153
lines changed

‎__tests__/RouterView.spec.ts

+18-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const routes = createRoutes({
3939
{
4040
components: { default: components.Home },
4141
instances: {},
42+
enterCallbacks: [],
4243
path: '/',
4344
props,
4445
},
@@ -56,6 +57,7 @@ const routes = createRoutes({
5657
{
5758
components: { default: components.Foo },
5859
instances: {},
60+
enterCallbacks: [],
5961
path: '/foo',
6062
props,
6163
},
@@ -73,12 +75,14 @@ const routes = createRoutes({
7375
{
7476
components: { default: components.Nested },
7577
instances: {},
78+
enterCallbacks: [],
7679
path: '/',
7780
props,
7881
},
7982
{
8083
components: { default: components.Foo },
8184
instances: {},
85+
enterCallbacks: [],
8286
path: 'a',
8387
props,
8488
},
@@ -96,18 +100,21 @@ const routes = createRoutes({
96100
{
97101
components: { default: components.Nested },
98102
instances: {},
103+
enterCallbacks: [],
99104
path: '/',
100105
props,
101106
},
102107
{
103108
components: { default: components.Nested },
104109
instances: {},
110+
enterCallbacks: [],
105111
path: 'a',
106112
props,
107113
},
108114
{
109115
components: { default: components.Foo },
110116
instances: {},
117+
enterCallbacks: [],
111118
path: 'b',
112119
props,
113120
},
@@ -122,7 +129,13 @@ const routes = createRoutes({
122129
hash: '',
123130
meta: {},
124131
matched: [
125-
{ components: { foo: components.Foo }, instances: {}, path: '/', props },
132+
{
133+
components: { foo: components.Foo },
134+
instances: {},
135+
enterCallbacks: [],
136+
path: '/',
137+
props,
138+
},
126139
],
127140
},
128141
withParams: {
@@ -138,6 +151,7 @@ const routes = createRoutes({
138151
components: { default: components.User },
139152

140153
instances: {},
154+
enterCallbacks: [],
141155
path: '/users/:id',
142156
props: { default: true },
143157
},
@@ -156,6 +170,7 @@ const routes = createRoutes({
156170
components: { default: components.WithProps },
157171

158172
instances: {},
173+
enterCallbacks: [],
159174
path: '/props/:id',
160175
props: { default: { id: 'foo', other: 'fixed' } },
161176
},
@@ -175,6 +190,7 @@ const routes = createRoutes({
175190
components: { default: components.WithProps },
176191

177192
instances: {},
193+
enterCallbacks: [],
178194
path: '/props/:id',
179195
props: {
180196
default: (to: RouteLocationNormalized) => ({
@@ -247,6 +263,7 @@ describe('RouterView', () => {
247263
{
248264
components: { default: components.User },
249265
instances: {},
266+
enterCallbacks: [],
250267
path: '/users/:id',
251268
props,
252269
},

‎__tests__/errors.spec.ts

+13-10
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,17 @@ describe('Errors & Navigation failures', () => {
101101
// should hang
102102
let navigationPromise = router.push('/foo')
103103

104+
expect(afterEach).toHaveBeenCalledTimes(0)
104105
await expect(router.push('/')).resolves.toEqual(undefined)
105-
expect(afterEach).toHaveBeenCalledTimes(1)
106106
expect(onError).toHaveBeenCalledTimes(0)
107107

108108
resolve()
109109
await navigationPromise
110110
expect(afterEach).toHaveBeenCalledTimes(2)
111111
expect(onError).toHaveBeenCalledTimes(0)
112112

113-
expect(afterEach).toHaveBeenLastCalledWith(
113+
expect(afterEach).toHaveBeenNthCalledWith(
114+
1,
114115
expect.objectContaining({ path: '/foo' }),
115116
from,
116117
expect.objectContaining({ type: NavigationFailureType.cancelled })
@@ -159,18 +160,12 @@ describe('Errors & Navigation failures', () => {
159160
let navigationPromise = router.push('/bar')
160161

161162
// goes from /foo to /
163+
expect(afterEach).toHaveBeenCalledTimes(0)
162164
history.go(-1)
163165

164166
await tick()
165167

166-
expect(afterEach).toHaveBeenCalledTimes(1)
167168
expect(onError).toHaveBeenCalledTimes(0)
168-
expect(afterEach).toHaveBeenLastCalledWith(
169-
expect.objectContaining({ path: '/' }),
170-
from,
171-
undefined
172-
)
173-
174169
resolve()
175170
await expect(navigationPromise).resolves.toEqual(
176171
expect.objectContaining({ type: NavigationFailureType.cancelled })
@@ -179,11 +174,19 @@ describe('Errors & Navigation failures', () => {
179174
expect(afterEach).toHaveBeenCalledTimes(2)
180175
expect(onError).toHaveBeenCalledTimes(0)
181176

182-
expect(afterEach).toHaveBeenLastCalledWith(
177+
expect(afterEach).toHaveBeenNthCalledWith(
178+
1,
183179
expect.objectContaining({ path: '/bar' }),
184180
from,
185181
expect.objectContaining({ type: NavigationFailureType.cancelled })
186182
)
183+
184+
expect(afterEach).toHaveBeenNthCalledWith(
185+
2,
186+
expect.objectContaining({ path: '/' }),
187+
from,
188+
undefined
189+
)
187190
})
188191

189192
it('next(false) triggers afterEach with history.back', async () => {

‎__tests__/guards/beforeRouteEnter.spec.ts

-30
Original file line numberDiff line numberDiff line change
@@ -201,34 +201,4 @@ describe('beforeRouteEnter', () => {
201201
await p
202202
expect(router.currentRoute.value.fullPath).toBe('/foo')
203203
})
204-
205-
// TODO: wait until we have something working with keep-alive and transition first
206-
it.skip('calls next callback', async done => {
207-
const router = createRouter({ routes })
208-
beforeRouteEnter.mockImplementationOnce((to, from, next) => {
209-
next(vm => {
210-
expect(router.currentRoute.value.fullPath).toBe('/foo')
211-
expect(vm).toBeTruthy()
212-
done()
213-
})
214-
})
215-
216-
await router.push('/')
217-
await router.push('/guard/2')
218-
})
219-
220-
it.skip('calls next callback after waiting', async done => {
221-
const [promise, resolve] = fakePromise()
222-
const router = createRouter({ routes })
223-
beforeRouteEnter.mockImplementationOnce(async (to, from, next) => {
224-
await promise
225-
next(vm => {
226-
expect(router.currentRoute.value.fullPath).toBe('/foo')
227-
expect(vm).toBeTruthy()
228-
done()
229-
})
230-
})
231-
router.push('/foo')
232-
resolve()
233-
})
234204
})

‎__tests__/matcher/records.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('normalizeRouteRecord', () => {
66
path: '/home',
77
component: {},
88
})
9-
expect(record).toEqual({
9+
expect(record).toMatchObject({
1010
beforeEnter: undefined,
1111
children: [],
1212
aliasOf: undefined,
@@ -31,7 +31,7 @@ describe('normalizeRouteRecord', () => {
3131
name: 'name',
3232
component: {},
3333
})
34-
expect(record).toEqual({
34+
expect(record).toMatchObject({
3535
beforeEnter,
3636
children: [{ path: '/child' }],
3737
components: { default: {} },
@@ -73,7 +73,7 @@ describe('normalizeRouteRecord', () => {
7373
name: 'name',
7474
components: { one: {} },
7575
})
76-
expect(record).toEqual({
76+
expect(record).toMatchObject({
7777
beforeEnter,
7878
children: [{ path: '/child' }],
7979
components: { one: {} },

‎__tests__/utils.ts

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface RouteRecordViewLoose
5353
> {
5454
leaveGuards?: any
5555
instances: Record<string, any>
56+
enterCallbacks: Function[]
5657
props: Record<string, _RouteRecordProps>
5758
aliasOf: RouteRecordViewLoose | undefined
5859
}

‎e2e/keep-alive/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,19 @@ const Foo: RouteComponent = { template: '<div class="foo">foo</div>' }
2121

2222
const WithGuards: RouteComponent = {
2323
template: `<div>
24+
<p>Enter Count <span id="enter-count">{{ enterCount }}</span></p>
2425
<p>Update Count <span id="update-count">{{ updateCount }}</span></p>
2526
<p>Leave Count <span id="leave-count">{{ leaveCount }}</span></p>
2627
<button id="change-query" @click="changeQuery">Change query</button>
2728
<button id="reset" @click="reset">Reset</button>
2829
</div>`,
2930

31+
beforeRouteEnter(to, from, next) {
32+
next(vm => {
33+
;(vm as any).enterCount++
34+
})
35+
},
36+
3037
beforeRouteUpdate(to, from, next) {
3138
this.updateCount++
3239
next()
@@ -37,11 +44,13 @@ const WithGuards: RouteComponent = {
3744
},
3845

3946
setup() {
47+
const enterCount = ref(0)
4048
const updateCount = ref(0)
4149
const leaveCount = ref(0)
4250
const router = useRouter()
4351

4452
function reset() {
53+
enterCount.value = 0
4554
updateCount.value = 0
4655
leaveCount.value = 0
4756
}
@@ -52,6 +61,7 @@ const WithGuards: RouteComponent = {
5261
return {
5362
reset,
5463
changeQuery,
64+
enterCount,
5565
updateCount,
5666
leaveCount,
5767
}

‎e2e/specs/keep-alive.js

+3
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,18 @@ module.exports = {
2121
.assert.containsText('#counter', '1')
2222

2323
.click('li:nth-child(3) a')
24+
.assert.containsText('#enter-count', '1')
2425
.assert.containsText('#update-count', '0')
2526
.click('#change-query')
27+
.assert.containsText('#enter-count', '1')
2628
.assert.containsText('#update-count', '1')
2729
.back()
2830
.assert.containsText('#update-count', '2')
2931
.assert.containsText('#leave-count', '0')
3032
.back()
3133
.assert.containsText('#counter', '1')
3234
.forward()
35+
.assert.containsText('#enter-count', '2')
3336
.assert.containsText('#update-count', '2')
3437
.assert.containsText('#leave-count', '1')
3538

‎src/RouterView.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@ export const RouterViewImpl = defineComponent({
7575
const currentName = props.name
7676
const onVnodeMounted = () => {
7777
matchedRoute.instances[currentName] = viewRef.value
78-
// TODO: trigger beforeRouteEnter hooks
78+
matchedRoute.enterCallbacks.forEach(callback =>
79+
callback(viewRef.value!)
80+
)
7981
}
8082
const onVnodeUnmounted = () => {
8183
// remove the instance reference to prevent leak

‎src/errors.ts

+43-8
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,25 @@ import {
55
RouteLocationNormalized,
66
} from './types'
77
import { assign } from './utils'
8+
import { PolySymbol } from './injectionSymbols'
89

910
/**
10-
* order is important to make it backwards compatible with v3
11+
* Flags so we can combine them when checking for multiple errors
1112
*/
1213
export const enum ErrorTypes {
13-
MATCHER_NOT_FOUND = 0,
14-
NAVIGATION_GUARD_REDIRECT = 1,
15-
NAVIGATION_ABORTED = 2,
16-
NAVIGATION_CANCELLED = 3,
17-
NAVIGATION_DUPLICATED = 4,
14+
// they must be literals to be used as values so we can't write
15+
// 1 << 2
16+
MATCHER_NOT_FOUND = 1,
17+
NAVIGATION_GUARD_REDIRECT = 2,
18+
NAVIGATION_ABORTED = 4,
19+
NAVIGATION_CANCELLED = 8,
20+
NAVIGATION_DUPLICATED = 16,
1821
}
1922

23+
const NavigationFailureSymbol = PolySymbol(
24+
__DEV__ ? 'navigation failure' : 'nf'
25+
)
26+
2027
interface RouterErrorBase extends Error {
2128
type: ErrorTypes
2229
}
@@ -85,14 +92,42 @@ export function createRouterError<E extends RouterError>(
8592
if (__DEV__ || !__BROWSER__) {
8693
return assign(
8794
new Error(ErrorTypeMessages[type](params as any)),
88-
{ type },
95+
{
96+
type,
97+
[NavigationFailureSymbol]: true,
98+
} as { type: typeof type },
8999
params
90100
) as E
91101
} else {
92-
return assign(new Error(), { type }, params) as E
102+
return assign(
103+
new Error(),
104+
{
105+
type,
106+
[NavigationFailureSymbol]: true,
107+
} as { type: typeof type },
108+
params
109+
) as E
93110
}
94111
}
95112

113+
export function isNavigationFailure(
114+
error: any,
115+
type: ErrorTypes.NAVIGATION_GUARD_REDIRECT
116+
): error is NavigationRedirectError
117+
export function isNavigationFailure(
118+
error: any,
119+
type: ErrorTypes
120+
): error is NavigationFailure
121+
export function isNavigationFailure(
122+
error: any,
123+
type?: number
124+
): error is NavigationFailure {
125+
return (
126+
NavigationFailureSymbol in error &&
127+
(type == null || !!((error as NavigationFailure).type & type))
128+
)
129+
}
130+
96131
const propertiesToLog = ['params', 'query', 'hash'] as const
97132

98133
function stringifyRoute(to: RouteLocationRaw): string {

‎src/matcher/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,7 @@ export function normalizeRouteRecord(
323323
instances: {},
324324
leaveGuards: [],
325325
updateGuards: [],
326+
enterCallbacks: [],
326327
components:
327328
'components' in record
328329
? record.components || {}

0 commit comments

Comments
 (0)