Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-31 07:40:33 +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 type { AsyncComponentLoader } from 'vue'
import type { AsyncComponentLoader, HydrationStrategy } from 'vue'
// import ClientOnly from '#app/components/client-only'
import { useNuxtApp } from '#app/nuxt'
@ -11,6 +11,12 @@ 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) => {
return defineComponent({
@ -27,10 +33,7 @@ export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) =>
return () => h(defineAsyncComponent(componentLoader), attrs)
}
return () => h(defineAsyncComponent({
loader: componentLoader,
hydrate: hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined),
}))
return () => h(delayedHydrationComponent(componentLoader, hydrateOnVisible(attrs.hydrate as IntersectionObserverInit | undefined)))
},
})
}
@ -43,10 +46,7 @@ export const createLazyNetworkComponent = (componentLoader: AsyncComponentLoader
if (import.meta.server) {
return () => h(defineAsyncComponent(componentLoader), attrs)
}
return () => defineAsyncComponent({
loader: componentLoader,
hydrate: hydrateOnIdle(attrs.hydrate as number | undefined),
})
return () => h(delayedHydrationComponent(componentLoader, hydrateOnIdle(attrs.hydrate as number | undefined)))
},
})
}
@ -60,10 +60,7 @@ export const createLazyEventComponent = (componentLoader: AsyncComponentLoader)
return () => h(defineAsyncComponent(componentLoader), attrs)
}
const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover']
return () => h(defineAsyncComponent({
loader: componentLoader,
hydrate: hydrateOnInteraction(events),
}))
return () => h(delayedHydrationComponent(componentLoader, hydrateOnInteraction(events)))
},
})
}