feat(swup): upgrade to swup 4 with Astro integration

astro.config.mjs

@@ -3,6 +3,7 @@ import preact from '@astrojs/preact';
 import prefetch from '@astrojs/prefetch';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
+import swup from '@swup/astro';
 import { astroImageTools } from 'astro-imagetools';
 import pagefind from 'astro-pagefind';
 import webmanifest from 'astro-webmanifest';
@@ -31,6 +32,7 @@ export default defineConfig({
 		preact({
 			compat: true,
 		}),
+		swup({ globalInstance: true }),
 		astroImageTools,
 		prefetch(),
 		pagefind(),

package.json

@@ -59,7 +59,7 @@
 		"reading-time": "^1.5.0",
 		"sal.js": "^0.8.5",
 		"sharp": "^0.33.2",
-		"swup": "^3.1.1",
+		"swup": "^4.6.0",
 		"tailwindcss": "^3.4.1",
 		"unist-util-visit": "^5.0.0"
 	},

src/components/Scripts.astro

@@ -14,8 +14,11 @@ import '../styles/sal.css';
 
 	declare const sal: any;
 
+	const hasWindow =
+		'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
+
 	const swup = new Swup({
-		ignoreVisit: (url, { el } = {}) => el?.closest('[data-pagefind-ui] a'),
+		containers: ['#swup'],
 		plugins: [
 			new SwupFadeTheme(),
 			new SwupHeadPlugin(),
@@ -34,7 +37,7 @@ import '../styles/sal.css';
 		],
 	});
 
-	if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {
+	if (hasWindow) {
 		if (typeof sal !== 'undefined') {
 			sal({
 				threshold: 0.1,
@@ -43,17 +46,19 @@ import '../styles/sal.css';
 	}
 
 	// Register scripts after swup page transition
-	swup.on('pageView', () => {
+	swup.hooks.on('page:view', () => {
+		setActiveLink();
+		setUpLink();
+		setEmailLink();
+		setSearchModalLink();
+		setSearchLink();
+	});
+
+	swup.hooks.on('visit:end', () => {
 		if (typeof sal !== 'undefined') {
 			sal({
 				threshold: 0.1,
 			});
-
-			setActiveLink();
-			setUpLink();
-			setEmailLink();
-			setSearchModalLink();
-			setSearchLink();
 		}
 	});
 
@@ -88,7 +93,7 @@ import '../styles/sal.css';
 		const openDialogLink = document.getElementById('search-link');
 		const closeDialogLink = document.getElementById('close-search');
 
-		dialog.addEventListener('close', () => {
+		dialog?.addEventListener('close', () => {
 			body.style.overflow = 'auto';
 		});