Fix route components remounting rather than being updated when props change

src/components/echo.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 
-export default defineComponent(({ value }) => {
-  return () => value
+export default defineComponent((props) => {
+  return () => props.value
 }, {
   props: {
     value: {

src/components/routerView.vue

@@ -6,23 +6,15 @@
   </template>
 </template>
 
-<script lang="ts">
-/**
- * @ignore
- */
-</script>
-
 <script lang="ts" setup>
-  import { Component, UnwrapRef, VNode, computed, provide, resolveComponent } from 'vue'
-  import { usePropStore } from '@/compositions/usePropStore'
+  import { Component, UnwrapRef, VNode, computed, provide } from 'vue'
   import { useRejection } from '@/compositions/useRejection'
   import { useRoute } from '@/compositions/useRoute'
   import { useRouterDepth } from '@/compositions/useRouterDepth'
-  import { component as componentUtil } from '@/services/component'
   import { RouterRejection } from '@/services/createRouterReject'
   import { RouterRoute } from '@/services/createRouterRoute'
-  import { CreateRouteOptions, isWithComponent, isWithComponents } from '@/types/createRouteOptions'
   import { depthInjectionKey } from '@/types/injectionDepth'
+  import { useComponentsStore } from '@/compositions/useComponentsStore'
 
   const { name = 'default' } = defineProps<{
     name?: string,
@@ -32,8 +24,7 @@
   const rejection = useRejection()
   const depth = useRouterDepth()
 
-  const { getProps } = usePropStore()
-  const routerView = resolveComponent('RouterView', true)
+  const { getRouteComponents } = useComponentsStore()
 
   defineSlots<{
     default?: (props: {
@@ -56,39 +47,8 @@
       return null
     }
 
-    const component = getComponent(match)
-    const props = getProps(match.id, name, route)
-
-    if (!component) {
-      return null
-    }
-
-    if (props) {
-      return componentUtil(component, () => props)
-    }
+    const components = getRouteComponents(match)
 
-    return component
+    return components[name]
   })
-
-  function getComponent(match: CreateRouteOptions): Component | undefined {
-    const allComponents = getAllComponents(match)
-
-    return allComponents[name]
-  }
-
-  function getAllComponents(options: CreateRouteOptions): Record<string, Component | undefined> {
-    if (isWithComponents(options)) {
-      return options.components
-    }
-
-    if (isWithComponent(options)) {
-      return { default: options.component }
-    }
-
-    if (typeof routerView === 'string') {
-      return {}
-    }
-
-    return { default: routerView }
-  }
 </script>

src/compositions/useComponentsStore.ts

@@ -0,0 +1,13 @@
+import { inject } from 'vue'
+import { RouterNotInstalledError } from '@/errors/routerNotInstalledError'
+import { ComponentsStore, componentsStoreKey } from '@/services/createComponentsStore'
+
+export function useComponentsStore(): ComponentsStore {
+  const store = inject(componentsStoreKey)
+
+  if (!store) {
+    throw new RouterNotInstalledError()
+  }
+
+  return store
+}

src/services/component.browser.spec.ts

@@ -1,7 +1,6 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { expect, test } from 'vitest'
 import echo from '@/components/echo'
-import { component } from '@/services/component'
 import { createRoute } from '@/services/createRoute'
 import { createRouter } from '@/services/createRouter'
 import { h, defineComponent, getCurrentInstance } from 'vue'
@@ -10,8 +9,8 @@ test('renders component with sync props', async () => {
   const route = createRoute({
     name: 'echo',
     path: '/echo',
-    component: component(echo, () => ({ value: 'echo' })),
-  })
+    component: echo,
+  }, () => ({ value: 'echo' }))
 
   const router = createRouter([route], {
     initialUrl: '/',
@@ -38,10 +37,8 @@ test('renders component with async props', async () => {
   const route = createRoute({
     name: 'echo',
     path: '/echo',
-    component: component(echo, async () => {
-      return { value: 'echo' }
-    }),
-  })
+    component: echo,
+  }, async () => ({ value: 'echo' }))
 
   const router = createRouter([route], {
     initialUrl: '/',
@@ -109,8 +106,8 @@ test('renders component with async props using suspense', async () => {
   const route = createRoute({
     name: 'home',
     path: '/',
-    component: component(echo, () => promise),
-  })
+    component: echo,
+  }, () => promise)
 
   const router = createRouter([route], {
     initialUrl: '/',

src/services/component.ts

@@ -1,7 +1,10 @@
+/* eslint-disable vue/require-prop-types */
 /* eslint-disable vue/one-component-per-file */
-import { AsyncComponentLoader, Component, FunctionalComponent, defineComponent, getCurrentInstance, h, ref } from 'vue'
-import { MaybePromise } from '@/types/utilities'
+import { AsyncComponentLoader, Component, FunctionalComponent, defineComponent, getCurrentInstance, h, ref, watch } from 'vue'
 import { isPromise } from '@/utilities/promises'
+import { CreatedRouteOptions } from '@/types/route'
+import { usePropStore } from '@/compositions/usePropStore'
+import { useRoute } from '@/compositions/useRoute'
 
 type Constructor = new (...args: any) => any
 
@@ -13,83 +16,79 @@ export type ComponentProps<TComponent extends Component> = TComponent extends Co
       ? T
       : {}
 
-type ComponentPropsGetter<TComponent extends Component> = () => MaybePromise<ComponentProps<TComponent>>
-
-/**
- * Creates a component wrapper which has no props itself but mounts another component within while binding its props
- *
- * @param component The component to mount
- * @param props A callback that returns the props or attributes to bind to the component
- * @returns A component
- */
-export function component<TComponent extends Component>(component: TComponent, props: ComponentPropsGetter<TComponent>): Component {
+export function createComponentPropsWrapper(match: CreatedRouteOptions, name: string, component: Component): Component {
   return defineComponent({
     name: 'PropsWrapper',
     expose: [],
     setup() {
-      const values = props()
       const instance = getCurrentInstance()
+      const store = usePropStore()
+      const route = useRoute()
 
       return () => {
-        if (values instanceof Error) {
+        const props = store.getProps(match.id, name, route)
+
+        if (props instanceof Error) {
           return ''
         }
 
-        if (isPromise(values)) {
+        if (isPromise(props)) {
           // @ts-expect-error there isn't a way to check if suspense is used in the component without accessing a private property
           if (instance?.suspense) {
-            return h(suspenseAsyncPropsWrapper(component, values))
+            return h(SuspenseAsyncComponentPropsWrapper, { component, props })
           }
 
-          return h(asyncPropsWrapper(component, values))
+          return h(AsyncComponentPropsWrapper, { component, props })
         }
 
-        return h(component, values)
+        return h(component, props)
       }
     },
   })
 }
 
-/**
- * Creates a component wrapper that binds async props which does not require suspense
- */
-function asyncPropsWrapper<TComponent extends Component>(component: TComponent, props: Promise<ComponentProps<TComponent>>): Component {
-  return defineComponent({
-    name: 'AsyncPropsWrapper',
-    expose: [],
-    setup() {
-      const values = ref()
+const AsyncComponentPropsWrapper = defineComponent((input: { component: Component, props: unknown }) => {
+  const values = ref()
 
-      ;(async () => {
-        values.value = await props
-      })()
+  watch(() => input.props, async (props) => {
+    values.value = await props
+  }, { immediate: true, deep: true })
 
-      return () => {
-        if (values.value instanceof Error) {
-          return ''
-        }
+  return () => {
+    if (values.value instanceof Error) {
+      return ''
+    }
 
-        if (values.value) {
-          return h(component, values.value)
-        }
+    if (values.value) {
+      return h(input.component, values.value)
+    }
 
-        return ''
-      }
-    },
-  })
-}
+    return ''
+  }
+}, {
+  props: ['component', 'props'],
+})
 
-/**
- * Creates a component wrapper that binds async props which requires suspense
- */
-function suspenseAsyncPropsWrapper<TComponent extends Component>(component: TComponent, props: Promise<ComponentProps<TComponent>>): Component {
-  return defineComponent({
-    name: 'SuspenseAsyncPropsWrapper',
-    expose: [],
-    async setup() {
-      const values = await props
+const SuspenseAsyncComponentPropsWrapper = defineComponent(async (input: { component: Component, props: unknown }) => {
+  const values = ref()
 
-      return () => h(component, values)
-    },
-  })
-}
+  values.value = await input.props
+
+  watch(() => values.value, async (props) => {
+    values.value = await props
+  }, { deep: true })
+
+  return () => {
+    if (values.value instanceof Error) {
+      return ''
+    }
+
+    if (values.value) {
+      return h(input.component, values.value)
+    }
+
+    return ''
+  }
+}, {
+  props: ['component', 'props'],
+})

src/services/createComponentsStore.ts

@@ -0,0 +1,51 @@
+import { Component, InjectionKey } from 'vue'
+import { createComponentPropsWrapper } from './component'
+import { CreatedRouteOptions } from '@/types/route'
+import { isWithComponent, isWithComponents } from '@/types/createRouteOptions'
+import RouterView from '@/components/routerView.vue'
+
+export type ComponentsStore = {
+  getRouteComponents: (match: CreatedRouteOptions) => Record<string, Component>,
+}
+
+export const componentsStoreKey: InjectionKey<ComponentsStore> = Symbol()
+
+export function createComponentsStore(): ComponentsStore {
+  const store = new Map<string, Record<string, Component>>()
+
+  const getRouteComponents: ComponentsStore['getRouteComponents'] = (match) => {
+    const existing = store.get(match.id)
+
+    if (existing) {
+      return existing
+    }
+
+    const components = getAllComponentsForMatch(match)
+
+    store.set(match.id, components)
+
+    return components
+  }
+
+  return {
+    getRouteComponents,
+  }
+}
+
+function getAllComponentsForMatch(options: CreatedRouteOptions): Record<string, Component> {
+  if (isWithComponents(options)) {
+    return wrapAllComponents(options, options.components)
+  }
+
+  if (isWithComponent(options)) {
+    return wrapAllComponents(options, { default: options.component })
+  }
+
+  return { default: RouterView }
+}
+
+function wrapAllComponents(match: CreatedRouteOptions, components: Record<string, Component>): Record<string, Component> {
+  return Object.fromEntries(
+    Object.entries(components).map(([name, component]) => [name, createComponentPropsWrapper(match, name, component)]),
+  )
+}

src/services/createRouter.ts

@@ -31,6 +31,7 @@ import { RouterReject } from '@/types/routerReject'
 import { EmptyRouterPlugin, RouterPlugin } from '@/types/routerPlugin'
 import { getRoutesForRouter } from './getRoutesForRouter'
 import { getGlobalHooksForRouter } from './getGlobalHooksForRouter'
+import { componentsStoreKey, createComponentsStore } from './createComponentsStore'
 
 type RouterUpdateOptions = {
   replace?: boolean,
@@ -84,6 +85,7 @@ export function createRouter<
 
   const getNavigationId = createUniqueIdSequence()
   const propStore = createPropStore()
+  const componentsStore = createComponentsStore()
   const visibilityObserver = createVisibilityObserver()
   const history = createRouterHistory({
     mode: options?.historyMode,
@@ -312,6 +314,7 @@ export function createRouter<
     app.provide(routerRejectionKey, rejection)
     app.provide(routerHooksKey, hooks)
     app.provide(propStoreKey, propStore)
+    app.provide(componentsStoreKey, componentsStore)
     app.provide(visibilityObserverKey, visibilityObserver)
 
     // We cant technically guarantee that the user registered the same router that they installed