mirror of https://github.com/nuxt/nuxt.git
129 lines
4.1 KiB
JavaScript
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 || !link.__prefetch) {
|
|
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, true).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()
|
|
}
|
|
}<% } %>
|
|
}
|
|
}
|