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

chore: revert export of useObserver

This commit is contained in:
tbitw2549 2024-08-16 18:14:14 +03:00
parent f3f594f7f9
commit 784c34fc91
2 changed files with 42 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/nuxt/src/app/components/nuxt-link.ts
View File

@ -14,7 +14,6 @@ import { onNuxtReady } from '../composables/ready'
import { navigateTo, resolveRouteObject, useRouter } from '../composables/router'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback'
import { useIntersectionObserver } from '../utils'
// @ts-expect-error virtual file
import { nuxtLinkDefaults } from '#build/nuxt.config.mjs'
@ -308,7 +307,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
let idleId: number
let unobserve: (() => void) | null = null
onMounted(() => {
const observer = useIntersectionObserver()
const observer = useObserver()
onNuxtReady(() => {
idleId = requestIdleCallback(() => {
if (el?.value?.tagName) {
@ -446,7 +445,48 @@ function applyTrailingSlashBehavior (to: string, trailingSlash: NuxtLinkOptions[
}
// --- Prefetching utils ---
type CallbackFn = () => void
type ObserveFn = (element: Element, callback: CallbackFn) => () => void
function useObserver (): { observe: ObserveFn } | undefined {
if (import.meta.server) { return { observe: () => () => {} } }
const nuxtApp = useNuxtApp()
if (nuxtApp._observer) {
return nuxtApp._observer
}
let observer: IntersectionObserver | null = null
const callbacks = new Map<Element, CallbackFn>()
const observe: ObserveFn = (element, callback) => {
if (!observer) {
observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const callback = callbacks.get(entry.target)
const isVisible = entry.isIntersecting || entry.intersectionRatio > 0
if (isVisible && callback) { callback() }
}
})
}
callbacks.set(element, callback)
observer.observe(element)
return () => {
callbacks.delete(element)
observer!.unobserve(element)
if (callbacks.size === 0) {
observer!.disconnect()
observer = null
}
}
}
const _observer = nuxtApp._observer = {
observe,
}
return _observer
}
function isSlowConnection () {
if (import.meta.server) { return }

46
packages/nuxt/src/app/utils.ts
View File

@ -1,50 +1,4 @@
import defu from 'defu'
import { useNuxtApp } from './nuxt'
/** @since 3.9.0 */
export function toArray<T> (value: T | T[]): T[] {
return Array.isArray(value) ? value : [value]
}
export type CallbackFn = () => void
export type ObserveFn = (element: Element, callback: CallbackFn) => () => void
export function useIntersectionObserver (options?: Partial<IntersectionObserverInit>): { observe: ObserveFn } {
if (import.meta.server) { return { observe: () => () => {} } }
const nuxtApp = useNuxtApp()
if (nuxtApp._observer) {
return nuxtApp._observer
}
let observer: IntersectionObserver | null = null
const callbacks = new Map<Element, CallbackFn>()
const observe: ObserveFn = (element, callback) => {
if (!observer) {
observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const callback = callbacks.get(entry.target)
const isVisible = entry.isIntersecting || entry.intersectionRatio > 0
if (isVisible && callback) { callback() }
}
}, defu(options, { root: null, rootMargin: '0px', threshold: 0 }))
}
callbacks.set(element, callback)
observer.observe(element)
return () => {
callbacks.delete(element)
observer!.unobserve(element)
if (callbacks.size === 0) {
observer!.disconnect()
observer = null
}
}
}
const _observer = nuxtApp._observer = {
observe,
}
return _observer
}