fix(nuxt): change the name of the RouteProvider componet when keepalive #28203

jilx951102 · 2024-07-18T12:51:10Z

🔗 Linked issue

📚 Description

now, I can not dynamic control keepalive by change include config

stackblitz · 2024-07-18T12:51:14Z

Run & review this pull request in StackBlitz Codeflow.

danielroe

Thank you! This looks good to me. But would you have a look at the failing tests, and add a test to cover these changes, perhaps?

nuxt/test/basic.test.ts

Lines 2511 to 2592 in eb31abe

 describe('keepalive', () => { 

 it('should not keepalive by default', async () => { 

 const { page, consoleLogs } = await renderPage('/keepalive') 

 const pageName = 'not-keepalive' 

 await page.click(`#${pageName}`) 

 await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) 

 expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) 

 await page.close() 

 }) 

 it('should not keepalive when included in app config but config in nuxt-page is not undefined', async () => { 

 const { page, consoleLogs } = await renderPage('/keepalive') 

 const pageName = 'keepalive-in-config' 

 await page.click(`#${pageName}`) 

 await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) 

 expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) 

 await page.close() 

 }) 

 it('should not keepalive when included in app config but exclueded in nuxt-page', async () => { 

 const { page, consoleLogs } = await renderPage('/keepalive') 

 const pageName = 'not-keepalive-in-nuxtpage' 

 await page.click(`#${pageName}`) 

 await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) 

 expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) 

 await page.close() 

 }) 

 it('should keepalive when included in nuxt-page', async () => { 

 const { page, consoleLogs } = await renderPage('/keepalive') 

 const pageName = 'keepalive-in-nuxtpage' 

 await page.click(`#${pageName}`) 

 await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) 

 expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`, `${pageName}: onActivated`]) 

 await page.close() 

 }) 

 it('should preserve keepalive config when navigate routes in nuxt-page', async () => { 

 const { page, consoleLogs } = await renderPage('/keepalive') 

 const slugs = [ 

 'keepalive-in-nuxtpage', 

 'keepalive-in-nuxtpage-2', 

 'keepalive-in-nuxtpage', 

 'not-keepalive', 

 'keepalive-in-nuxtpage-2', 

 ] 

 for (const slug of slugs) { 

 await page.click(`#${slug}`) 

 await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${slug}`) 

 } 

 expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([ 

 'keepalive-in-nuxtpage: onMounted', 

 'keepalive-in-nuxtpage: onActivated', 

 'keepalive-in-nuxtpage: onDeactivated', 

 'keepalive-in-nuxtpage-2: onMounted', 

 'keepalive-in-nuxtpage-2: onActivated', 

 'keepalive-in-nuxtpage: onActivated', 

 'keepalive-in-nuxtpage-2: onDeactivated', 

 'keepalive-in-nuxtpage: onDeactivated', 

 'not-keepalive: onMounted', 

 'keepalive-in-nuxtpage-2: onActivated', 

 'not-keepalive: onUnmounted', 

 ]) 

 await page.close() 

 }) 

 })

jilx951102 · 2024-07-19T09:06:56Z

@danielroe thanks for the quick reply.

when I run pnpm test, always report an error 'Error: browserType.launch: Executable doesn't exist'

would you like to tell me your node version？

danielroe · 2024-07-19T12:09:02Z

Try running:

pnpm playwright-core install chromium

jilx951102 · 2024-07-22T09:17:39Z

@danielroe thanks! it works.
I know what casue the issue 27777.
All providerVNodes created by same type RouteProvider, so when change the providerVNode.type.name will cause all providerVNode.type.name change.

And I try to fix it like below

But it report another error

I have no idea how to fix it. Could you give me some ideas?

danielroe · 2024-08-21T12:05:48Z

I'd have a better idea of how to fix if you could provide a reproduction of the issue.

fix(nuxt): change the name of the RouteProvider componet when keepalive

e5b4e15

jilx951102 requested a review from danielroe as a code owner July 18, 2024 12:51

github-actions bot added 3.x bug labels Jul 18, 2024

danielroe reviewed Jul 18, 2024

View reviewed changes

danielroe marked this pull request as draft August 21, 2024 12:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(nuxt): change the name of the RouteProvider componet when keepalive #28203

fix(nuxt): change the name of the RouteProvider componet when keepalive #28203

jilx951102 commented Jul 18, 2024

stackblitz bot commented Jul 18, 2024

danielroe left a comment •

edited

Loading

jilx951102 commented Jul 19, 2024 •

edited

Loading

danielroe commented Jul 19, 2024

jilx951102 commented Jul 22, 2024 •

edited

Loading

danielroe commented Aug 21, 2024

	describe('keepalive', () => {
	it('should not keepalive by default', async () => {
	const { page, consoleLogs } = await renderPage('/keepalive')

	const pageName = 'not-keepalive'
	await page.click(`#${pageName}`)
	await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)

	expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])

	await page.close()
	})

	it('should not keepalive when included in app config but config in nuxt-page is not undefined', async () => {
	const { page, consoleLogs } = await renderPage('/keepalive')

	const pageName = 'keepalive-in-config'
	await page.click(`#${pageName}`)
	await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)

	expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])

	await page.close()
	})

	it('should not keepalive when included in app config but exclueded in nuxt-page', async () => {
	const { page, consoleLogs } = await renderPage('/keepalive')

	const pageName = 'not-keepalive-in-nuxtpage'
	await page.click(`#${pageName}`)
	await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)

	expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])

	await page.close()
	})

	it('should keepalive when included in nuxt-page', async () => {
	const { page, consoleLogs } = await renderPage('/keepalive')

	const pageName = 'keepalive-in-nuxtpage'
	await page.click(`#${pageName}`)
	await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)

	expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`, `${pageName}: onActivated`])

	await page.close()
	})

	it('should preserve keepalive config when navigate routes in nuxt-page', async () => {
	const { page, consoleLogs } = await renderPage('/keepalive')

	const slugs = [
	'keepalive-in-nuxtpage',
	'keepalive-in-nuxtpage-2',
	'keepalive-in-nuxtpage',
	'not-keepalive',
	'keepalive-in-nuxtpage-2',
	]

	for (const slug of slugs) {
	await page.click(`#${slug}`)
	await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${slug}`)
	}

	expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([
	'keepalive-in-nuxtpage: onMounted',
	'keepalive-in-nuxtpage: onActivated',
	'keepalive-in-nuxtpage: onDeactivated',
	'keepalive-in-nuxtpage-2: onMounted',
	'keepalive-in-nuxtpage-2: onActivated',
	'keepalive-in-nuxtpage: onActivated',
	'keepalive-in-nuxtpage-2: onDeactivated',
	'keepalive-in-nuxtpage: onDeactivated',
	'not-keepalive: onMounted',
	'keepalive-in-nuxtpage-2: onActivated',
	'not-keepalive: onUnmounted',
	])

	await page.close()
	})
	})

fix(nuxt): change the name of the RouteProvider componet when keepalive #28203

Are you sure you want to change the base?

fix(nuxt): change the name of the RouteProvider componet when keepalive #28203

Conversation

jilx951102 commented Jul 18, 2024

🔗 Linked issue

📚 Description

stackblitz bot commented Jul 18, 2024

danielroe left a comment • edited Loading

Choose a reason for hiding this comment

jilx951102 commented Jul 19, 2024 • edited Loading

danielroe commented Jul 19, 2024

jilx951102 commented Jul 22, 2024 • edited Loading

danielroe commented Aug 21, 2024

danielroe left a comment •

edited

Loading

jilx951102 commented Jul 19, 2024 •

edited

Loading

jilx951102 commented Jul 22, 2024 •

edited

Loading