swup 4.4.4 → 4.5.1

package/src/modules/Visit.ts

@@ -2,27 +2,8 @@ import type Swup from '../Swup.js';
 import type { Options } from '../Swup.js';
 import type { HistoryAction, HistoryDirection } from './navigate.js';
 
-/** An object holding details about the current visit. */
-export interface Visit {
-	/** A unique ID to identify this visit */
-	id: number;
-	/** The previous page, about to leave */
-	from: VisitFrom;
-	/** The next page, about to enter */
-	to: VisitTo;
-	/** The content containers, about to be replaced */
-	containers: Options['containers'];
-	/** Information about animated page transitions */
-	animation: VisitAnimation;
-	/** What triggered this visit */
-	trigger: VisitTrigger;
-	/** Cache behavior for this visit */
-	cache: VisitCache;
-	/** Browser history behavior on this visit */
-	history: VisitHistory;
-	/** Scroll behavior on this visit */
-	scroll: VisitScroll;
-}
+/** See below for the class Visit {} definition */
+// export interface Visit {}
 
 export interface VisitFrom {
 	/** The URL of the previous page */
@@ -45,6 +26,8 @@ export interface VisitAnimation {
 	wait: boolean;
 	/** Name of a custom animation to run. */
 	name?: string;
+	/** Whether this animation uses the native browser ViewTransition API. Default: `false` */
+	native: boolean;
 	/** Elements on which to add animation classes. Default: `html` element */
 	scope: 'html' | 'containers' | string[];
 	/** Selector for detecting animation timing. Default: `[class*="transition-"]` */
@@ -89,39 +72,95 @@ export interface VisitInitOptions {
 	event?: Event;
 }
 
-/** Create a new visit object. */
-export function createVisit(
-	this: Swup,
-	{ to, from = this.currentPageUrl, hash, el, event }: VisitInitOptions
-): Visit {
-	return {
-		id: Math.random(),
-		from: { url: from },
-		to: { url: to, hash },
-		containers: this.options.containers,
-		animation: {
+/** @internal */
+export const VisitState = {
+	CREATED: 1,
+	QUEUED: 2,
+	STARTED: 3,
+	LEAVING: 4,
+	LOADED: 5,
+	ENTERING: 6,
+	COMPLETED: 7,
+	ABORTED: 8,
+	FAILED: 9
+} as const;
+
+/** @internal */
+export type VisitState = (typeof VisitState)[keyof typeof VisitState];
+
+/** An object holding details about the current visit. */
+export class Visit {
+	/** A unique ID to identify this visit */
+	id: number;
+	/** The current state of this visit @internal */
+	state: VisitState;
+	/** The previous page, about to leave */
+	from: VisitFrom;
+	/** The next page, about to enter */
+	to: VisitTo;
+	/** The content containers, about to be replaced */
+	containers: Options['containers'];
+	/** Information about animated page transitions */
+	animation: VisitAnimation;
+	/** What triggered this visit */
+	trigger: VisitTrigger;
+	/** Cache behavior for this visit */
+	cache: VisitCache;
+	/** Browser history behavior on this visit */
+	history: VisitHistory;
+	/** Scroll behavior on this visit */
+	scroll: VisitScroll;
+
+	constructor(swup: Swup, options: VisitInitOptions) {
+		const { to, from = swup.currentPageUrl, hash, el, event } = options;
+
+		this.id = Math.random();
+		this.state = VisitState.CREATED;
+		this.from = { url: from };
+		this.to = { url: to, hash };
+		this.containers = swup.options.containers;
+		this.animation = {
 			animate: true,
 			wait: false,
 			name: undefined,
-			scope: this.options.animationScope,
-			selector: this.options.animationSelector
-		},
-		trigger: {
-			el,
-			event
-		},
-		cache: {
-			read: this.options.cache,
-			write: this.options.cache
-		},
-		history: {
+			native: swup.options.native,
+			scope: swup.options.animationScope,
+			selector: swup.options.animationSelector
+		};
+		this.trigger = { el, event };
+		this.cache = {
+			read: swup.options.cache,
+			write: swup.options.cache
+		};
+		this.history = {
 			action: 'push',
 			popstate: false,
 			direction: undefined
-		},
-		scroll: {
+		};
+		this.scroll = {
 			reset: true,
 			target: undefined
+		};
+	}
+	/** @internal */
+	advance(state: VisitState) {
+		if (this.state < state) {
+			this.state = state;
 		}
-	};
+	}
+
+	/** @internal */
+	abort() {
+		this.state = VisitState.ABORTED;
+	}
+
+	/** Is this visit done, i.e. completed, failed, or aborted? */
+	get done(): boolean {
+		return this.state >= VisitState.COMPLETED;
+	}
+}
+
+/** Create a new visit object. */
+export function createVisit(this: Swup, options: VisitInitOptions): Visit {
+	return new Visit(this, options);
 }

package/src/modules/animatePageIn.ts

@@ -1,31 +1,32 @@
 import type Swup from '../Swup.js';
 import { nextTick } from '../utils.js';
+import type { Visit } from './Visit.js';
 
 /**
  * Perform the in/enter animation of the next page.
  * @returns Promise<void>
  */
-export const animatePageIn = async function (this: Swup) {
-	if (!this.visit.animation.animate) {
-		return;
-	}
+export const animatePageIn = async function (this: Swup, visit: Visit) {
+	// Check if failed/aborted in the meantime
+	if (visit.done) return;
 
 	const animation = this.hooks.call(
 		'animation:in:await',
+		visit,
 		{ skip: false },
-		async (visit, { skip }) => {
+		(visit, { skip }) => {
 			if (skip) return;
-			await this.awaitAnimations({ selector: visit.animation.selector });
+			return this.awaitAnimations({ selector: visit.animation.selector });
 		}
 	);
 
 	await nextTick();
 
-	await this.hooks.call('animation:in:start', undefined, () => {
+	await this.hooks.call('animation:in:start', visit, undefined, () => {
 		this.classes.remove('is-animating');
 	});
 
 	await animation;
 
-	await this.hooks.call('animation:in:end', undefined);
+	await this.hooks.call('animation:in:end', visit, undefined);
 };

package/src/modules/animatePageOut.ts

@@ -1,30 +1,19 @@
 import type Swup from '../Swup.js';
-import { classify } from '../helpers.js';
+import type { Visit } from './Visit.js';
 
 /**
  * Perform the out/leave animation of the current page.
  * @returns Promise<void>
  */
-export const animatePageOut = async function (this: Swup) {
-	if (!this.visit.animation.animate) {
-		await this.hooks.call('animation:skip', undefined);
-		return;
-	}
-
-	await this.hooks.call('animation:out:start', undefined, (visit) => {
-		this.classes.add('is-changing', 'is-leaving', 'is-animating');
-		if (visit.history.popstate) {
-			this.classes.add('is-popstate');
-		}
-		if (visit.animation.name) {
-			this.classes.add(`to-${classify(visit.animation.name)}`);
-		}
+export const animatePageOut = async function (this: Swup, visit: Visit) {
+	await this.hooks.call('animation:out:start', visit, undefined, () => {
+		this.classes.add('is-changing', 'is-animating', 'is-leaving');
 	});
 
-	await this.hooks.call('animation:out:await', { skip: false }, async (visit, { skip }) => {
+	await this.hooks.call('animation:out:await', visit, { skip: false }, (visit, { skip }) => {
 		if (skip) return;
-		await this.awaitAnimations({ selector: visit.animation.selector });
+		return this.awaitAnimations({ selector: visit.animation.selector });
 	});
 
-	await this.hooks.call('animation:out:end', undefined);
+	await this.hooks.call('animation:out:end', visit, undefined);
 };

package/src/modules/fetchPage.ts

@@ -1,5 +1,6 @@
 import type Swup from '../Swup.js';
 import { Location } from '../helpers.js';
+import type { Visit } from './Visit.js';
 
 /** A page object as used by swup and its cache. */
 export interface PageData {
@@ -17,6 +18,8 @@ export interface FetchOptions extends Omit<RequestInit, 'cache'> {
 	body?: string | FormData | URLSearchParams;
 	/** The request timeout in milliseconds. */
 	timeout?: number;
+	/** Optional visit object with additional context. @internal */
+	visit?: Visit;
 }
 
 export class FetchError extends Error {
@@ -47,6 +50,7 @@ export async function fetchPage(
 ): Promise<PageData> {
 	url = Location.fromUrl(url).url;
 
+	const { visit = this.visit } = options;
 	const headers = { ...this.options.requestHeaders, ...options.headers };
 	const timeout = options.timeout ?? this.options.timeout;
 	const controller = new AbortController();
@@ -67,6 +71,7 @@ export async function fetchPage(
 	try {
 		response = await this.hooks.call(
 			'fetch:request',
+			visit,
 			{ url, options },
 			(visit, { url, options }) => fetch(url, options)
 		);
@@ -75,14 +80,11 @@ export async function fetchPage(
 		}
 	} catch (error) {
 		if (timedOut) {
-			this.hooks.call('fetch:timeout', { url });
+			this.hooks.call('fetch:timeout', visit, { url });
 			throw new FetchError(`Request timed out: ${url}`, { url, timedOut });
 		}
 		if ((error as Error)?.name === 'AbortError' || signal.aborted) {
-			throw new FetchError(`Request aborted: ${url}`, {
-				url: url,
-				aborted: true
-			});
+			throw new FetchError(`Request aborted: ${url}`, { url, aborted: true });
 		}
 		throw error;
 	}
@@ -91,7 +93,7 @@ export async function fetchPage(
 	const html = await response.text();
 
 	if (status === 500) {
-		this.hooks.call('fetch:error', { status, response, url: responseUrl });
+		this.hooks.call('fetch:error', visit, { status, response, url: responseUrl });
 		throw new FetchError(`Server error: ${responseUrl}`, { status, url: responseUrl });
 	}
 
@@ -104,11 +106,7 @@ export async function fetchPage(
 	const page = { url: finalUrl, html };
 
 	// Write to cache for safe methods and non-redirects
-	if (
-		this.visit.cache.write &&
-		(!options.method || options.method === 'GET') &&
-		url === finalUrl
-	) {
+	if (visit.cache.write && (!options.method || options.method === 'GET') && url === finalUrl) {
 		this.cache.set(page.url, page);
 	}
 

package/src/modules/navigate.ts

@@ -1,7 +1,13 @@
 import type Swup from '../Swup.js';
-import { createHistoryRecord, updateHistoryRecord, getCurrentUrl, Location } from '../helpers.js';
 import { FetchError, type FetchOptions, type PageData } from './fetchPage.js';
-import type { VisitInitOptions } from './Visit.js';
+import { type VisitInitOptions, type Visit, VisitState } from './Visit.js';
+import {
+	createHistoryRecord,
+	updateHistoryRecord,
+	getCurrentUrl,
+	Location,
+	classify
+} from '../helpers.js';
 
 export type HistoryAction = 'push' | 'replace';
 export type HistoryDirection = 'forwards' | 'backwards';
@@ -38,13 +44,14 @@ export function navigate(
 
 	// Check if the visit should be ignored
 	if (this.shouldIgnoreVisit(url, { el: init.el, event: init.event })) {
-		window.location.href = url;
+		window.location.assign(url);
 		return;
 	}
 
 	const { url: to, hash } = Location.fromUrl(url);
-	this.visit = this.createVisit({ ...init, to, hash });
-	this.performNavigation(options);
+
+	const visit = this.createVisit({ ...init, to, hash });
+	this.performNavigation(visit, options);
 }
 
 /**
@@ -60,12 +67,24 @@ export function navigate(
  */
 export async function performNavigation(
 	this: Swup,
+	visit: Visit,
 	options: NavigationOptions & FetchOptions = {}
 ): Promise<void> {
+	if (this.navigating) {
+		if (this.visit.state >= VisitState.ENTERING) {
+			// Currently navigating and content already loaded? Finish and queue
+			visit.state = VisitState.QUEUED;
+			this.onVisitEnd = () => this.performNavigation(visit, options);
+			return;
+		} else {
+			// Currently navigating and content not loaded? Abort running visit
+			await this.hooks.call('visit:abort', this.visit, undefined);
+			this.visit.state = VisitState.ABORTED;
+		}
+	}
+
 	this.navigating = true;
-	// Save this localy to a) allow ignoring the visit if a new one was started in the meantime
-	// and b) avoid unintended modifications to any newer visits
-	const visit = this.visit;
+	this.visit = visit;
 
 	const { el } = visit.trigger;
 	options.referrer = options.referrer || this.currentPageUrl;
@@ -102,10 +121,11 @@ export async function performNavigation(
 	delete options.cache;
 
 	try {
-		await this.hooks.call('visit:start', undefined);
+		await this.hooks.call('visit:start', visit, undefined);
+		visit.state = VisitState.STARTED;
 
 		// Begin loading page
-		const pagePromise = this.hooks.call('page:load', { options }, async (visit, args) => {
+		const page = this.hooks.call('page:load', visit, { options }, async (visit, args) => {
 			// Read from cache
 			let cachedPage: PageData | undefined;
 			if (visit.cache.read) {
@@ -118,6 +138,12 @@ export async function performNavigation(
 			return args.page;
 		});
 
+		// When page loaded: mark visit as loaded, save html into visit object
+		page.then(({ html }) => {
+			visit.advance(VisitState.LOADED);
+			visit.to.html = html;
+		});
+
 		// Create/update history record if this is not a popstate call or leads to the same URL
 		if (!visit.history.popstate) {
 			// Add the hash directly from the trigger element
@@ -132,58 +158,76 @@ export async function performNavigation(
 
 		this.currentPageUrl = getCurrentUrl();
 
+		// Mark visit type with classes
+		if (visit.history.popstate) {
+			this.classes.add('is-popstate');
+		}
+		if (visit.animation.name) {
+			this.classes.add(`to-${classify(visit.animation.name)}`);
+		}
+
 		// Wait for page before starting to animate out?
 		if (visit.animation.wait) {
-			const { html } = await pagePromise;
-			visit.to.html = html;
+			await page;
 		}
 
-		// perform the actual transition: animate and replace content
-		await this.hooks.call('visit:transition', undefined, async (visit) => {
-			// Start leave animation
-			const animationPromise = this.animatePageOut();
+		// Check if failed/aborted in the meantime
+		if (visit.done) return;
 
-			// Wait for page to load and leave animation to finish
-			const [page] = await Promise.all([pagePromise, animationPromise]);
-
-			// Abort if another visit was started in the meantime
-			if (visit.id !== this.visit.id) {
-				return false;
+		// Perform the actual transition: animate and replace content
+		await this.hooks.call('visit:transition', visit, undefined, async () => {
+			// No animation? Just await page and render
+			if (!visit.animation.animate) {
+				await this.hooks.call('animation:skip', undefined);
+				await this.renderPage(visit, await page);
+				return;
 			}
 
-			// Render page: replace content and scroll to top/fragment
-			await this.renderPage(page);
-
-			// Wait for enter animation
-			await this.animatePageIn();
-
-			return true;
+			// Animate page out, render page, animate page in
+			visit.advance(VisitState.LEAVING);
+			await this.animatePageOut(visit);
+			if (visit.animation.native && document.startViewTransition) {
+				await document.startViewTransition(
+					async () => await this.renderPage(visit, await page)
+				).finished;
+			} else {
+				await this.renderPage(visit, await page);
+			}
+			await this.animatePageIn(visit);
 		});
 
-		// Finalize visit
-		await this.hooks.call('visit:end', undefined, () => this.classes.clear());
+		// Check if failed/aborted in the meantime
+		if (visit.done) return;
 
-		// Reset visit info after finish?
-		// if (visit.to && this.isSameResolvedUrl(visit.to.url, requestedUrl)) {
-		// 	this.visit = this.createVisit({ to: undefined });
-		// }
+		// Finalize visit
+		await this.hooks.call('visit:end', visit, undefined, () => this.classes.clear());
+		visit.state = VisitState.COMPLETED;
 		this.navigating = false;
+
+		/** Run eventually queued function */
+		if (this.onVisitEnd) {
+			this.onVisitEnd();
+			this.onVisitEnd = undefined;
+		}
 	} catch (error) {
 		// Return early if error is undefined or signals an aborted request
 		if (!error || (error as FetchError)?.aborted) {
+			visit.state = VisitState.ABORTED;
 			return;
 		}
 
-		// Log to console as we swallow almost all hook errors
+		visit.state = VisitState.FAILED;
+
+		// Log to console
 		console.error(error);
 
-		// Rewrite `skipPopStateHandling` to redirect manually when `history.go` is processed
+		// Remove current history entry, then load requested url in browser
 		this.options.skipPopStateHandling = () => {
-			window.location.href = visit.to.url + visit.to.hash;
+			window.location.assign(visit.to.url + visit.to.hash);
 			return true;
 		};
 
 		// Go back to the actual page we're still at
-		window.history.go(-1);
+		window.history.back();
 	}
 }

package/src/modules/renderPage.ts

@@ -1,39 +1,40 @@
 import { updateHistoryRecord, getCurrentUrl, classify } from '../helpers.js';
 import type Swup from '../Swup.js';
 import type { PageData } from './fetchPage.js';
+import { VisitState, type Visit } from './Visit.js';
 
 /**
  * Render the next page: replace the content and update scroll position.
  */
-export const renderPage = async function (this: Swup, page: PageData): Promise<void> {
-	const { url, html } = page;
+export const renderPage = async function (this: Swup, visit: Visit, page: PageData): Promise<void> {
+	// Check if failed/aborted in the meantime
+	if (visit.done) return;
 
-	this.classes.remove('is-leaving');
+	visit.advance(VisitState.ENTERING);
+
+	const { url } = page;
 
 	// update state if the url was redirected
 	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
 		updateHistoryRecord(url);
 		this.currentPageUrl = getCurrentUrl();
-		this.visit.to.url = this.currentPageUrl;
-	}
-
-	// only add for animated page loads
-	if (this.visit.animation.animate) {
-		this.classes.add('is-rendering');
+		visit.to.url = this.currentPageUrl;
 	}
 
-	// save html into visit context for easier retrieval
-	this.visit.to.html = html;
-
 	// replace content: allow handlers and plugins to overwrite paga data and containers
-	await this.hooks.call('content:replace', { page }, (visit, { page }) => {
+	await this.hooks.call('content:replace', visit, { page }, (visit, { page }) => {
+		this.classes.remove('is-leaving');
+		// only add for animated page loads
+		if (visit.animation.animate) {
+			this.classes.add('is-rendering');
+		}
 		const success = this.replaceContent(page, { containers: visit.containers });
 		if (!success) {
 			throw new Error('[swup] Container mismatch, aborting');
 		}
 		if (visit.animation.animate) {
 			// Make sure to add these classes to new containers as well
-			this.classes.add('is-animating', 'is-changing', 'is-rendering');
+			this.classes.add('is-changing', 'is-animating', 'is-rendering');
 			if (visit.animation.name) {
 				this.classes.add(`to-${classify(visit.animation.name)}`);
 			}
@@ -41,10 +42,9 @@ export const renderPage = async function (this: Swup, page: PageData): Promise<v
 	});
 
 	// scroll into view: either anchor or top of page
-	// @ts-ignore: not returning a promise is intentional to allow users to pause in handler
-	await this.hooks.call('content:scroll', undefined, () => {
-		return this.scrollToContent();
+	await this.hooks.call('content:scroll', visit, undefined, () => {
+		return this.scrollToContent(visit);
 	});
 
-	await this.hooks.call('page:view', { url: this.currentPageUrl, title: document.title });
+	await this.hooks.call('page:view', visit, { url: this.currentPageUrl, title: document.title });
 };

package/src/modules/replaceContent.ts

@@ -53,5 +53,6 @@ export const replaceContent = function (
 		}
 	});
 
+	// Return true if all containers were replaced
 	return replaced.length === containers.length;
 };

package/src/modules/scrollToContent.ts

@@ -1,19 +1,21 @@
 import type Swup from '../Swup.js';
+import type { Visit } from './Visit.js';
 
 /**
  * Update the scroll position after page render.
  * @returns Promise<boolean>
  */
-export const scrollToContent = function (this: Swup): boolean {
+export const scrollToContent = function (this: Swup, visit: Visit): boolean {
 	const options: ScrollIntoViewOptions = { behavior: 'auto' };
-	const { target, reset } = this.visit.scroll;
-	const scrollTarget = target ?? this.visit.to.hash;
+	const { target, reset } = visit.scroll;
+	const scrollTarget = target ?? visit.to.hash;
 
 	let scrolled = false;
 
 	if (scrollTarget) {
 		scrolled = this.hooks.callSync(
 			'scroll:anchor',
+			visit,
 			{ hash: scrollTarget, options },
 			(visit, { hash, options }) => {
 				const anchor = this.getAnchorElement(hash);
@@ -26,7 +28,7 @@ export const scrollToContent = function (this: Swup): boolean {
 	}
 
 	if (reset && !scrolled) {
-		scrolled = this.hooks.callSync('scroll:top', { options }, (visit, { options }) => {
+		scrolled = this.hooks.callSync('scroll:top', visit, { options }, (visit, { options }) => {
 			window.scrollTo({ top: 0, left: 0, ...options });
 			return true;
 		});

package/dist/types/helpers/createHistoryRecord.d.ts

@@ -1,10 +0,0 @@
-export interface HistoryState {
-    url: string;
-    source: 'swup';
-    random: number;
-    index?: number;
-    [key: string]: unknown;
-}
-/** Create a new history record with a custom swup identifier. */
-export declare const createHistoryRecord: (url: string, customData?: Record<string, unknown>) => void;
-//# sourceMappingURL=createHistoryRecord.d.ts.map

package/dist/types/helpers/createHistoryRecord.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createHistoryRecord.d.ts","sourceRoot":"","sources":["../../../src/helpers/createHistoryRecord.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,QAC1B,MAAM,eACC,OAAO,MAAM,EAAE,OAAO,CAAC,KACjC,IASF,CAAC"}

package/dist/types/helpers/updateHistoryRecord.d.ts

@@ -1,3 +0,0 @@
-/** Update the current history record with a custom swup identifier. */
-export declare const updateHistoryRecord: (url?: string | null, customData?: Record<string, unknown>) => void;
-//# sourceMappingURL=updateHistoryRecord.d.ts.map

package/dist/types/helpers/updateHistoryRecord.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"updateHistoryRecord.d.ts","sourceRoot":"","sources":["../../../src/helpers/updateHistoryRecord.ts"],"names":[],"mappings":"AAGA,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,SAC1B,MAAM,GAAG,IAAI,eACN,OAAO,MAAM,EAAE,OAAO,CAAC,KACjC,IAWF,CAAC"}

package/src/helpers/createHistoryRecord.ts

@@ -1,24 +0,0 @@
-import { getCurrentUrl } from './getCurrentUrl.js';
-
-export interface HistoryState {
-	url: string;
-	source: 'swup';
-	random: number;
-	index?: number;
-	[key: string]: unknown;
-}
-
-/** Create a new history record with a custom swup identifier. */
-export const createHistoryRecord = (
-	url: string,
-	customData: Record<string, unknown> = {}
-): void => {
-	url = url || getCurrentUrl({ hash: true });
-	const data: HistoryState = {
-		url,
-		random: Math.random(),
-		source: 'swup',
-		...customData
-	};
-	history.pushState(data, '', url);
-};