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

chore: revert export of useObserver

Browse Source
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 { navigateTo, resolveRouteObject, useRouter } from '../composables/router'
import { useNuxtApp, useRuntimeConfig } from '../nuxt' import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback' import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback'
import { useIntersectionObserver } from '../utils'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { nuxtLinkDefaults } from '#build/nuxt.config.mjs' import { nuxtLinkDefaults } from '#build/nuxt.config.mjs'
@ -308,7 +307,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
let idleId: number let idleId: number
let unobserve: (() => void) | null = null let unobserve: (() => void) | null = null
onMounted(() => { onMounted(() => {
const observer = useIntersectionObserver() const observer = useObserver()
onNuxtReady(() => { onNuxtReady(() => {
idleId = requestIdleCallback(() => { idleId = requestIdleCallback(() => {
if (el?.value?.tagName) { if (el?.value?.tagName) {
@ -446,7 +445,48 @@ function applyTrailingSlashBehavior (to: string, trailingSlash: NuxtLinkOptions[
} }
// --- Prefetching utils --- // --- 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 () { function isSlowConnection () {
if (import.meta.server) { return } 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 */ /** @since 3.9.0 */
export function toArray<T> (value: T | T[]): T[] { export function toArray<T> (value: T | T[]): T[] {
return Array.isArray(value) ? value : [value] 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
}