diff --git a/packages/nuxt/src/app/composables/hydrate.ts b/packages/nuxt/src/app/composables/hydrate.ts index 804c7daad..5c789fe3e 100644 --- a/packages/nuxt/src/app/composables/hydrate.ts +++ b/packages/nuxt/src/app/composables/hydrate.ts @@ -38,6 +38,6 @@ export const createVisibleLoader = (opts: Partial) => /** * A utility used to determine which events should trigger hydration in components with event-based delayed hydration. - * @param events an array of events that will be used to trigger the hydration + * @param events an array of events that will be used to trigger the hydration */ export const createEventLoader = (events: Array) => events diff --git a/packages/nuxt/src/components/runtime/client-delayed-component.ts b/packages/nuxt/src/components/runtime/client-delayed-component.ts index 8f00b9906..f1b61b868 100644 --- a/packages/nuxt/src/components/runtime/client-delayed-component.ts +++ b/packages/nuxt/src/components/runtime/client-delayed-component.ts @@ -1,5 +1,5 @@ import { createStaticVNode, createVNode, defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, ref } from 'vue' -import type { Component, Ref, ComponentInternalInstance } from 'vue' +import type { Component, ComponentInternalInstance, Ref } from 'vue' // import ClientOnly from '#app/components/client-only' import { getFragmentHTML } from '#app/components/utils' import { useNuxtApp } from '#app/nuxt' @@ -90,7 +90,7 @@ export const createLazyNetworkClientPage = (componentLoader: Component) => { }) } -const eventsMapper = new WeakMap void)[]>() +const eventsMapper = new WeakMap void)[]>() /* @__NO_SIDE_EFFECTS__ */ export const createLazyEventClientPage = (componentLoader: Component) => { return defineComponent({ @@ -109,7 +109,7 @@ export const createLazyEventClientPage = (componentLoader: Component) => { events.forEach((event) => { const handler = () => { isTriggered.value = true - registeredEvents.forEach((remove) => remove()) + registeredEvents.forEach(remove => remove()) eventsMapper.delete(instance) } instance.vnode.el?.addEventListener(event, handler) @@ -118,10 +118,10 @@ export const createLazyEventClientPage = (componentLoader: Component) => { eventsMapper.set(instance, registeredEvents) }) onBeforeUnmount(() => { - registeredEvents?.forEach((remove) => remove()) + registeredEvents?.forEach(remove => remove()) eventsMapper.delete(instance) }) return () => isTriggered.value ? h(componentLoader, attrs) : (instance.vnode.el && nuxt.isHydrating) ? createVNode(createStaticVNode(getFragmentHTML(instance.vnode.el ?? null, true)?.join('') || '', 1)) : null - } + }, }) } diff --git a/test/basic.test.ts b/test/basic.test.ts index 8280d8313..9b7bfadce 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -2676,7 +2676,7 @@ describe('lazy import components', () => { expect(await page.locator('body').getByText('This shouldn\'t be visible at first with network!').all()).toHaveLength(1) expect(await page.locator('body').getByText('This should be visible at first with viewport!').all()).toHaveLength(1) expect(await page.locator('body').getByText('This should be visible at first with events!').all()).toHaveLength(1) - const component = await page.locator('#lazyevent'); + const component = await page.locator('#lazyevent') const rect = (await component.boundingBox())! await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2) await page.waitForLoadState('networkidle') diff --git a/test/fixtures/basic/components/DelayedEvent.client.vue b/test/fixtures/basic/components/DelayedEvent.client.vue index dd1afeea5..334bb7ce7 100644 --- a/test/fixtures/basic/components/DelayedEvent.client.vue +++ b/test/fixtures/basic/components/DelayedEvent.client.vue @@ -2,4 +2,4 @@
This shouldn't be visible at first with events!
- \ No newline at end of file + diff --git a/test/fixtures/basic/components/DelayedEvent.server.vue b/test/fixtures/basic/components/DelayedEvent.server.vue index e78770ec1..2aecafed1 100644 --- a/test/fixtures/basic/components/DelayedEvent.server.vue +++ b/test/fixtures/basic/components/DelayedEvent.server.vue @@ -2,4 +2,4 @@
This should be visible at first with events!
- \ No newline at end of file + diff --git a/test/fixtures/basic/pages/lazy-import-components/index.vue b/test/fixtures/basic/pages/lazy-import-components/index.vue index 5bac08716..3a4377a5c 100644 --- a/test/fixtures/basic/pages/lazy-import-components/index.vue +++ b/test/fixtures/basic/pages/lazy-import-components/index.vue @@ -3,7 +3,7 @@ - +
This is a very tall div