Respect swup link selector for preloaded links

src/index.ts

@@ -7,7 +7,7 @@ import type {
 	PageData,
 	HookDefaultHandler
 } from 'swup';
-import { deviceSupportsHover, networkSupportsPreloading, whenIdle } from './util.js';
+import { deviceSupportsHover, networkSupportsPreloading, whenIdle, isAnchorElement } from './util.js';
 import createQueue, { Queue } from './queue.js';
 import createObserver, { Observer } from './observer.js';
 
@@ -25,14 +25,16 @@ declare module 'swup' {
 		preloadLinks?: () => void;
 	}
 	export interface HookDefinitions {
-		'link:hover': { el: HTMLAnchorElement; event: DelegateEvent };
+		'link:hover': { el: HTMLAnchorElement | SVGAElement; event: DelegateEvent };
 		'page:preload': { page?: PageData };
 	}
 	export interface HookReturnValues {
 		'page:preload': Promise<PageData>;
 	}
 }
 
+export type AnchorElement = HTMLAnchorElement | SVGAElement;
+
 type VisibleLinkPreloadOptions = {
 	/** Enable preloading of links entering the viewport */
 	enabled: boolean;
@@ -43,7 +45,7 @@ type VisibleLinkPreloadOptions = {
 	/** Containers to look for links in */
 	containers: string[];
 	/** Callback for opting out selected elements from preloading */
-	ignore: (el: HTMLAnchorElement) => boolean;
+	ignore: (el: AnchorElement) => boolean;
 };
 
 export type PluginOptions = {
@@ -194,7 +196,7 @@ export default class SwupPreloadPlugin extends Plugin {
 		if (!deviceSupportsHover()) return;
 
 		const el = event.delegateTarget;
-		if (!(el instanceof HTMLAnchorElement)) return;
+		if (!isAnchorElement(el)) return;
 
 		this.swup.hooks.callSync('link:hover', undefined, { el, event });
 		this.preload(el, { priority: true });
@@ -208,7 +210,7 @@ export default class SwupPreloadPlugin extends Plugin {
 		if (deviceSupportsHover()) return;
 
 		const el = event.delegateTarget;
-		if (!(el instanceof HTMLAnchorElement)) return;
+		if (!isAnchorElement(el)) return;
 
 		this.preload(el, { priority: true });
 	};
@@ -218,7 +220,7 @@ export default class SwupPreloadPlugin extends Plugin {
 	 */
 	protected onFocus: DelegateEventHandler = (event) => {
 		const el = event.delegateTarget;
-		if (!(el instanceof HTMLAnchorElement)) return;
+		if (!isAnchorElement(el)) return;
 
 		this.preload(el, { priority: true });
 	};
@@ -236,26 +238,26 @@ export default class SwupPreloadPlugin extends Plugin {
 	 */
 	async preload(url: string, options?: PreloadOptions): Promise<PageData | void>;
 	async preload(urls: string[], options?: PreloadOptions): Promise<(PageData | void)[]>;
-	async preload(el: HTMLAnchorElement, options?: PreloadOptions): Promise<PageData | void>;
-	async preload(els: HTMLAnchorElement[], options?: PreloadOptions): Promise<(PageData | void)[]>;
+	async preload(el: AnchorElement, options?: PreloadOptions): Promise<PageData | void>;
+	async preload(els: AnchorElement[], options?: PreloadOptions): Promise<(PageData | void)[]>;
 	async preload(
-		input: string | HTMLAnchorElement,
+		input: string | AnchorElement,
 		options?: PreloadOptions
 	): Promise<PageData | void>;
 	async preload(
-		input: string | string[] | HTMLAnchorElement | HTMLAnchorElement[],
+		input: string | string[] | AnchorElement | AnchorElement[],
 		options: PreloadOptions = {}
 	): Promise<PageData | (PageData | void)[] | void> {
 		let url: string;
-		let el: HTMLAnchorElement | undefined;
+		let el: AnchorElement | undefined;
 		const priority = options.priority ?? false;
 
 		// Allow passing in array of urls or elements
 		if (Array.isArray(input)) {
 			return Promise.all(input.map((link) => this.preload(link)));
 		}
 		// Allow passing in an anchor element
-		else if (input instanceof HTMLAnchorElement) {
+		else if (isAnchorElement(input)) {
 			el = input;
 			({ href: url } = Location.fromElement(input));
 		}
@@ -268,6 +270,9 @@ export default class SwupPreloadPlugin extends Plugin {
 			return;
 		}
 
+		// Return if no url passed in
+		if (!url) return;
+
 		// Already preloading? Return existing promise
 		if (this.preloadPromises.has(url)) {
 			return this.preloadPromises.get(url);
@@ -307,7 +312,7 @@ export default class SwupPreloadPlugin extends Plugin {
 	preloadLinks(): void {
 		whenIdle(() => {
 			const selector = 'a[data-swup-preload], [data-swup-preload-all] a';
-			const links = Array.from(document.querySelectorAll<HTMLAnchorElement>(selector));
+			const links = Array.from(document.querySelectorAll<AnchorElement>(selector));
 			links.forEach((el) => this.preload(el));
 		});
 	}
@@ -350,13 +355,15 @@ export default class SwupPreloadPlugin extends Plugin {
 		}
 
 		const { threshold, delay, containers } = this.options.preloadVisibleLinks;
-		const callback = (el: HTMLAnchorElement) => this.preload(el);
-		const filter = (el: HTMLAnchorElement) => {
+		const callback = (el: AnchorElement) => this.preload(el);
+		const filter = (el: AnchorElement) => {
 			/** First, run the custom callback */
 			if (this.options.preloadVisibleLinks.ignore(el)) return false;
 			/** Second, run all default checks */
-			return this.shouldPreload(el.href, { el });
+			const { href } = Location.fromElement(el);
+			return this.shouldPreload(href, { el });
 		};
+
 		this.preloadObserver = createObserver({ threshold, delay, containers, callback, filter });
 		this.preloadObserver.start();
 	}
@@ -373,7 +380,7 @@ export default class SwupPreloadPlugin extends Plugin {
 	/**
 	 * Check whether a URL and/or element should trigger a preload.
 	 */
-	protected shouldPreload(location: string, { el }: { el?: HTMLAnchorElement } = {}): boolean {
+	protected shouldPreload(location: string, { el }: { el?: AnchorElement } = {}): boolean {
 		const { url, href } = Location.fromUrl(location);
 
 		// Network too slow?

src/observer.ts

@@ -1,3 +1,6 @@
+import { Location } from 'swup';
+
+import { AnchorElement } from './index.js';
 import { whenIdle } from './util.js';
 
 export type Observer = {
@@ -16,33 +19,34 @@ export default function createObserver({
 	threshold: number;
 	delay: number;
 	containers: string[];
-	callback: (el: HTMLAnchorElement) => void;
-	filter: (el: HTMLAnchorElement) => boolean;
+	callback: (el: AnchorElement) => void;
+	filter: (el: AnchorElement) => boolean;
 }): Observer {
-	const visibleLinks = new Map<string, Set<HTMLAnchorElement>>();
+	const visibleLinks = new Map<string, Set<AnchorElement>>();
 
 	// Create an observer to add/remove links when they enter the viewport
 	const observer = new IntersectionObserver(
 		(entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
-					add(entry.target as HTMLAnchorElement);
+					add(entry.target as AnchorElement);
 				} else {
-					remove(entry.target as HTMLAnchorElement);
+					remove(entry.target as AnchorElement);
 				}
 			});
 		},
 		{ threshold }
 	);
 
 	// Preload link if it is still visible after a configurable timeout
-	const add = (el: HTMLAnchorElement) => {
-		const elements = visibleLinks.get(el.href) ?? new Set();
-		visibleLinks.set(el.href, elements);
+	const add = (el: AnchorElement) => {
+		const { href } = Location.fromElement(el);
+		const elements = visibleLinks.get(href) ?? new Set();
+		visibleLinks.set(href, elements);
 		elements.add(el);
 
 		setTimeout(() => {
-			const elements = visibleLinks.get(el.href);
+			const elements = visibleLinks.get(href);
 			if (elements?.size) {
 				callback(el);
 				observer.unobserve(el);
@@ -52,16 +56,19 @@ export default function createObserver({
 	};
 
 	// Remove link from list of visible links
-	const remove = (el: HTMLAnchorElement) => visibleLinks.get(el.href)?.delete(el);
+	const remove = (el: AnchorElement) => {
+		const { href } = Location.fromElement(el);
+		visibleLinks.get(href)?.delete(el);
+	};
 
 	// Clear list of visible links
 	const clear = () => visibleLinks.clear();
 
 	// Scan DOM for preloadable links and start observing their visibility
 	const observe = () => {
 		whenIdle(() => {
-			const selector = containers.map((root) => `${root} a[href]`).join(', ');
-			const links = Array.from(document.querySelectorAll<HTMLAnchorElement>(selector));
+			const selector = containers.map((root) => `${root} a[href], ${root} a[*|href]`).join(', ');
+			const links = Array.from(document.querySelectorAll<AnchorElement>(selector));
 			links.filter((el) => filter(el)).forEach((el) => observer.observe(el));
 		});
 	};

src/util.ts

@@ -21,6 +21,13 @@ export function deviceSupportsHover() {
 	return window.matchMedia('(hover: hover)').matches;
 }
 
+/**
+ * Is this element an anchor element?
+ */
+export function isAnchorElement(element: unknown): element is HTMLAnchorElement | SVGAElement {
+	return !!element && (element instanceof HTMLAnchorElement || element instanceof SVGAElement);
+}
+
 /**
  * Safe requestIdleCallback function that falls back to setTimeout
  */

tests/fixtures/link-types.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Link types</title>
+		<link rel="stylesheet" href="/assets/style.css" />
+	</head>
+	<body>
+		<main id="swup" class="transition-main">
+			<h1>Link types</h1>
+
+			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+			<ul>
+				<li><a href="/page-1.html">Page 1</a></li>
+			</ul>
+
+			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+				<a xlink:href="/page-2.html">
+					<text x="10" y="10" font-size="2">SVG link to page</text>
+				</a>
+			</svg>
+
+			<img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" usemap="#imagemap" width="100" height="100" />
+			<map name="imagemap">
+					<area shape="rect" coords="0,0,100,100" href="/page-3.html" alt="Map link to page" />
+			</map>
+		</main>
+		<script src="/dist/swup.umd.js"></script>
+		<script src="/dist/index.umd.js"></script>
+		<script>
+			window._swup = new Swup({
+				linkSelector: 'a[href], a[*|href]',
+				plugins: [new SwupPreloadPlugin()]
+			});
+		</script>
+	</body>
+</html>

tests/functional/preload-plugin.spec.ts

@@ -93,6 +93,14 @@ test.describe('active links', () => {
 		await expectSwupToHaveCacheEntry(page, '/page-2.html');
 		await expectSwupToHaveCacheEntry(page, '/page-3.html');
 	});
+
+	test('preloads svg links', async ({ page }) => {
+		await page.goto('/link-types.html');
+		await waitForSwup(page);
+		await expectSwupNotToHaveCacheEntry(page, '/page-2.html');
+		await page.focus('svg a', { strict: true });
+		await expectSwupToHaveCacheEntry(page, '/page-2.html');
+	});
 });
 
 test.describe('visible links', () => {