Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-07 17:32:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: refactor to reusable function

Browse Source
This commit is contained in:
tbitw2549 2024-08-16 23:51:42 +03:00
parent 47e2443a37
commit 60a34552cc
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/nuxt/src/components/runtime/client-delayed-component.ts
View File

@ -1,5 +1,5 @@
import { defineAsyncComponent, defineComponent, getCurrentInstance, h, hydrateOnIdle, hydrateOnInteraction, hydrateOnVisible } from 'vue' import { defineAsyncComponent, defineComponent, getCurrentInstance, h, hydrateOnIdle, hydrateOnInteraction, hydrateOnVisible } from 'vue'
import type { AsyncComponentLoader } from 'vue' import type { AsyncComponentLoader, HydrationStrategy } from 'vue'
// import ClientOnly from '#app/components/client-only' // import ClientOnly from '#app/components/client-only'
import { useNuxtApp } from '#app/nuxt' import { useNuxtApp } from '#app/nuxt'
@ -11,6 +11,12 @@ function elementIsVisibleInViewport (el: Element) {
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
} }
function delayedHydrationComponent(loader: AsyncComponentLoader, hydrate: HydrationStrategy) {
return defineAsyncComponent({
loader,
hydrate
})
}
/* @__NO_SIDE_EFFECTS__ */ /* @__NO_SIDE_EFFECTS__ */
export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) => { export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) => {
return defineComponent({ return defineComponent({
@ -27,10 +33,7 @@ export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) =>
return () => h(defineAsyncComponent(componentLoader), attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
return () => h(defineAsyncComponent({ return () => h(delayedHydrationComponent(componentLoader, hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined)))
loader: componentLoader,
hydrate: hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined),
}))
}, },
}) })
} }
@ -43,10 +46,7 @@ export const createLazyNetworkComponent = (componentLoader: AsyncComponentLoader
if (import.meta.server) { if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
return () => defineAsyncComponent({ return () => h(delayedHydrationComponent(componentLoader, hydrateOnIdle(attrs.hydrate as number | undefined)))
loader: componentLoader,
hydrate: hydrateOnIdle(attrs.hydrate as number | undefined),
})
}, },
}) })
} }
@ -60,10 +60,7 @@ export const createLazyEventComponent = (componentLoader: AsyncComponentLoader)
return () => h(defineAsyncComponent(componentLoader), attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover'] const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover']
return () => h(defineAsyncComponent({ return () => h(delayedHydrationComponent(componentLoader, hydrateOnInteraction(events)))
loader: componentLoader,
hydrate: hydrateOnInteraction(events),
}))
}, },
}) })
} }