fix(nuxt): provide route component names to KeepAlive cache

[Clarkkkk]

🔗 Linked issue

#15214

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hi, this PR is aimed to make the keepalive works as expected and fix #15214

Changes:

• Change the nested order of the components in NuxtPage, letting KeepAlive read the correct component name
• Change the relavant code to let them work the same way as before
• Add tests for the keepalive features

There is one problem I am not sure about. In RouteProvider, it uses previousKey and previousRoute to "Prevent reactivity when the page will be rerendered in a different suspense fork" as the comment says, which I don't really understand. Since setup in RouteProvider will not rerun after all the changes, I use a watch to update previousKey and previousRoute. I don't know if it works the same way as before, and it seems there is no test case for this scenario.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[Clarkkkk]

A test about HMR failed, working on it.

[Clarkkkk]

All tests have passed now.

[Clarkkkk]

Thanks for the quick review! All done.

[Maxbsy]

Tips:This branch is out-of-date with the base branch，You’re not authorized to merge this pull request.

[danielroe]

in further testing it seems that this change undoes the purpose of the route provider, which is to ensure a stably injected route in a suspense fork.

I've created a test (#24195) which should show the behaviour we want to have - once merged to main and updated in this pr, you can test it with:

pnpm nuxi dev test/fixtures/basic

and navigate to http://localhost:3000/route-provider/foo and then navigate to bar

[Clarkkkk]

Thanks! I will investigate it

[Clarkkkk]

After some investigations, i found that the behavior of suspense and async component is heavily relying on the nested order of the components in page.ts. The change i've made breaks such behaviors and seems not likely to be fixed.

Another solution that comes to my mind is to set the component name of route-provider dynamically in render function. We could set the name same as its child component so that keep-alive can cache the right component. It may look confusing in vue dev tools since there are two components with the same name. But it seems acceptable as a temporary solution.

In the long run, to address this issue, keep-alive need to be enhanced in vue, and provide the ability to choose which vnode to cache by vnode key or some kind of mark.

Do you have any better idea? @danielroe

[danielroe]

@Clarkkkk I think that would be a good solution. And I think we can only get rid of <RouteProvider> if this functionality is built into vue-router itself.

[Clarkkkk]

I revert the previous changes and set the component name dynamically. <KeepAlive> should work as expected now.

The test result is different because onActivated is triggered before onDeactivated when using <Suspense> in <Keepalive>. And I believe it is the current behavior of Vue (example). So I update the test result to reflect this.

[freezyh]

🔗 Linked issue

#15214

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hi, this PR is aimed to make the keepalive works as expected and fix #15214

Changes:

• Change the nested order of the components in NuxtPage, letting KeepAlive read the correct component name
• Change the relavant code to let them work the same way as before
• Add tests for the keepalive features

There is one problem I am not sure about. In RouteProvider, it uses previousKey and previousRoute to "Prevent reactivity when the page will be rerendered in a different suspense fork" as the comment says, which I don't really understand. Since setup in RouteProvider will not rerun after all the changes, I use a watch to update previousKey and previousRoute. I don't know if it works the same way as before, and it seems there is no test case for this scenario.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

🔗 Linked issue

#15214

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hi, this PR is aimed to make the keepalive works as expected and fix #15214

Changes:

• Change the nested order of the components in NuxtPage, letting KeepAlive read the correct component name
• Change the relavant code to let them work the same way as before
• Add tests for the keepalive features

There is one problem I am not sure about. In RouteProvider, it uses previousKey and previousRoute to "Prevent reactivity when the page will be rerendered in a different suspense fork" as the comment says, which I don't really understand. Since setup in RouteProvider will not rerun after all the changes, I use a watch to update previousKey and previousRoute. I don't know if it works the same way as before, and it seems there is no test case for this scenario.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

if I switch other layout, the keepalive will not work

[freezyh]

I revert the previous changes and set the component name dynamically. <KeepAlive> should work as expected now.

The test result is different because onActivated is triggered before onDeactivated when using <Suspense> in <Keepalive>. And I believe it is the current behavior of Vue (example). So I update the test result to reflect this.

switch other layout, the keepalive of before layout will not work

[transtone]

the include method still have bug.
If use a array cacheList to control the keepalive page, add page name to cacheList will keep the page cache.
but when reduce the cacheList item, the page all refreshed!

<template>
      <NuxtPage :keepalive="{include:cacheList, max:20}" />
</template>
<script setup>
let cacheList = ref(['a','b','c'])
// the page a, b, c is cached.

const updateCacheList = ()=>{
   cacheList.value = ['a','b']
   router.push({path: '/c'})
  // when chanage route, the page 'a', 'b' refreshed!
}
</script>

this means it can't use a dynamic var to control the keepalive status.