swup 4.4.4 → 4.5.0

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';
@@ -43,8 +49,9 @@ export function navigate(
 	}
 
 	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,48 +158,66 @@ 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;
 		}
 
+		visit.state = VisitState.FAILED;
+
 		// Log to console as we swallow almost all hook errors
 		console.error(error);
 

package/src/modules/renderPage.ts

@@ -1,12 +1,18 @@
 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;
+
+	visit.advance(VisitState.ENTERING);
+
+	const { url } = page;
 
 	this.classes.remove('is-leaving');
 
@@ -14,26 +20,23 @@ export const renderPage = async function (this: Swup, page: PageData): Promise<v
 	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
 		updateHistoryRecord(url);
 		this.currentPageUrl = getCurrentUrl();
-		this.visit.to.url = this.currentPageUrl;
+		visit.to.url = this.currentPageUrl;
 	}
 
 	// only add for animated page loads
-	if (this.visit.animation.animate) {
+	if (visit.animation.animate) {
 		this.classes.add('is-rendering');
 	}
 
-	// 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 }) => {
 		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 +44,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);
-};

package/src/helpers/updateHistoryRecord.ts

@@ -1,19 +0,0 @@
-import type { HistoryState } from './createHistoryRecord.js';
-import { getCurrentUrl } from './getCurrentUrl.js';
-
-/** Update the current history record with a custom swup identifier. */
-export const updateHistoryRecord = (
-	url: string | null = null,
-	customData: Record<string, unknown> = {}
-): void => {
-	url = url || getCurrentUrl({ hash: true });
-	const state = (history.state as HistoryState) || {};
-	const data: HistoryState = {
-		...state,
-		url,
-		random: Math.random(),
-		source: 'swup',
-		...customData
-	};
-	history.replaceState(data, '', url);
-};