|
| 1 | +import { |
| 2 | + inject, |
| 3 | + provide, |
| 4 | + PropType, |
| 5 | + ref, |
| 6 | + unref, |
| 7 | + ComponentPublicInstance, |
| 8 | + VNodeProps, |
| 9 | + computed, |
| 10 | + AllowedComponentProps, |
| 11 | + ComponentCustomProps, |
| 12 | + watch, |
| 13 | + VNode, |
| 14 | + createTemplateRefSetter, |
| 15 | + createComponent, |
| 16 | + createDynamicComponent, |
| 17 | + defineVaporComponent, |
| 18 | + type VaporComponent, |
| 19 | + type VaporSlot, |
| 20 | +} from 'vue' |
| 21 | +import type { RouteLocationNormalizedLoaded } from './typed-routes' |
| 22 | +import type { RouteLocationMatched } from './types' |
| 23 | +import { |
| 24 | + matchedRouteKey, |
| 25 | + viewDepthKey, |
| 26 | + routerViewLocationKey, |
| 27 | +} from './injectionSymbols' |
| 28 | +import { assign } from './utils' |
| 29 | +import { isSameRouteRecord } from './location' |
| 30 | +import type { RouterViewProps, RouterViewDevtoolsContext } from './RouterView' |
| 31 | + |
| 32 | +export type { RouterViewProps, RouterViewDevtoolsContext } |
| 33 | + |
| 34 | +export const VaporRouterViewImpl = /*#__PURE__*/ defineVaporComponent({ |
| 35 | + name: 'RouterView', |
| 36 | + // #674 we manually inherit them |
| 37 | + inheritAttrs: false, |
| 38 | + props: { |
| 39 | + name: { |
| 40 | + type: String as PropType<string>, |
| 41 | + default: 'default', |
| 42 | + }, |
| 43 | + route: Object as PropType<RouteLocationNormalizedLoaded>, |
| 44 | + }, |
| 45 | + |
| 46 | + // Better compat for @vue/compat users |
| 47 | + // https://github.com/vuejs/router/issues/1315 |
| 48 | + // @ts-ignore |
| 49 | + compatConfig: { MODE: 3 }, |
| 50 | + |
| 51 | + setup(props, { attrs, slots }) { |
| 52 | + const injectedRoute = inject(routerViewLocationKey)! |
| 53 | + const routeToDisplay = computed<RouteLocationNormalizedLoaded>( |
| 54 | + () => props.route || injectedRoute.value |
| 55 | + ) |
| 56 | + const injectedDepth = inject(viewDepthKey, 0) |
| 57 | + // The depth changes based on empty components option, which allows passthrough routes e.g. routes with children |
| 58 | + // that are used to reuse the `path` property |
| 59 | + const depth = computed<number>(() => { |
| 60 | + let initialDepth = unref(injectedDepth) |
| 61 | + const { matched } = routeToDisplay.value |
| 62 | + let matchedRoute: RouteLocationMatched | undefined |
| 63 | + while ( |
| 64 | + (matchedRoute = matched[initialDepth]) && |
| 65 | + !matchedRoute.components |
| 66 | + ) { |
| 67 | + initialDepth++ |
| 68 | + } |
| 69 | + return initialDepth |
| 70 | + }) |
| 71 | + const matchedRouteRef = computed<RouteLocationMatched | undefined>( |
| 72 | + () => routeToDisplay.value.matched[depth.value] |
| 73 | + ) |
| 74 | + |
| 75 | + provide( |
| 76 | + viewDepthKey, |
| 77 | + computed(() => depth.value + 1) |
| 78 | + ) |
| 79 | + provide(matchedRouteKey, matchedRouteRef) |
| 80 | + provide(routerViewLocationKey, routeToDisplay) |
| 81 | + |
| 82 | + const viewRef = ref<ComponentPublicInstance>() |
| 83 | + |
| 84 | + // watch at the same time the component instance, the route record we are |
| 85 | + // rendering, and the name |
| 86 | + watch( |
| 87 | + () => [viewRef.value, matchedRouteRef.value, props.name] as const, |
| 88 | + ([instance, to, name], [oldInstance, from]) => { |
| 89 | + // copy reused instances |
| 90 | + if (to) { |
| 91 | + // this will update the instance for new instances as well as reused |
| 92 | + // instances when navigating to a new route |
| 93 | + to.instances[name] = instance |
| 94 | + // the component instance is reused for a different route or name, so |
| 95 | + // we copy any saved update or leave guards. With async setup, the |
| 96 | + // mounting component will mount before the matchedRoute changes, |
| 97 | + // making instance === oldInstance, so we check if guards have been |
| 98 | + // added before. This works because we remove guards when |
| 99 | + // unmounting/deactivating components |
| 100 | + if (from && from !== to && instance && instance === oldInstance) { |
| 101 | + if (!to.leaveGuards.size) { |
| 102 | + to.leaveGuards = from.leaveGuards |
| 103 | + } |
| 104 | + if (!to.updateGuards.size) { |
| 105 | + to.updateGuards = from.updateGuards |
| 106 | + } |
| 107 | + } |
| 108 | + } |
| 109 | + |
| 110 | + // trigger beforeRouteEnter next callbacks |
| 111 | + if ( |
| 112 | + instance && |
| 113 | + to && |
| 114 | + // if there is no instance but to and from are the same this might be |
| 115 | + // the first visit |
| 116 | + (!from || !isSameRouteRecord(to, from) || !oldInstance) |
| 117 | + ) { |
| 118 | + ;(to.enterCallbacks[name] || []).forEach(callback => |
| 119 | + callback(instance) |
| 120 | + ) |
| 121 | + } |
| 122 | + }, |
| 123 | + { flush: 'post' } |
| 124 | + ) |
| 125 | + |
| 126 | + const ViewComponent = computed(() => { |
| 127 | + const matchedRoute = matchedRouteRef.value |
| 128 | + return matchedRoute && matchedRoute.components![props.name] |
| 129 | + }) |
| 130 | + |
| 131 | + // props from route configuration |
| 132 | + const routeProps = computed(() => { |
| 133 | + const route = routeToDisplay.value |
| 134 | + const currentName = props.name |
| 135 | + const matchedRoute = matchedRouteRef.value |
| 136 | + const routePropsOption = matchedRoute && matchedRoute.props[currentName] |
| 137 | + return routePropsOption |
| 138 | + ? routePropsOption === true |
| 139 | + ? route.params |
| 140 | + : typeof routePropsOption === 'function' |
| 141 | + ? routePropsOption(route) |
| 142 | + : routePropsOption |
| 143 | + : null |
| 144 | + }) |
| 145 | + |
| 146 | + return createDynamicComponent(() => { |
| 147 | + if (!ViewComponent.value) { |
| 148 | + return () => |
| 149 | + normalizeSlot(slots.default, { |
| 150 | + Component: ViewComponent.value, |
| 151 | + route: routeToDisplay.value, |
| 152 | + }) |
| 153 | + } |
| 154 | + |
| 155 | + const setRef = createTemplateRefSetter() |
| 156 | + |
| 157 | + return () => { |
| 158 | + const component = createComponent( |
| 159 | + ViewComponent.value as VaporComponent, |
| 160 | + { |
| 161 | + $: [() => assign({}, routeProps.value, attrs)], |
| 162 | + } |
| 163 | + ) |
| 164 | + setRef(component, viewRef) |
| 165 | + |
| 166 | + return ( |
| 167 | + normalizeSlot(slots.default, { |
| 168 | + Component: component, |
| 169 | + route: routeToDisplay.value, |
| 170 | + }) || component |
| 171 | + ) |
| 172 | + } |
| 173 | + }) |
| 174 | + }, |
| 175 | +}) |
| 176 | + |
| 177 | +function normalizeSlot(slot: VaporSlot | undefined, data: any) { |
| 178 | + if (!slot) return null |
| 179 | + return slot(data) |
| 180 | +} |
| 181 | + |
| 182 | +// export the public type for h/tsx inference |
| 183 | +// also to avoid inline import() in generated d.ts files |
| 184 | +/** |
| 185 | + * Component to display the current route the user is at. |
| 186 | + */ |
| 187 | +export const VaporRouterView = VaporRouterViewImpl as unknown as { |
| 188 | + new (): { |
| 189 | + $props: AllowedComponentProps & |
| 190 | + ComponentCustomProps & |
| 191 | + VNodeProps & |
| 192 | + RouterViewProps |
| 193 | + |
| 194 | + $slots: { |
| 195 | + default?: ({ |
| 196 | + Component, |
| 197 | + route, |
| 198 | + }: { |
| 199 | + Component: VNode |
| 200 | + route: RouteLocationNormalizedLoaded |
| 201 | + }) => VNode[] |
| 202 | + } |
| 203 | + } |
| 204 | +} |
0 commit comments