Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor for consistency

Browse Source
This commit is contained in:
tbitw2549 2024-06-14 19:17:22 +03:00
parent 3602fe1947
commit 712f81390d
3 changed files with 47 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import { onNuxtReady } from '../composables/ready'
import { navigateTo, useRouter } from '../composables/router'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback'
import type { CallbackFn, ObserveFn } from '../utils'
import { useIntersectionObserver } from '../utils'
// @ts-expect-error virtual file
import { nuxtLinkDefaults } from '#build/nuxt.config.mjs'
@ -306,7 +306,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
let idleId: number
let unobserve: (() => void) | null = null
onMounted(() => {
const observer = useObserver()
const observer = useIntersectionObserver()
onNuxtReady(() => {
idleId = requestIdleCallback(() => {
if (el?.value?.tagName) {
@ -445,47 +445,6 @@ function applyTrailingSlashBehavior (to: string, trailingSlash: NuxtLinkOptions[
// --- Prefetching utils ---
function useObserver (): { observe: ObserveFn } | undefined {
if (import.meta.server) { return }
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 }

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

@ -1,6 +1,50 @@
import { useNuxtApp } from './nuxt'
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?: 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() }
}
},options)
}
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
}

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

@ -6,35 +6,7 @@ import { getFragmentHTML } from '#app/components/utils'
import { useNuxtApp } from '#app/nuxt'
import { cancelIdleCallback, requestIdleCallback } from '#app/compat/idle-callback'
import { onNuxtReady } from '#app'
function useIntersectionObserver (options: IntersectionObserverInit): { observe: ObserveFn } {
if (import.meta.server) { return { observe: () => () => {} } }
let observer: IntersectionObserver | null = null
const observe: ObserveFn = (element, callback) => {
if (!observer) {
observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const isVisible = entry.isIntersecting || entry.intersectionRatio > 0
if (isVisible && callback) { callback() }
}
}, options)
}
observer.observe(element)
return () => {
observer!.unobserve(element)
observer!.disconnect()
observer = null
}
}
const _observer = {
observe,
}
return _observer
}
import { useIntersectionObserver } from '#app/utils'
function elementIsVisibleInViewport (el: Element) {
const { top, left, bottom, right } = el.getBoundingClientRect()