swup 4.3.2 → 4.3.4

package/src/Swup.ts

@@ -90,7 +90,7 @@ export default class Swup {
 	/** URL of the currently visible page */
 	currentPageUrl: string = getCurrentUrl();
 	/** Index of the current history entry */
-	protected currentHistoryIndex = 1;
+	protected currentHistoryIndex: number;
 	/** Delegated event subscription handle */
 	protected clickDelegate?: DelegateEventUnsubscribe;
 
@@ -144,6 +144,8 @@ export default class Swup {
 		this.hooks = new Hooks(this);
 		this.visit = this.createVisit({ to: '' });
 
+		this.currentHistoryIndex = (history.state as HistoryState)?.index ?? 1;
+
 		if (!this.checkRequirements()) {
 			return;
 		}
@@ -181,8 +183,10 @@ export default class Swup {
 		// Mount plugins
 		this.options.plugins.forEach((plugin) => this.use(plugin));
 
-		// Modify initial history record
-		updateHistoryRecord(null, { index: 1 });
+		// Create initial history record
+		if ((history.state as HistoryState)?.source !== 'swup') {
+			updateHistoryRecord(null, { index: this.currentHistoryIndex });
+		}
 
 		// Give consumers a chance to hook into enable
 		await nextTick();
@@ -323,10 +327,11 @@ export default class Swup {
 		this.visit.history.popstate = true;
 
 		// Determine direction of history visit
-		const index = Number((event.state as HistoryState)?.index);
-		if (index) {
+		const index = (event.state as HistoryState)?.index ?? 0;
+		if (index && index !== this.currentHistoryIndex) {
 			const direction = index - this.currentHistoryIndex > 0 ? 'forwards' : 'backwards';
 			this.visit.history.direction = direction;
+			this.currentHistoryIndex = index;
 		}
 
 		// Disable animation & scrolling for history visits

package/src/modules/Visit.ts

@@ -3,6 +3,8 @@ import { 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 */
@@ -92,6 +94,7 @@ export function createVisit(
 	{ to, from = this.currentPageUrl, hash, el, event }: VisitInitOptions
 ): Visit {
 	return {
+		id: Math.random(),
 		from: { url: from },
 		to: { url: to, hash },
 		containers: this.options.containers,

package/src/modules/__test__/visit.test.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import Swup from '../../Swup.js';
+import { Visit, createVisit } from '../Visit.js';
+
+class SwupWithPublicVisitMethods extends Swup {
+	public createVisit = createVisit;
+}
+
+const swup = new SwupWithPublicVisitMethods();
+let visit: Visit;
+
+describe('Visit', () => {
+	beforeEach(() => {
+		visit = swup.createVisit({ to: '' });
+	});
+
+	it('is an object', () => {
+		expect(visit).to.be.an('object');
+	});
+
+	it('has an id', () => {
+		expect(visit.id).to.be.a('number');
+	});
+
+	it('generates unique ids', () => {
+		let id = visit.id;
+		visit = swup.createVisit({ to: '' });
+		expect(visit.id).to.not.equal(id);
+	});
+
+	it('has a from object with the current URL', () => {
+		expect(visit.from).to.be.an('object');
+		expect(visit.from.url).to.be.a('string');
+		visit = swup.createVisit({ to: '', from: '/from' });
+		expect(visit.from).toMatchObject({ url: '/from' });
+	});
+
+	it('has a to object with the next URL', () => {
+		expect(visit.to).to.be.an('object');
+		expect(visit.to.url).to.be.a('string');
+		visit = swup.createVisit({ to: '/to' });
+		expect(visit.to).toMatchObject({ url: '/to' });
+	});
+
+	it('has an animation object', () => {
+		expect(visit.animation).to.be.an('object');
+		expect(visit.animation).toMatchObject({
+			animate: true,
+			name: undefined,
+			scope: swup.options.animationScope,
+			selector: swup.options.animationSelector
+		 });
+	});
+
+	it('has a container array', () => {
+		expect(visit.containers).to.be.an('array');
+		expect(visit.containers).toEqual(swup.options.containers);
+	});
+
+	it('has a trigger object', () => {
+		expect(visit.trigger).to.be.an('object');
+		expect(visit.trigger).toMatchObject({
+			el: undefined,
+			event: undefined
+		 });
+	});
+
+	it('has a cache object', () => {
+		expect(visit.cache).to.be.an('object');
+		expect(visit.cache).toEqual({
+			read: swup.options.cache,
+			write: swup.options.cache
+		});
+	});
+
+	it('has a history object', () => {
+		expect(visit.history).to.be.an('object');
+		expect(visit.history).toEqual({
+			action: 'push',
+			popstate: false,
+			direction: undefined
+		});
+	});
+
+	it('has a scroll object', () => {
+		expect(visit.scroll).to.be.an('object');
+		expect(visit.scroll).toEqual({
+			reset: true,
+			target: undefined
+		});
+	});
+});

package/src/modules/navigate.ts

@@ -61,37 +61,41 @@ export function navigate(
 export async function performNavigation(
 	this: Swup,
 	options: NavigationOptions & FetchOptions = {}
-) {
-	const { el } = this.visit.trigger;
+): Promise<void> {
+	// 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;
+
+	const { el } = visit.trigger;
 	options.referrer = options.referrer || this.currentPageUrl;
 
 	if (options.animate === false) {
-		this.visit.animation.animate = false;
+		visit.animation.animate = false;
 	}
 
 	// Clean up old animation classes
-	if (!this.visit.animation.animate) {
+	if (!visit.animation.animate) {
 		this.classes.clear();
 	}
 
 	// 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)) {
-		this.visit.history.action = history as HistoryAction;
+		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) {
-		this.visit.animation.name = animation;
+		visit.animation.name = animation;
 	}
 
 	// Sanitize cache option
 	if (typeof options.cache === 'object') {
-		this.visit.cache.read = options.cache.read ?? this.visit.cache.read;
-		this.visit.cache.write = options.cache.write ?? this.visit.cache.write;
+		visit.cache.read = options.cache.read ?? visit.cache.read;
+		visit.cache.write = options.cache.write ?? visit.cache.write;
 	} else if (options.cache !== undefined) {
-		this.visit.cache = { read: !!options.cache, write: !!options.cache };
+		visit.cache = { read: !!options.cache, write: !!options.cache };
 	}
 	// Delete this so that window.fetch doesn't mis-interpret it
 	delete options.cache;
@@ -103,7 +107,7 @@ export async function performNavigation(
 		const pagePromise = this.hooks.call('page:load', { options }, async (visit, args) => {
 			// Read from cache
 			let cachedPage: PageData | undefined;
-			if (this.visit.cache.read) {
+			if (visit.cache.read) {
 				cachedPage = this.cache.get(visit.to.url);
 			}
 
@@ -114,34 +118,36 @@ export async function performNavigation(
 		});
 
 		// Create/update history record if this is not a popstate call or leads to the same URL
-		if (!this.visit.history.popstate) {
+		if (!visit.history.popstate) {
 			// Add the hash directly from the trigger element
-			const newUrl = this.visit.to.url + this.visit.to.hash;
-			if (
-				this.visit.history.action === 'replace' ||
-				this.visit.to.url === this.currentPageUrl
-			) {
+			const newUrl = visit.to.url + visit.to.hash;
+			if (visit.history.action === 'replace' || visit.to.url === this.currentPageUrl) {
 				updateHistoryRecord(newUrl);
 			} else {
-				const index = this.currentHistoryIndex + 1;
-				createHistoryRecord(newUrl, { index });
+				this.currentHistoryIndex++;
+				createHistoryRecord(newUrl, { index: this.currentHistoryIndex });
 			}
 		}
 
 		this.currentPageUrl = getCurrentUrl();
 
 		// Wait for page before starting to animate out?
-		if (this.visit.animation.wait) {
+		if (visit.animation.wait) {
 			const { html } = await pagePromise;
-			this.visit.to.html = html;
+			visit.to.html = html;
 		}
 
 		// Wait for page to load and leave animation to finish
 		const animationPromise = this.animatePageOut();
 		const [page] = await Promise.all([pagePromise, animationPromise]);
 
+		// Abort if another visit was started in the meantime
+		if (visit.id !== this.visit.id) {
+			return;
+		}
+
 		// Render page: replace content and scroll to top/fragment
-		await this.renderPage(this.visit.to.url, page);
+		await this.renderPage(page);
 
 		// Wait for enter animation
 		await this.animatePageIn();
@@ -150,8 +156,8 @@ export async function performNavigation(
 		await this.hooks.call('visit:end', undefined, () => this.classes.clear());
 
 		// Reset visit info after finish?
-		// if (this.visit.to && this.isSameResolvedUrl(this.visit.to.url, requestedUrl)) {
-		// 	this.createVisit({ to: undefined });
+		// if (visit.to && this.isSameResolvedUrl(visit.to.url, requestedUrl)) {
+		// 	this.visit = this.createVisit({ to: undefined });
 		// }
 	} catch (error: unknown) {
 		// Return early if error is undefined (probably aborted preload request)
@@ -164,7 +170,7 @@ export async function performNavigation(
 
 		// Rewrite `skipPopStateHandling` to redirect manually when `history.go` is processed
 		this.options.skipPopStateHandling = () => {
-			window.location.href = this.visit.to.url + this.visit.to.hash;
+			window.location.href = visit.to.url + visit.to.hash;
 			return true;
 		};
 

package/src/modules/renderPage.ts

@@ -4,18 +4,12 @@ import { PageData } from './fetchPage.js';
 
 /**
  * Render the next page: replace the content and update scroll position.
- * @returns Promise<void>
  */
-export const renderPage = async function (this: Swup, requestedUrl: string, page: PageData) {
+export const renderPage = async function (this: Swup, page: PageData): Promise<void> {
 	const { url, html } = page;
 
 	this.classes.remove('is-leaving');
 
-	// do nothing if another page was requested in the meantime
-	if (!this.isSameResolvedUrl(getCurrentUrl(), requestedUrl)) {
-		return;
-	}
-
 	// update state if the url was redirected
 	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
 		updateHistoryRecord(url);