Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/danielroe/roe.dev. This is the code and content for my personal website, built in Nuxt. roe.dev
Something went wrong. Try again.
TypeScript
at feat/nuxt-v5
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326import type { ComputedRef, DefineComponent, PropType } from 'vue'import { hasProtocol } from 'ufo'import type { RouteLocationRaw } from 'vue-router'
import { useRouter } from '#app/composables/router'import { useNuxtApp } from '#app/nuxt'
const firstNonUndefined = <T> (...args: (T | undefined)[]) => args.find(arg => arg !== undefined)
const DEFAULT_EXTERNAL_REL_ATTRIBUTE = 'noopener noreferrer'
export type NuxtLinkOptions = { componentName?: string externalRelAttribute?: string | null activeClass?: string exactActiveClass?: string prefetchedClass?: string trailingSlash?: 'append' | 'remove'}
export type NuxtLinkProps = { // Routing to?: RouteLocationRaw href?: RouteLocationRaw external?: boolean replace?: boolean custom?: boolean
// Attributes target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null rel?: string | null noRel?: boolean
prefetch?: boolean noPrefetch?: boolean
// Styling activeClass?: string exactActiveClass?: string
// Vue Router's `<RouterLink>` additional props ariaCurrentValue?: string}
export default defineComponent({ name: 'NuxtLink', props: { // Routing to: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined, required: false, }, href: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined, required: false, },
// Attributes target: { type: String as PropType<string>, default: undefined, required: false, }, rel: { type: String as PropType<string>, default: undefined, required: false, }, noRel: { type: Boolean as PropType<boolean>, default: undefined, required: false, },
// Prefetching prefetch: { type: Boolean as PropType<boolean>, default: undefined, required: false, }, noPrefetch: { type: Boolean as PropType<boolean>, default: undefined, required: false, },
// Styling activeClass: { type: String as PropType<string>, default: undefined, required: false, }, exactActiveClass: { type: String as PropType<string>, default: undefined, required: false, }, prefetchedClass: { type: String as PropType<string>, default: undefined, required: false, },
// Vue Router's `<RouterLink>` additional props replace: { type: Boolean as PropType<boolean>, default: undefined, required: false, }, ariaCurrentValue: { type: String as PropType<string>, default: undefined, required: false, },
// Edge cases handling external: { type: Boolean as PropType<boolean>, default: undefined, required: false, }, }, setup (props, { slots }) { const router = useRouter()
// Resolving `to` value from `to` and `href` props // Defaults to empty string (won't render any `href` attribute) const to: ComputedRef<string | RouteLocationRaw> = computed( () => props.to || props.href || '', )
// Resolving link type const isExternal = computed<boolean>(() => { // External prop is explicitly set if (props.external) { return true }
// When `target` prop is set, link is external if (props.target && props.target !== '_self') { return true }
// When `to` is a route object then it's an internal link if (typeof to.value === 'object') { return false }
return to.value === '' || hasProtocol(to.value, { acceptRelative: true }) })
// Prefetching const prefetched = ref(false) const el = import.meta.server ? undefined : ref<HTMLElement | null>(null) const elRef = import.meta.server ? undefined : (vm: any) => { el!.value = vm?.$el }
if (import.meta.client) { const shouldPrefetch = props.prefetch !== false && props.noPrefetch !== true && props.target !== '_blank' && !isSlowConnection()
if (shouldPrefetch) { const nuxtApp = useNuxtApp() let idleId: number let unobserve: (() => void) | null = null onMounted(() => { const observer = useObserver() onNuxtReady(() => { idleId = requestIdleCallback(() => { if (el?.value?.tagName) { unobserve = observer!.observe( el.value as HTMLElement, async () => { unobserve?.() unobserve = null
const path = typeof to.value === 'string' ? to.value : router.resolve(to.value).fullPath await Promise.all([ Promise.resolve(nuxtApp.hooks .callHook('link:prefetch', path)) .catch(() => {}), !isExternal.value && preloadRouteComponents( to.value as string, router, ).catch(() => {}), ]) prefetched.value = true }, ) } }) }) }) onBeforeUnmount(() => { if (idleId) { cancelIdleCallback(idleId) } unobserve?.() unobserve = null }) } }
return () => { if (!isExternal.value) { const routerLinkProps: Record<string, any> = { ref: elRef, to: to.value, activeClass: props.activeClass, exactActiveClass: props.exactActiveClass, replace: props.replace, ariaCurrentValue: props.ariaCurrentValue, }
// `custom` API cannot support fallthrough attributes as the slot // may render fragment or text root nodes (#14897, #19375) if (prefetched.value) { routerLinkProps.class = props.prefetchedClass } routerLinkProps.rel = props.rel
// Internal link return h(resolveComponent('RouterLink'), routerLinkProps, slots.default) }
// Resolves `to` value if it's a route location object // converts `""` to `null` to prevent the attribute from being added as empty (`href=""`) const href = typeof to.value === 'object' ? router.resolve(to.value)?.href ?? null : to.value || null
// Resolves `target` value const target = props.target || null
// Resolves `rel` const rel = props.noRel ? null : firstNonUndefined<string | null>( props.rel, href ? DEFAULT_EXTERNAL_REL_ATTRIBUTE : '', ) || null // converts `""` to `null` to prevent the attribute from being added as empty (`rel=""`)
return h('a', { ref: el, href, rel, target }, slots.default?.()) } },}) as unknown as DefineComponent<NuxtLinkProps>
// --- Prefetching utils ---type CallbackFn = () => voidtype ObserveFn = (element: Element, callback: CallbackFn) => () => void
export 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}
export function isSlowConnection () { if (import.meta.server) { return }
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection const cn = (navigator as any).connection as { saveData: boolean effectiveType: string } | null if (cn && (cn.saveData || /2g/.test(cn.effectiveType))) { return true } return false}