fix(nuxt): add missing lazy hydration prop in regex (#31359)

This commit is contained in:
Julien Huang 2025-03-17 18:53:51 +01:00 committed by GitHub
parent 757641a7ea
commit 6b35a08c32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 1 deletions

View File

@ -23,7 +23,7 @@ const hydrationStrategyMap = {
hydrateWhen: 'If', hydrateWhen: 'If',
hydrateNever: 'Never', hydrateNever: 'Never',
} }
const LAZY_HYDRATION_PROPS_RE = /\bhydrate-?on-?idle|hydrate-?on-?visible|hydrate-?on-?interaction|hydrate-?on-?media-?query|hydrate-?after|hydrate-?when\b/ const LAZY_HYDRATION_PROPS_RE = /\bhydrate-?on-?idle|hydrate-?on-?visible|hydrate-?on-?interaction|hydrate-?on-?media-?query|hydrate-?after|hydrate-?when|hydrate-?never\b/
export const LazyHydrationTransformPlugin = (options: LoaderOptions) => createUnplugin(() => { export const LazyHydrationTransformPlugin = (options: LoaderOptions) => createUnplugin(() => {
const exclude = options.transform?.exclude || [] const exclude = options.transform?.exclude || []
const include = options.transform?.include || [] const include = options.transform?.include || []

View File

@ -121,6 +121,24 @@ describe('components:loader', () => {
const __nuxt_component_0_lazy_never = createLazyNeverComponent("components/MyComponent.vue", () => import('../components/MyComponent.vue').then(c => c.default || c));" const __nuxt_component_0_lazy_never = createLazyNeverComponent("components/MyComponent.vue", () => import('../components/MyComponent.vue').then(c => c.default || c));"
`) `)
}) })
it.each([
['hydrate-on-idle', 'createLazyIdleComponent'],
['hydrate-on-visible', 'createLazyVisibleComponent'],
['hydrate-on-interaction', 'createLazyInteractionComponent'],
['hydrate-on-media-query', 'createLazyMediaQueryComponent'],
['hydrate-after', 'createLazyTimeComponent'],
['hydrate-when', 'createLazyIfComponent'],
['hydrate-never', 'createLazyNeverComponent'],
])('should correctly resolve lazy hydration components %s', async (prop, component) => {
const sfc = `
<template>
<LazyMyComponent ${prop} />
</template>
`
const result = await transform(sfc, '/pages/index.vue').then(r => r.split('\n'))
expect(result.join('\n')).toContain(component)
})
}) })
async function transform (code: string, filename: string) { async function transform (code: string, filename: string) {