├── .editorconfig
├── .npmignore
├── .babelrc
├── .gitignore
├── webpack.config.js
├── package.json
├── README.md
└── src
    └── Futurelink.vue


/.editorconfig:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | const { VueLoaderPlugin } = require('vue-loader')
 4 | 
 5 | module.exports = {
 6 |   entry: './src/Futurelink.vue',
 7 |   output: {
 8 |     path: path.resolve(__dirname, './dist'),
 9 |     publicPath: '/dist/',
10 |     filename: 'futurelink.min.js',
11 |     library: 'futurelink',
12 |     libraryTarget: 'umd',
13 |   },
14 |   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.vue$/,
19 |         loader: 'vue-loader'
20 |       },
21 |       {
22 |         test: /\.js$/,
23 |         loader: 'babel-loader',
24 |         exclude: /node_modules/
25 |       }
26 |     ]
27 |   },
28 |   devtool: '#source-map',
29 |   optimization: {
30 |     minimize: 'production'.includes(process.env.NODE_ENV)
31 |   },
32 |   plugins: [
33 |     new VueLoaderPlugin()
34 |   ]
35 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-futurelink",
 3 |   "description": "Preload links about to be clicked with futurelink.",
 4 |   "version": "1.2.0",
 5 |   "author": "Callum Macrae <callum@samknows.com>",
 6 |   "main": "dist/futurelink.min.js",
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 |     "prepublish": "npm run build"
11 |   },
12 |   "dependencies": {
13 |     "futurelink": "^1.0.0",
14 |     "vue": "^2.3.3"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/core": "^7.8.6",
18 |     "babel-loader": "^8.0.6",
19 |     "babel-preset-env": "^1.5.1",
20 |     "cross-env": "^3.0.0",
21 |     "css-loader": "^0.25.0",
22 |     "mkdirp": "^0.5.2",
23 |     "vue-loader": "^15.7.0",
24 |     "vue-template-compiler": "^2.3.3",
25 |     "webpack": "^4.41.6",
26 |     "webpack-cli": "^3.3.11",
27 |     "webpack-dev-server": "^3.1.11"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-futurelink
  2 | 
  3 | > A vue component to preload links about to be clicked with [futurelink].
  4 | 
  5 | ## Installation
  6 | 
  7 | ```
  8 | $ npm install --save-dev vue-futurelink
  9 | ```
 10 | 
 11 | ## Usage
 12 | 
 13 | Just load the component and output it into the page, and it will do the rest: it will set up the mouse tracking, hook into vue-router, and output a hidden element to the page. Relies on vue-router.
 14 | 
 15 | ```html
 16 | <template>
 17 |   <futurelink></futurelink>
 18 | </template>
 19 | 
 20 | <script>
 21 |   import Futurelink from 'vue-futurelink';
 22 | 
 23 |   export {
 24 |     components: {
 25 |       Futurelink
 26 |     }
 27 |   };
 28 | </script>
 29 | ```
 30 | 
 31 | I put it below the footer, but in theory it should work anywhere on the page.
 32 | 
 33 | When a page is preloaded, a `preload` event is fired:
 34 | 
 35 | ```html
 36 | <template>
 37 |   <futurelink v-on:preload="handlePreload"></futurelink>
 38 | </template>
 39 | 
 40 | <script>
 41 |   import Futurelink from 'vue-futurelink';
 42 | 
 43 |   export {
 44 |     methods: {
 45 |       handlePreload(path, route) {
 46 |           console.info(`Preloading ${path}`, route);
 47 |       },
 48 |     },
 49 |     components: {
 50 |       Futurelink
 51 |     }
 52 |   };
 53 | </script>
 54 | ```
 55 | 
 56 | ## Source vs. Dist
 57 | 
 58 | By default, the `main` entry points to the compiled and minified version
 59 | of the Vue component. This is typically fine. However, in certain cases,
 60 | perhaps using a PR or forked version of this package, you may need to
 61 | import the source Vue component directly from the package. To do this,
 62 | just append the import with the path to the Vue component: 
 63 | 
 64 | ```js
 65 | import Futurelink from 'vue-futurelink/src/Futurelink';
 66 | ```
 67 | 
 68 | > Note: doing this requires that your build system is using
 69 |  [vue-loader](https://github.com/vuejs/vue-loader) so it can compile the
 70 |  Vue [SFC](https://github.com/vuejs/vue-loader/blob/master/docs/spec.md). 
 71 | 
 72 | ## route.meta.preload
 73 | 
 74 | In some cases, actionable routes shouldn't be preloaded (i.e. `/logout`).
 75 | 
 76 | You can explicitly set the `preload` meta property of a route to
 77 | `false` to prevent it from being preloaded:
 78 | 
 79 | ```js
 80 | {
 81 |   path: '/logout',
 82 |   // ...
 83 |   meta: {
 84 |     preload: false,
 85 |   },
 86 | },
 87 | ```
 88 | 
 89 | In other cases, routes that can be resource intensive may need more
 90 | complex handling to preload additional resources not typically
 91 | associated with just mounting a vue component.
 92 | 
 93 | You can also supply the `preload` meta property with a callback
 94 | function. This callback is passed two parameters:
 95 | 
 96 | - `path` - (string) The link href value (stripped of any router base path).
 97 | - `route` - (Route) The matched route object.
 98 | 
 99 | To prevent the route from being preloaded, the return value of the
100 | callback must explicitly return `false`. Optionally, a `Promise` may
101 | be returned that can ultimately be resolved to a boolean.
102 | 
103 | > Note: Any errors or rejections encountered during the callback are intentionally
104 | > caught as preloading is meant to be a passive and non-blocking feature.
105 | > These errors will only be logged to the console if the
106 | > [Vue.config.silent](https://vuejs.org/v2/api/#silent) option is disabled.
107 | 
108 | ```js
109 | {
110 |   path: '/process-intensive-route',
111 |   // ...
112 |   meta: {
113 |     preload: (path, route) => startFetchingOtherResources(route),
114 |   },
115 | },
116 | ```
117 | 
118 | 
119 | ## License
120 | 
121 | Released under the MIT license.
122 | 
123 | [futurelink]: https://github.com/SamKnows/futurelink
124 | 


--------------------------------------------------------------------------------
/src/Futurelink.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="futurelink no-futurelink" style="height: 0; max-height: 0; overflow: hidden" aria-hidden="true">
  3 |     <div style="height: 100vh; overflow: auto;">
  4 |       <component v-if="preloadComponent" :is="preloadComponent"></component>
  5 |     </div>
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 |   import futurelink from 'futurelink';
 11 | 
 12 |   export default {
 13 |     beforeCreate() {
 14 |       // Ensure vue-router is actually being used (not just dependend on).
 15 |       if (!this.$router || !this.$route) {
 16 |         throw new Error('vue-futurelink requires vue-router to function.');
 17 |       }
 18 |     },
 19 |     beforeDestroy() {
 20 |       if (this.instance) {
 21 |         this.instance.teardown();
 22 |       }
 23 |     },
 24 |     data() {
 25 |       return {
 26 |         basePath: this.$router.options.base ? this.$router.options.base : '/',
 27 |         preloaded: new Set(),
 28 |         preloadComponent: undefined,
 29 |         instance: undefined,
 30 |         options: {
 31 |           future: this.preloadLink,
 32 |           links: [],
 33 |         },
 34 |       }
 35 |     },
 36 |     methods: {
 37 |       logError(error) {
 38 |         // Do not show if there is no error, console or configured to be silent.
 39 |         if (!error || !('console' in window) || !('error' in window.console) || this.$options._base.config.silent) {
 40 |           return;
 41 |         }
 42 |         window.console.error(error);
 43 |       },
 44 |       async shouldPreload(path, route) {
 45 |         // Immediately return if preload meta isn't a function.
 46 |         if (typeof route.meta.preload !== 'function') {
 47 |           return route.meta.preload;
 48 |         }
 49 |         // Return any caught error; preloading is meant to be passive and it
 50 |         // needs to be logged for potential debugging purposes.
 51 |         try {
 52 |           return route.meta.preload.call(this, path, route);
 53 |         }
 54 |         catch (error) {
 55 |           return error;
 56 |         }
 57 |       },
 58 |       preloadLink(link) {
 59 |         const path = link.getAttribute('href').replace(this.basePath, '/');
 60 | 
 61 |         // Immediately return if this path has already been preloaded.
 62 |         if (this.preloaded.has(path)) {
 63 |           return;
 64 |         }
 65 | 
 66 |         // Path hasn't been handled, indicate that it now has been.
 67 |         this.preloaded.add(path);
 68 | 
 69 |         const resolved = this.$router.resolve(path);
 70 |         const matched = resolved.resolved.matched;
 71 |         const route = matched[matched.length - 1];
 72 |         if (!route) {
 73 |           return;
 74 |         }
 75 | 
 76 |         // Check whether the path/route should be preloaded.
 77 |         return this.shouldPreload(path, route)
 78 |             .then((result) => {
 79 |               // If result is an error, throw it so that it's caught below.
 80 |               if (result instanceof Error) {
 81 |                 throw result;
 82 |               }
 83 |               // Do not preload if the result is explicitly set as false.
 84 |               if (result === false) {
 85 |                 return;
 86 |               }
 87 |               this.$emit('preload', path, route);
 88 |               this.preloadComponent = route.components.default;
 89 |             })
 90 |             // Catch any rejections and log them so it doesn't bubble up;
 91 |             // preloading is meant to be passive.
 92 |             .catch((error) => this.logError(error));
 93 |       }
 94 |     },
 95 |     mounted() {
 96 |       // Only run in the browser, but not on mobile (no cursor).
 97 |       if (typeof window === 'undefined' || 'ontouchstart' in window) {
 98 |         return;
 99 |       }
100 |       this.instance = futurelink(this.options);
101 |     },
102 |     watch: {
103 |       // Ensure that anytime a route changes, their paths are recorded as
104 |       // "preloaded" since this means the router is/has handled loading them.
105 |       // This is to ensure route redirections work properly. Also, update the
106 |       // links found on the page.
107 |       '$route'(to, from) {
108 |         this.preloaded.add(from.path);
109 |         this.preloaded.add(to.path);
110 |         this.$nextTick(() => {
111 |           this.options.links = Array.from(document.querySelectorAll(`a[href^="${this.basePath}"`));
112 |         });
113 |       }
114 |     }
115 |   };
116 | </script>
117 | 


--------------------------------------------------------------------------------