Skip to content

Commit e07c469

Browse files
posvaposva
committed
feat(view): handle empty components as pass through
1 parent 3b3e123 commit e07c469

11 files changed

+154
-37
lines changed

‎__tests__/RouterView.spec.ts

+32
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,33 @@ const routes = createRoutes({
202202
},
203203
],
204204
},
205+
206+
passthrough: {
207+
fullPath: '/foo',
208+
name: undefined,
209+
path: '/foo',
210+
query: {},
211+
params: {},
212+
hash: '',
213+
meta: {},
214+
matched: [
215+
{
216+
// @ts-ignore: FIXME:
217+
components: null,
218+
instances: {},
219+
enterCallbacks: {},
220+
path: '/',
221+
props,
222+
},
223+
{
224+
components: { default: components.Foo },
225+
instances: {},
226+
enterCallbacks: {},
227+
path: 'foo',
228+
props,
229+
},
230+
],
231+
},
205232
})
206233

207234
describe('RouterView', () => {
@@ -308,6 +335,11 @@ describe('RouterView', () => {
308335
expect(wrapper.html()).toBe(`<div>id:2;other:page</div>`)
309336
})
310337

338+
it('pass through with empty children', async () => {
339+
const { wrapper } = await factory(routes.passthrough)
340+
expect(wrapper.html()).toBe(`<div>Foo</div>`)
341+
})
342+
311343
describe('warnings', () => {
312344
it('does not warn RouterView is wrapped', () => {
313345
const route = createMockedRoute(routes.root)

‎__tests__/guards/extractComponentsGuards.spec.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ const to = START_LOCATION_NORMALIZED
1212
const from = START_LOCATION_NORMALIZED
1313

1414
const NoGuard: RouteRecordRaw = { path: '/', component: components.Home }
15+
// @ts-expect-error
1516
const InvalidRoute: RouteRecordRaw = {
1617
path: '/',
17-
// @ts-expect-error
1818
component: null,
1919
}
2020
const WrongLazyRoute: RouteRecordRaw = {
@@ -88,11 +88,8 @@ describe('extractComponentsGuards', () => {
8888

8989
it('throws if component is null', async () => {
9090
// @ts-expect-error
91-
await expect(checkGuards([InvalidRoute], 2)).rejects.toHaveProperty(
92-
'message',
93-
expect.stringMatching('Invalid route component')
94-
)
95-
expect('is not a valid component').toHaveBeenWarned()
91+
await expect(checkGuards([InvalidRoute], 0))
92+
expect('either missing a "component(s)" or "children"').toHaveBeenWarned()
9693
})
9794

9895
it('warns wrong lazy component', async () => {

‎__tests__/matcher/resolve.spec.ts

+27-13
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,20 @@ import {
66
MatcherLocationRaw,
77
MatcherLocation,
88
} from '../../src/types'
9-
import { MatcherLocationNormalizedLoose } from '../utils'
9+
import { MatcherLocationNormalizedLoose, RouteRecordViewLoose } from '../utils'
1010
import { mockWarn } from 'jest-mock-warn'
11+
import { defineComponent } from '@vue/runtime-core'
1112

12-
// @ts-expect-error
13-
const component: RouteComponent = null
13+
const component: RouteComponent = defineComponent({})
14+
15+
const baseRouteRecordNormalized: RouteRecordViewLoose = {
16+
instances: {},
17+
enterCallbacks: {},
18+
aliasOf: undefined,
19+
components: null,
20+
path: '',
21+
props: {},
22+
}
1423

1524
// for normalized records
1625
const components = { default: component }
@@ -232,6 +241,7 @@ describe('RouterMatcher.resolve', () => {
232241
matched: [
233242
{
234243
path: '/p',
244+
// @ts-expect-error: doesn't matter
235245
children,
236246
components,
237247
aliasOf: expect.objectContaining({ path: '/parent' }),
@@ -573,6 +583,7 @@ describe('RouterMatcher.resolve', () => {
573583
matched: [
574584
{
575585
path: '/parent',
586+
// @ts-expect-error
576587
children,
577588
components,
578589
aliasOf: undefined,
@@ -1025,7 +1036,10 @@ describe('RouterMatcher.resolve', () => {
10251036
name: 'child-b',
10261037
path: '/foo/b',
10271038
params: {},
1028-
matched: [Foo, { ...ChildB, path: `${Foo.path}/${ChildB.path}` }],
1039+
matched: [
1040+
Foo as any,
1041+
{ ...ChildB, path: `${Foo.path}/${ChildB.path}` },
1042+
],
10291043
}
10301044
)
10311045
})
@@ -1045,7 +1059,7 @@ describe('RouterMatcher.resolve', () => {
10451059
name: 'nested',
10461060
path: '/foo',
10471061
params: {},
1048-
matched: [Foo, { ...Nested, path: `${Foo.path}` }],
1062+
matched: [Foo as any, { ...Nested, path: `${Foo.path}` }],
10491063
}
10501064
)
10511065
})
@@ -1072,7 +1086,7 @@ describe('RouterMatcher.resolve', () => {
10721086
path: '/foo',
10731087
params: {},
10741088
matched: [
1075-
Foo,
1089+
Foo as any,
10761090
{ ...Nested, path: `${Foo.path}` },
10771091
{ ...NestedNested, path: `${Foo.path}` },
10781092
],
@@ -1095,7 +1109,7 @@ describe('RouterMatcher.resolve', () => {
10951109
path: '/foo/nested/a',
10961110
params: {},
10971111
matched: [
1098-
Foo,
1112+
Foo as any,
10991113
{ ...Nested, path: `${Foo.path}/${Nested.path}` },
11001114
{
11011115
...NestedChildA,
@@ -1121,7 +1135,7 @@ describe('RouterMatcher.resolve', () => {
11211135
path: '/foo/nested/a',
11221136
params: {},
11231137
matched: [
1124-
Foo,
1138+
Foo as any,
11251139
{ ...Nested, path: `${Foo.path}/${Nested.path}` },
11261140
{
11271141
...NestedChildA,
@@ -1147,7 +1161,7 @@ describe('RouterMatcher.resolve', () => {
11471161
path: '/foo/nested/a',
11481162
params: {},
11491163
matched: [
1150-
Foo,
1164+
Foo as any,
11511165
{ ...Nested, path: `${Foo.path}/${Nested.path}` },
11521166
{
11531167
...NestedChildA,
@@ -1180,7 +1194,7 @@ describe('RouterMatcher.resolve', () => {
11801194
path: '/foo/nested/a/b',
11811195
params: { p: 'b', n: 'a' },
11821196
matched: [
1183-
Foo,
1197+
Foo as any,
11841198
{
11851199
...NestedWithParam,
11861200
path: `${Foo.path}/${NestedWithParam.path}`,
@@ -1209,7 +1223,7 @@ describe('RouterMatcher.resolve', () => {
12091223
path: '/foo/nested/b/a',
12101224
params: { p: 'a', n: 'b' },
12111225
matched: [
1212-
Foo,
1226+
Foo as any,
12131227
{
12141228
...NestedWithParam,
12151229
path: `${Foo.path}/${NestedWithParam.path}`,
@@ -1257,7 +1271,7 @@ describe('RouterMatcher.resolve', () => {
12571271
name: 'nested',
12581272
path: '/nested',
12591273
params: {},
1260-
matched: [Parent, { ...Nested, path: `/nested` }],
1274+
matched: [Parent as any, { ...Nested, path: `/nested` }],
12611275
}
12621276
)
12631277
})
@@ -1277,7 +1291,7 @@ describe('RouterMatcher.resolve', () => {
12771291
name: 'nested',
12781292
path: '/parent/nested',
12791293
params: {},
1280-
matched: [Parent, { ...Nested, path: `/parent/nested` }],
1294+
matched: [Parent as any, { ...Nested, path: `/parent/nested` }],
12811295
}
12821296
)
12831297
})

‎__tests__/utils.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,15 @@ export function nextNavigation(router: Router) {
5151
export interface RouteRecordViewLoose
5252
extends Pick<
5353
RouteRecordMultipleViews,
54-
'path' | 'name' | 'components' | 'children' | 'meta' | 'beforeEnter'
54+
'path' | 'name' | 'meta' | 'beforeEnter'
5555
> {
5656
leaveGuards?: any
5757
instances: Record<string, any>
5858
enterCallbacks: Record<string, Function[]>
5959
props: Record<string, _RouteRecordProps>
6060
aliasOf: RouteRecordViewLoose | undefined
61+
children?: RouteRecordViewLoose[]
62+
components: Record<string, RouteComponent> | null | undefined
6163
}
6264

6365
// @ts-expect-error we are intentionally overriding the type

‎src/RouterView.ts

+23-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
defineComponent,
66
PropType,
77
ref,
8+
unref,
89
ComponentPublicInstance,
910
VNodeProps,
1011
getCurrentInstance,
@@ -61,12 +62,29 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
6162

6263
const injectedRoute = inject(routerViewLocationKey)!
6364
const routeToDisplay = computed(() => props.route || injectedRoute.value)
64-
const depth = inject(viewDepthKey, 0)
65+
const injectedDepth = inject(viewDepthKey, 0)
66+
// The depth changes based on empty components option, which allows passthrough routes e.g. routes with children
67+
// that are used to reuse the `path` property
68+
const depth = computed<number>(() => {
69+
let initialDepth = unref(injectedDepth)
70+
const { matched } = routeToDisplay.value
71+
let matchedRoute: RouteLocationMatched | undefined
72+
while (
73+
(matchedRoute = matched[initialDepth]) &&
74+
!matchedRoute.components
75+
) {
76+
initialDepth++
77+
}
78+
return initialDepth
79+
})
6580
const matchedRouteRef = computed<RouteLocationMatched | undefined>(
66-
() => routeToDisplay.value.matched[depth]
81+
() => routeToDisplay.value.matched[depth.value]
6782
)
6883

69-
provide(viewDepthKey, depth + 1)
84+
provide(
85+
viewDepthKey,
86+
computed(() => depth.value + 1)
87+
)
7088
provide(matchedRouteKey, matchedRouteRef)
7189
provide(routerViewLocationKey, routeToDisplay)
7290

@@ -117,7 +135,7 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
117135
return () => {
118136
const route = routeToDisplay.value
119137
const matchedRoute = matchedRouteRef.value
120-
const ViewComponent = matchedRoute && matchedRoute.components[props.name]
138+
const ViewComponent = matchedRoute && matchedRoute.components![props.name]
121139
// we need the value at the time we render because when we unmount, we
122140
// navigated to a different location so the value is different
123141
const currentName = props.name
@@ -158,7 +176,7 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
158176
) {
159177
// TODO: can display if it's an alias, its props
160178
const info: RouterViewDevtoolsContext = {
161-
depth,
179+
depth: depth.value,
162180
name: matchedRoute.name,
163181
path: matchedRoute.path,
164182
meta: matchedRoute.meta,

‎src/injectionSymbols.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const matchedRouteKey = /*#__PURE__*/ PolySymbol(
3232
*/
3333
export const viewDepthKey = /*#__PURE__*/ PolySymbol(
3434
__DEV__ ? 'router view depth' : 'rvd'
35-
) as InjectionKey<number>
35+
) as InjectionKey<Ref<number> | number>
3636

3737
/**
3838
* Allows overriding the router instance returned by `useRouter` in tests. r

‎src/matcher/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -350,15 +350,16 @@ export function normalizeRouteRecord(
350350
aliasOf: undefined,
351351
beforeEnter: record.beforeEnter,
352352
props: normalizeRecordProps(record),
353+
// @ts-expect-error: record.children only exists in some cases
353354
children: record.children || [],
354355
instances: {},
355356
leaveGuards: new Set(),
356357
updateGuards: new Set(),
357358
enterCallbacks: {},
358359
components:
359360
'components' in record
360-
? record.components || {}
361-
: { default: record.component! },
361+
? record.components || null
362+
: record.component && { default: record.component },
362363
}
363364
}
364365

‎src/matcher/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export interface RouteRecordNormalized {
2727
/**
2828
* {@inheritDoc RouteRecordMultipleViews.components}
2929
*/
30-
components: RouteRecordMultipleViews['components']
30+
components: RouteRecordMultipleViews['components'] | null | undefined
3131
/**
3232
* {@inheritDoc _RouteRecordBase.components}
3333
*/

‎src/navigationGuards.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,12 @@ export function extractComponentsGuards(
236236
const guards: Array<() => Promise<void>> = []
237237

238238
for (const record of matched) {
239+
if (__DEV__ && !record.components && !record.children.length) {
240+
warn(
241+
`Record with path "${record.path}" is either missing a "component(s)"` +
242+
` or "children" property.`
243+
)
244+
}
239245
for (const name in record.components) {
240246
let rawComponent = record.components[name]
241247
if (__DEV__) {
@@ -312,7 +318,8 @@ export function extractComponentsGuards(
312318
? resolved.default
313319
: resolved
314320
// replace the function with the resolved component
315-
record.components[name] = resolvedComponent
321+
// cannot be null or undefined because we went into the for loop
322+
record.components![name] = resolvedComponent
316323
// __vccOpts is added by vue-class-component and contain the regular options
317324
const options: ComponentOptions =
318325
(resolvedComponent as any).__vccOpts || resolvedComponent

‎src/router.ts

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import {
5050
reactive,
5151
unref,
5252
computed,
53+
ref,
5354
} from 'vue'
5455
import { RouteRecord, RouteRecordNormalized } from './matcher/types'
5556
import {

0 commit comments

Comments
 (0)