Example: Link preloading (GET-only)

packages/inertia-vue/src/link.js

@@ -19,6 +19,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    preload: {
+      type: Boolean,
+      default: true,
+    },
     preserveScroll: {
       type: Boolean,
       default: false,
@@ -34,7 +38,7 @@ export default {
     headers: {
       type: Object,
       default: () => ({}),
-    }
+    },
   },
   render(h, { props, data, children }) {
     return h('a', {
@@ -64,6 +68,36 @@ export default {
             })
           }
         },
+        mouseover: event => {
+          if (data.on && data.on.mouseover) {
+            data.on.mouseover(event)
+          }
+
+          if (!props.preload || data.preloadTimer) {
+            return
+          }
+
+          data.preloadTimer = setTimeout(() => {
+            Inertia.preload(props.href, {
+              data: props.data,
+              method: props.method,
+              only: props.only,
+              headers: props.headers,
+            })
+
+            data.preloadTimer = undefined
+          }, 130)
+        },
+        mouseleave: event => {
+          if (data.on && data.on.mouseleave) {
+            data.on.mouseleave(event)
+          }
+
+          if (data.preloadTimer) {
+            clearTimeout(data.preloadTimer)
+            data.preloadTimer = undefined
+          }
+        },
       },
     }, children)
   },

packages/inertia/src/inertia.js

@@ -1,6 +1,7 @@
 import Axios from 'axios'
 import debounce from './debounce'
 import modal from './modal'
+import preloader from './preloader'
 
 export default {
   resolveComponent: null,
@@ -25,6 +26,7 @@ export default {
 
     this.fireEvent('navigate', { detail: { page: initialPage } })
 
+    preloader.init(this)
     window.addEventListener('popstate', this.restoreState.bind(this))
     document.addEventListener('scroll', debounce(this.handleScrollEvent.bind(this), 100), true)
   },
@@ -102,6 +104,43 @@ export default {
     return this.visitId
   },
 
+  inertiaRequest(url, cancelToken, { method = 'get', data = {}, only = [], headers = {}, onProgress = () => ({}) }) {
+    return Axios({
+      method,
+      url: url.toString(),
+      data: method.toLowerCase() === 'get' ? {} : data,
+      params: method.toLowerCase() === 'get' ? data : {},
+      cancelToken: cancelToken.token,
+      headers: {
+        ...headers,
+        Accept: 'text/html, application/xhtml+xml',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-Inertia': true,
+        ...(only.length ? {
+          'X-Inertia-Partial-Component': this.page.component,
+          'X-Inertia-Partial-Data': only.join(','),
+        } : {}),
+        ...(this.page.version ? { 'X-Inertia-Version': this.page.version } : {}),
+      },
+      onUploadProgress: progress => {
+        progress.percentage = Math.round(progress.loaded / progress.total * 100)
+        this.fireEvent('progress', { detail: { progress } })
+        onProgress(progress)
+      },
+    })
+  },
+
+  preload(url, { method = 'get', data = {}, only = [], headers = {}, onProgress = () => ({}) }) {
+    if (method.toLowerCase() !== 'get') {
+      return
+    }
+
+    return preloader.load(
+      url.toString(),
+      cancelToken => this.inertiaRequest(url, cancelToken, { method, data, only, headers, onProgress }),
+    )
+  },
+
   visit(url, {
     method = 'get',
     data = {},
@@ -128,29 +167,15 @@ export default {
     onCancelToken(this.cancelToken)
 
     return new Proxy(
-      Axios({
-        method,
-        url: url.toString(),
-        data: method.toLowerCase() === 'get' ? {} : data,
-        params: method.toLowerCase() === 'get' ? data : {},
-        cancelToken: this.cancelToken.token,
-        headers: {
-          ...headers,
-          Accept: 'text/html, application/xhtml+xml',
-          'X-Requested-With': 'XMLHttpRequest',
-          'X-Inertia': true,
-          ...(only.length ? {
-            'X-Inertia-Partial-Component': this.page.component,
-            'X-Inertia-Partial-Data': only.join(','),
-          } : {}),
-          ...(this.page.version ? { 'X-Inertia-Version': this.page.version } : {}),
-        },
-        onUploadProgress: progress => {
-          progress.percentage = Math.round(progress.loaded / progress.total * 100)
-          this.fireEvent('progress', { detail: { progress } })
-          onProgress(progress)
-        },
-      }).then(response => {
+      (() => {
+        if (method.toLowerCase() === 'get') {
+          const preloadRequest = this.preload(url, { method, data, only, headers, onProgress })
+          this.cancelToken = preloadRequest.cancelToken
+          return preloadRequest.request
+        }
+
+        return this.inertiaRequest(url, this.cancelToken, { method, data, only, headers, onProgress })
+      })().then(response => {
         if (!this.isInertiaResponse(response)) {
           return Promise.reject({ response })
         }

packages/inertia/src/preloader.js

@@ -0,0 +1,51 @@
+import Axios from 'axios'
+
+export default {
+  requests: {},
+  init(inertia) {
+    inertia.on('success', this.flush.bind(this))
+  },
+  flush() {
+    Object.keys(this.requests).forEach(url => this.requests[url].cancelToken.cancel())
+    this.requests = {}
+  },
+  load(url, handler) {
+    return {
+      request : this.attach(url, handler),
+      cancelToken: this.requests[url].cancelToken,
+    }
+  },
+  attach(url, handler) {
+    if (Object.keys(this.requests).indexOf(url) === -1) {
+      const cancelToken = Axios.CancelToken.source()
+      this.requests[url] = {
+        callbacks: [],
+        response: null,
+        cancelToken,
+      }
+
+      return Promise.resolve(handler(cancelToken))
+        .then(response => {
+          this.requests[url].response = response
+
+          this.requests[url].callbacks.forEach(callback => callback(response))
+          this.requests[url].callbacks = []
+
+          return response
+        })
+        .catch(error => {
+          if (Axios.isCancel(error)) {
+            delete this.requests[url]
+            return
+          }
+          Promise.reject(error)
+        })
+    }
+
+    if (this.requests[url].response) {
+      return Promise.resolve(this.requests[url].response)
+    }
+
+    return new Promise(resolve => this.requests[url].callbacks.push(callback => resolve(callback)))
+  },
+}