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.

Sandrey1204 · 2024-09-26T18:53:26Z

how to fix it.

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

	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

🔗 Linked issue

📚 Description

Choose a reason for hiding this comment