Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: avoid function chain

This commit is contained in:
tbitw2549 2024-08-28 16:26:35 +03:00
parent f0c492a657
commit 5e973777b7
1 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,92 +10,83 @@ function elementIsVisibleInViewport (el: Element) {
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
}
function delayedHydrationComponent (loader: AsyncComponentLoader, hydrate: HydrationStrategy) {
return defineAsyncComponent({
loader,
hydrate,
})
}
/* @__NO_SIDE_EFFECTS__ */
export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) => {
export const createLazyIOComponent = (loader: AsyncComponentLoader) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
return () => h(defineAsyncComponent(loader), attrs)
}
const nuxt = useNuxtApp()
const instance = getCurrentInstance()!
if (instance.vnode.el && nuxt.isHydrating && elementIsVisibleInViewport(instance.vnode.el as Element)) {
return () => h(defineAsyncComponent(componentLoader), attrs)
return () => h(defineAsyncComponent(loader), attrs)
}
return () => h(delayedHydrationComponent(componentLoader, hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined)))
return () => h(defineAsyncComponent({ loader, hydrate: hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined) }))
},
})
}
/* @__NO_SIDE_EFFECTS__ */
export const createLazyNetworkComponent = (componentLoader: AsyncComponentLoader) => {
export const createLazyNetworkComponent = (loader: AsyncComponentLoader) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
return () => h(defineAsyncComponent(loader), attrs)
}
return () => h(delayedHydrationComponent(componentLoader, hydrateOnIdle(attrs.hydrate as number | undefined)))
return () => h(defineAsyncComponent({ loader, hydrate: hydrateOnIdle(attrs.hydrate as number | undefined) }))
},
})
}
/* @__NO_SIDE_EFFECTS__ */
export const createLazyEventComponent = (componentLoader: AsyncComponentLoader) => {
export const createLazyEventComponent = (loader: AsyncComponentLoader) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
return () => h(defineAsyncComponent(loader), attrs)
}
const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover']
return () => h(delayedHydrationComponent(componentLoader, hydrateOnInteraction(events)))
return () => h(defineAsyncComponent({ loader, hydrate: hydrateOnInteraction(events) }))
},
})
}
/* @__NO_SIDE_EFFECTS__ */
export const createLazyMediaComponent = (componentLoader: AsyncComponentLoader) => {
export const createLazyMediaComponent = (loader: AsyncComponentLoader) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
const media = attrs.hydrate as string | undefined
if (import.meta.server || !media) {
return () => h(defineAsyncComponent(loader), attrs)
}
return () => h(delayedHydrationComponent(componentLoader, hydrateOnMediaQuery(attrs.hydrate as string | undefined ?? '')))
return () => h(defineAsyncComponent({ loader, hydrate: hydrateOnMediaQuery(attrs.hydrate as string | undefined ?? '') }))
},
})
}
/* @__NO_SIDE_EFFECTS__ */
export const createLazyIfComponent = (componentLoader: AsyncComponentLoader) => {
export const createLazyIfComponent = (loader: AsyncComponentLoader) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
const condition = !!(attrs.hydrate ?? true)
if (import.meta.server || condition) {
return () => h(defineAsyncComponent(loader), attrs)
}
const shouldHydrate = ref(!!(attrs.hydrate ?? true))
if (shouldHydrate.value) {
return () => h(defineAsyncComponent(componentLoader), attrs)
}
const shouldHydrate = ref(condition)
const strategy: HydrationStrategy = (hydrate) => {
const unwatch = watch(shouldHydrate, () => hydrate(), { once: true })
return () => unwatch()
}
return () => h(delayedHydrationComponent(componentLoader, strategy))
return () => h(defineAsyncComponent({ loader, hydrate: strategy }))
},
})
}