Merge pull request #114 from swup/fix/preload-hovered-links

Fix `options.preloadHoveredLinks`

Author: hirasso

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.2.7] - 2023-10-20
+
+- Fix `options.preloadHoveredLinks`
+
 ## [3.2.6] - 2023-10-13
 
 - Fix `swup.preload` function signature
@@ -107,6 +111,7 @@
 
 - Initial release
 
+[3.2.7]: https://github.com/swup/preload-plugin/releases/tag/3.2.7
 [3.2.6]: https://github.com/swup/preload-plugin/releases/tag/3.2.6
 [3.2.5]: https://github.com/swup/preload-plugin/releases/tag/3.2.5
 [3.2.4]: https://github.com/swup/preload-plugin/releases/tag/3.2.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swup/preload-plugin",
   "amdName": "SwupPreloadPlugin",
-  "version": "3.2.6",
+  "version": "3.2.7",
   "description": "A swup plugin for preloading pages and faster navigation",
   "type": "module",
   "source": "src/index.ts",

src/index.ts

@@ -132,38 +132,24 @@ export default class SwupPreloadPlugin extends Plugin {
 		swup.preload = this.preload;
 		swup.preloadLinks = this.preloadLinks;
 
-		// Register handlers for preloading on attention: mouseenter, touchstart, focus
-		const { linkSelector: selector } = swup.options;
-		const opts = { passive: true, capture: true };
-		this.mouseEnterDelegate = swup.delegateEvent(
-			selector,
-			'mouseenter',
-			this.onMouseEnter,
-			opts
-		);
-		this.touchStartDelegate = swup.delegateEvent(
-			selector,
-			'touchstart',
-			this.onTouchStart,
-			opts
-		);
-		this.focusDelegate = swup.delegateEvent(selector, 'focus', this.onFocus, opts);
-
 		// Inject custom promise whenever a page is loaded
 		this.replace('page:load', this.onPageLoad);
 
 		// Preload links with [data-swup-preload] attr
-		if (this.options.preloadHoveredLinks) {
-			this.preloadLinks();
-			this.on('page:view', () => this.preloadLinks());
-		}
+		this.preloadLinks();
+		this.on('page:view', () => this.preloadLinks());
 
 		// Preload visible links in viewport
 		if (this.options.preloadVisibleLinks.enabled) {
 			this.preloadVisibleLinks();
 			this.on('page:view', () => this.preloadVisibleLinks());
 		}
 
+		// Preload links on attention
+		if (this.options.preloadHoveredLinks) {
+			this.preloadLinksOnAttention();
+		}
+
 		// Cache unmodified DOM of initial/current page
 		if (this.options.preloadInitialPage) {
 			this.preload(getCurrentUrl());
@@ -323,6 +309,32 @@ export default class SwupPreloadPlugin extends Plugin {
 		});
 	}
 
+	/**
+	 * Register handlers for preloading on attention:
+	 *  - mouseenter
+	 *  - touchstart
+	 *  - focus
+	 */
+	protected preloadLinksOnAttention() {
+		const { swup } = this;
+
+		const { linkSelector: selector } = swup.options;
+		const opts = { passive: true, capture: true };
+		this.mouseEnterDelegate = swup.delegateEvent(
+			selector,
+			'mouseenter',
+			this.onMouseEnter,
+			opts
+		);
+		this.touchStartDelegate = swup.delegateEvent(
+			selector,
+			'touchstart',
+			this.onTouchStart,
+			opts
+		);
+		this.focusDelegate = swup.delegateEvent(selector, 'focus', this.onFocus, opts);
+	}
+
 	/**
 	 * Start observing links in the viewport for preloading.
 	 * Calling this repeatedly re-checks for links after DOM updates.