Nuxt/packages/vue-app/template/components/nuxt-link.client.js

129 lines
4.1 KiB
JavaScript

import Vue from 'vue'
const requestIdleCallback = window.requestIdleCallback ||
function (cb) {
const start = Date.now()
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
})
}, 1)
}
const cancelIdleCallback = window.cancelIdleCallback || function (id) {
clearTimeout(id)
}
const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => {
entries.forEach(({ intersectionRatio, target: link }) => {
if (intersectionRatio <= 0) {
return
}
link.__prefetch()
})
})
<%= isTest ? '// @vue/component' : '' %>
export default {
name: 'NuxtLink',
extends: Vue.component('RouterLink'),
props: {
prefetch: {
type: Boolean,
default: <%= router.prefetchLinks ? 'true' : 'false' %>
},
noPrefetch: {
type: Boolean,
default: false
}<% if (router.linkPrefetchedClass) { %>,
prefetchedClass: {
type: String,
default: '<%= router.linkPrefetchedClass %>'
}<% } %>
},
mounted () {
if (this.prefetch && !this.noPrefetch) {
this.handleId = requestIdleCallback(this.observe, { timeout: 2e3 })
}
},
beforeDestroy () {
cancelIdleCallback(this.handleId)
if (this.__observed) {
observer.unobserve(this.$el)
delete this.$el.__prefetch
}
},
methods: {
observe () {
// If no IntersectionObserver, avoid prefetching
if (!observer) {
return
}
// Add to observer
if (this.shouldPrefetch()) {
this.$el.__prefetch = this.prefetchLink.bind(this)
observer.observe(this.$el)
this.__observed = true
}<% if (router.linkPrefetchedClass) { %> else {
this.addPrefetchedClass()
}<% } %>
},
shouldPrefetch () {
<% if (isFullStatic && router.prefetchPayloads) { %>
const ref = this.$router.resolve(this.to, this.$route, this.append)
const Components = ref.resolved.matched.map(r => r.components.default)
return Components.filter(Component => ref.href || (typeof Component === 'function' && !Component.options && !Component.__prefetched)).length
<% } else { %>return this.getPrefetchComponents().length > 0<% } %>
},
canPrefetch () {
const conn = navigator.connection
const hasBadConnection = this.<%= globals.nuxt %>.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
return !hasBadConnection
},
getPrefetchComponents () {
const ref = this.$router.resolve(this.to, this.$route, this.append)
const Components = ref.resolved.matched.map(r => r.components.default)
return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
},
prefetchLink () {
if (!this.canPrefetch()) {
return
}
// Stop observing this link (in case of internet connection changes)
observer.unobserve(this.$el)
const Components = this.getPrefetchComponents()
<% if (router.linkPrefetchedClass) { %>const promises = []<% } %>
for (const Component of Components) {
const componentOrPromise = Component()
if (componentOrPromise instanceof Promise) {
componentOrPromise.catch(() => {})
<% if (router.linkPrefetchedClass) { %>promises.push(componentOrPromise)<% } %>
}
Component.__prefetched = true
}
<% if (isFullStatic && router.prefetchPayloads) { %>
// Preload the data only if not in preview mode
if (!this.$root.isPreview) {
const { href } = this.$router.resolve(this.to, this.$route, this.append)
if (this.<%= globals.nuxt %>)
this.<%= globals.nuxt %>.fetchPayload(href).catch(() => {})
}
<% } %>
<% if (router.linkPrefetchedClass) { %>
return Promise.all(promises).then(() => this.addPrefetchedClass())
<% } %>
}<% if (router.linkPrefetchedClass) { %>,
addPrefetchedClass () {
if (this.prefetchedClass !== 'false') {
this.$el.className = (this.$el.className + ' ' + this.prefetchedClass).trim()
}
}<% } %>
}
}