swup 4.6.1 → 4.8.0

package/src/modules/navigate.ts

@@ -1,13 +1,8 @@
 import type Swup from '../Swup.js';
 import { FetchError, type FetchOptions, type PageData } from './fetchPage.js';
 import { type VisitInitOptions, type Visit, VisitState } from './Visit.js';
-import {
-	createHistoryRecord,
-	updateHistoryRecord,
-	getCurrentUrl,
-	Location,
-	classify
-} from '../helpers.js';
+import { createHistoryRecord, updateHistoryRecord, Location, classify } from '../helpers.js';
+import { getContextualAttr } from '../utils.js';
 
 export type HistoryAction = 'push' | 'replace';
 export type HistoryDirection = 'forwards' | 'backwards';
@@ -24,6 +19,8 @@ type NavigationOptions = {
 	history?: HistoryAction;
 	/** Whether this visit should read from or write to the cache. */
 	cache?: CacheControl;
+	/** Custom metadata associated with this visit. */
+	meta?: Record<string, unknown>;
 };
 
 /**
@@ -88,7 +85,7 @@ export async function performNavigation(
 	this.visit = visit;
 
 	const { el } = visit.trigger;
-	options.referrer = options.referrer || this.currentPageUrl;
+	options.referrer = options.referrer || this.location.url;
 
 	if (options.animate === false) {
 		visit.animation.animate = false;
@@ -100,17 +97,20 @@ export async function performNavigation(
 	}
 
 	// Get history action from option or attribute on trigger element
-	const history = options.history || el?.getAttribute('data-swup-history') || undefined;
-	if (history && ['push', 'replace'].includes(history)) {
+	const history = options.history || getContextualAttr(el, 'data-swup-history');
+	if (typeof history === 'string' && ['push', 'replace'].includes(history)) {
 		visit.history.action = history as HistoryAction;
 	}
 
 	// Get custom animation name from option or attribute on trigger element
-	const animation = options.animation || el?.getAttribute('data-swup-animation') || undefined;
-	if (animation) {
+	const animation = options.animation || getContextualAttr(el, 'data-swup-animation');
+	if (typeof animation === 'string') {
 		visit.animation.name = animation;
 	}
 
+	// Get custom metadata from option
+	visit.meta = options.meta || {};
+
 	// Sanitize cache option
 	if (typeof options.cache === 'object') {
 		visit.cache.read = options.cache.read ?? visit.cache.read;
@@ -123,6 +123,7 @@ export async function performNavigation(
 
 	try {
 		await this.hooks.call('visit:start', visit, undefined);
+
 		visit.state = VisitState.STARTED;
 
 		// Begin loading page
@@ -150,18 +151,16 @@ export async function performNavigation(
 		});
 
 		// Create/update history record if this is not a popstate call or leads to the same URL
+		const newUrl = visit.to.url + visit.to.hash;
 		if (!visit.history.popstate) {
-			// Add the hash directly from the trigger element
-			const newUrl = visit.to.url + visit.to.hash;
-			if (visit.history.action === 'replace' || visit.to.url === this.currentPageUrl) {
+			if (visit.history.action === 'replace' || visit.to.url === this.location.url) {
 				updateHistoryRecord(newUrl);
 			} else {
 				this.currentHistoryIndex++;
 				createHistoryRecord(newUrl, { index: this.currentHistoryIndex });
 			}
 		}
-
-		this.currentPageUrl = getCurrentUrl();
+		this.location = Location.fromUrl(newUrl);
 
 		// Mark visit type with classes
 		if (visit.history.popstate) {

package/src/modules/renderPage.ts

@@ -1,4 +1,4 @@
-import { updateHistoryRecord, getCurrentUrl, classify } from '../helpers.js';
+import { updateHistoryRecord, getCurrentUrl, classify, Location } from '../helpers.js';
 import type Swup from '../Swup.js';
 import type { PageData } from './fetchPage.js';
 import { VisitState, type Visit } from './Visit.js';
@@ -17,8 +17,9 @@ export const renderPage = async function (this: Swup, visit: Visit, page: PageDa
 	// update state if the url was redirected
 	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
 		updateHistoryRecord(url);
-		this.currentPageUrl = getCurrentUrl();
-		visit.to.url = this.currentPageUrl;
+		this.location = Location.fromUrl(url);
+		visit.to.url = this.location.url;
+		visit.to.hash = this.location.hash;
 	}
 
 	// replace content: allow handlers and plugins to overwrite paga data and containers
@@ -46,5 +47,5 @@ export const renderPage = async function (this: Swup, visit: Visit, page: PageDa
 		return this.scrollToContent(visit);
 	});
 
-	await this.hooks.call('page:view', visit, { url: this.currentPageUrl, title: document.title });
+	await this.hooks.call('page:view', visit, { url: this.location.url, title: document.title });
 };

package/src/utils/index.ts

@@ -52,3 +52,17 @@ export function forceReflow(element?: HTMLElement): void {
 	element = element || document.body;
 	element?.getBoundingClientRect();
 }
+
+/**
+ * Read data attribute from closest element with that attribute.
+ *
+ * Returns `undefined` if no element is found or attribute is missing.
+ * Returns `true` if attribute is present without a value.
+ */
+export function getContextualAttr(
+	el: Element | undefined,
+	attr: string
+): string | boolean | undefined {
+	const target = el?.closest(`[${attr}]`);
+	return target?.hasAttribute(attr) ? target?.getAttribute(attr) || true : undefined;
+}