swup 4.3.3 → 4.4.0

package/dist/types/modules/fetchPage.d.ts

@@ -12,13 +12,19 @@ export interface FetchOptions extends Omit<RequestInit, 'cache'> {
     method?: 'GET' | 'POST';
     /** The body of the request: raw string, form data object or URL params. */
     body?: string | FormData | URLSearchParams;
+    /** The request timeout in milliseconds. */
+    timeout?: number;
 }
 export declare class FetchError extends Error {
     url: string;
-    status: number;
+    status?: number;
+    aborted: boolean;
+    timedOut: boolean;
     constructor(message: string, details: {
         url: string;
-        status: number;
+        status?: number;
+        aborted?: boolean;
+        timedOut?: boolean;
     });
 }
 /**

package/dist/types/modules/renderPage.d.ts

@@ -2,6 +2,5 @@ import Swup from '../Swup.js';
 import { PageData } from './fetchPage.js';
 /**
  * Render the next page: replace the content and update scroll position.
- * @returns Promise<void>
  */
-export declare const renderPage: (this: Swup, requestedUrl: string, page: PageData) => Promise<void>;
+export declare const renderPage: (this: Swup, page: PageData) => Promise<void>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swup",
   "amdName": "Swup",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "description": "Versatile and extensible page transition library for server-rendered websites",
   "type": "module",
   "source": "./src/Swup.ts",
@@ -35,17 +35,14 @@
     "postinstall": "opencollective-postinstall || true",
     "test": "npm run test:unit && npm run test:e2e",
     "test:ci": "npm run test:unit && npm run test:e2e:ci",
-    "test:unit": "vitest run --config ./vitest/vitest.config.ts",
-    "test:unit:watch": "vitest --config ./vitest/vitest.config.ts",
-    "test:e2e": "start-server-and-test test:e2e:start 8274 cy:run",
-    "test:e2e:ci": "start-server-and-test test:e2e:start 8274 cy:run:record",
-    "test:e2e:dev": "start-server-and-test test:e2e:start 8274 cy:open",
-    "test:e2e:instrument": "nyc instrument --compact=false dist cypress/fixtures/dist",
-    "test:e2e:server": "http-server --silent --port 8274 cypress/fixtures",
-    "test:e2e:start": "npm run test:e2e:instrument && npm run test:e2e:server",
-    "cy:run": "cypress run",
-    "cy:run:record": "cypress run --record",
-    "cy:open": "cypress open",
+    "test:unit": "vitest run --config ./tests/config/vitest.config.ts",
+    "test:unit:watch": "vitest --config ./tests/config/vitest.config.ts",
+    "test:e2e": "npx playwright test --config ./tests/config/playwright.config.ts",
+    "test:e2e:dev": "npx playwright test --ui --config ./tests/config/playwright.config.ts",
+    "test:e2e:install": "npx playwright install --with-deps",
+    "test:e2e:instrument": "nyc instrument --compact=false dist tests/fixtures/dist",
+    "test:e2e:serve": "npx serve -n -S -L -p 8274 --config ./tests/config/serve.json",
+    "test:e2e:start": "npm run test:e2e:instrument && npm run test:e2e:serve",
     "prepare": "husky install"
   },
   "author": "Georgy Marchuk",
@@ -67,25 +64,23 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",
-    "@cypress/code-coverage": "^3.10.0",
+    "@playwright/test": "^1.37.1",
     "@swup/browserslist-config": "^1.0.0",
     "@swup/prettier-config": "^1.0.0",
     "@types/jsdom": "^21.1.1",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
-    "cypress": "^12.3.0",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "http-server": "^14.1.1",
     "husky": "^8.0.0",
     "istanbul-lib-coverage": "^3.2.0",
     "jsdom": "^22.1.0",
     "microbundle": "^0.15.0",
     "nyc": "^15.1.0",
     "prettier": "^2.8.2",
-    "start-server-and-test": "^2.0.0",
-    "vitest": "^0.31.2"
+    "serve": "^14.2.1",
+    "vitest": "^0.34.3"
   },
   "collective": {
     "type": "opencollective",

package/src/Swup.ts

@@ -49,6 +49,8 @@ export type Options = {
 	resolveUrl: (url: string) => string;
 	/** Callback for telling swup to ignore certain popstate events.  */
 	skipPopStateHandling: (event: PopStateEvent) => boolean;
+	/** Request timeout in milliseconds. */
+	timeout: number;
 };
 
 const defaults: Options = {
@@ -66,7 +68,8 @@ const defaults: Options = {
 		'X-Requested-With': 'swup',
 		'Accept': 'text/html, application/xhtml+xml'
 	},
-	skipPopStateHandling: (event) => (event.state as HistoryState)?.source !== 'swup'
+	skipPopStateHandling: (event) => (event.state as HistoryState)?.source !== 'swup',
+	timeout: 0
 };
 
 /** Swup page transition library. */

package/src/modules/Hooks.ts

@@ -21,6 +21,7 @@ export interface HookDefinitions {
 	'disable': undefined;
 	'fetch:request': { url: string; options: FetchOptions };
 	'fetch:error': { url: string; status: number; response: Response };
+	'fetch:timeout': { url: string };
 	'history:popstate': { event: PopStateEvent };
 	'link:click': { el: HTMLAnchorElement; event: DelegateEvent<MouseEvent> };
 	'link:self': undefined;
@@ -31,6 +32,7 @@ export interface HookDefinitions {
 	'scroll:top': { options: ScrollIntoViewOptions };
 	'scroll:anchor': { hash: string; options: ScrollIntoViewOptions };
 	'visit:start': undefined;
+	'visit:transition': undefined;
 	'visit:end': undefined;
 }
 
@@ -40,6 +42,7 @@ export interface HookReturnValues {
 	'page:load': Promise<PageData>;
 	'scroll:top': boolean;
 	'scroll:anchor': boolean;
+	'visit:transition': Promise<boolean>;
 }
 
 export type HookArguments<T extends HookName> = HookDefinitions[T];
@@ -131,6 +134,7 @@ export class Hooks {
 		'disable',
 		'fetch:request',
 		'fetch:error',
+		'fetch:timeout',
 		'history:popstate',
 		'link:click',
 		'link:self',
@@ -141,6 +145,7 @@ export class Hooks {
 		'scroll:top',
 		'scroll:anchor',
 		'visit:start',
+		'visit:transition',
 		'visit:end'
 	];
 

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/fetchPage.ts

@@ -15,16 +15,25 @@ export interface FetchOptions extends Omit<RequestInit, 'cache'> {
 	method?: 'GET' | 'POST';
 	/** The body of the request: raw string, form data object or URL params. */
 	body?: string | FormData | URLSearchParams;
+	/** The request timeout in milliseconds. */
+	timeout?: number;
 }
 
 export class FetchError extends Error {
 	url: string;
-	status: number;
-	constructor(message: string, details: { url: string; status: number }) {
+	status?: number;
+	aborted: boolean;
+	timedOut: boolean;
+	constructor(
+		message: string,
+		details: { url: string; status?: number; aborted?: boolean; timedOut?: boolean }
+	) {
 		super(message);
 		this.name = 'FetchError';
 		this.url = details.url;
 		this.status = details.status;
+		this.aborted = details.aborted || false;
+		this.timedOut = details.timedOut || false;
 	}
 }
 
@@ -39,14 +48,44 @@ export async function fetchPage(
 	url = Location.fromUrl(url).url;
 
 	const headers = { ...this.options.requestHeaders, ...options.headers };
-	options = { ...options, headers };
+	const timeout = options.timeout ?? this.options.timeout;
+	const controller = new AbortController();
+	const { signal } = controller;
+	options = { ...options, headers, signal };
+
+	let timedOut = false;
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	if (timeout && timeout > 0) {
+		timeoutId = setTimeout(() => {
+			timedOut = true;
+			controller.abort('timeout');
+		}, timeout);
+	}
 
 	// Allow hooking before this and returning a custom response-like object (e.g. custom fetch implementation)
-	const response: Response = await this.hooks.call(
-		'fetch:request',
-		{ url, options },
-		(visit, { url, options }) => fetch(url, options)
-	);
+	let response: Response;
+	try {
+		response = await this.hooks.call(
+			'fetch:request',
+			{ url, options },
+			(visit, { url, options }) => fetch(url, options)
+		);
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+	} catch (error) {
+		if (timedOut) {
+			this.hooks.call('fetch:timeout', { 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 error;
+	}
 
 	const { status, url: responseUrl } = response;
 	const html = await response.text();

package/src/modules/navigate.ts

@@ -1,6 +1,6 @@
 import Swup from '../Swup.js';
 import { createHistoryRecord, updateHistoryRecord, getCurrentUrl, Location } from '../helpers.js';
-import { FetchOptions, PageData } from './fetchPage.js';
+import { FetchError, FetchOptions, PageData } from './fetchPage.js';
 import { VisitInitOptions } from './Visit.js';
 
 export type HistoryAction = 'push' | 'replace';
@@ -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,13 +118,10 @@ 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 {
 				this.currentHistoryIndex++;
@@ -131,31 +132,43 @@ export async function performNavigation(
 		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]);
+		// perform the actual transition: animate and replace content
+		await this.hooks.call('visit:transition', undefined, async (visit) => {
+			// Start leave animation
+			const animationPromise = this.animatePageOut();
+
+			// 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;
+			}
+
+			// Render page: replace content and scroll to top/fragment
+			await this.renderPage(page);
 
-		// Render page: replace content and scroll to top/fragment
-		await this.renderPage(this.visit.to.url, page);
+			// Wait for enter animation
+			await this.animatePageIn();
 
-		// Wait for enter animation
-		await this.animatePageIn();
+			return true;
+		});
 
 		// Finalize visit
 		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)
-		if (!error) {
+	} catch (error) {
+		// Return early if error is undefined or signals an aborted request
+		if (!error || (error as FetchError)?.aborted) {
 			return;
 		}
 
@@ -164,7 +177,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);

package/dist/types/__test__/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/helpers/__test__/matchPath.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/modules/__test__/cache.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/modules/__test__/delegateEvent.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/modules/__test__/hooks.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/modules/__test__/plugins.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/modules/__test__/replaceContent.test.d.ts

@@ -1 +0,0 @@
-export {};

package/src/__test__/index.test.ts

@@ -1,83 +0,0 @@
-import { DelegateEvent } from 'delegate-it';
-import { describe, expect, it, vi } from 'vitest';
-
-import pckg from '../../package.json';
-import Swup, { Options, Plugin } from '../index.js';
-import * as SwupTS from '../Swup.js';
-
-const baseUrl = window.location.origin;
-
-describe('Exports', () => {
-	it('should export Swup and Options/Plugin types', () => {
-		class SwupPlugin implements Plugin {
-			name = 'SwupPlugin';
-			isSwupPlugin = true as const;
-			mount = () => {};
-			unmount = () => {};
-		}
-
-		const options: Partial<Options> = {
-			animateHistoryBrowsing: false,
-			animationSelector: '[class*="transition-"]',
-			cache: true,
-			containers: ['#swup'],
-			ignoreVisit: (url, { el } = {}) => !!el?.closest('[data-no-swup]'),
-			linkSelector: 'a[href]',
-			plugins: [new SwupPlugin()],
-			resolveUrl: (url) => url,
-			requestHeaders: {
-				'X-Requested-With': 'swup',
-				'Accept': 'text/html, application/xhtml+xml'
-			},
-			skipPopStateHandling: (event) => event.state?.source !== 'swup'
-		};
-
-		const swup = new Swup(options);
-		expect(swup).toBeInstanceOf(Swup);
-	});
-
-	it('should define a version', () => {
-		const swup = new Swup();
-		expect(swup.version).not.toBeUndefined();
-		expect(swup.version).toEqual(pckg.version);
-	});
-
-	it('UMD compatibility: Swup.ts should only have a default export', () => {
-		expect(Object.keys(SwupTS)).toEqual(['default']);
-	});
-});
-
-describe('ignoreVisit', () => {
-	it('should be called with relative URL', () => {
-		const ignoreVisit = vi.fn(() => true);
-		const swup = new Swup({ ignoreVisit });
-		swup.shouldIgnoreVisit(`${baseUrl}/path/?query#hash`);
-
-		expect(ignoreVisit.mock.calls).toHaveLength(1);
-		expect((ignoreVisit.mock.lastCall as any)[0]).toEqual('/path/?query#hash');
-	});
-
-	it('should have access to element and event params', () => {
-		const el = document.createElement('a');
-		el.href = `${baseUrl}/path/?query#hash`;
-		const event = new MouseEvent('click') as DelegateEvent<MouseEvent>;
-		event.delegateTarget = el;
-
-		const ignoreVisit = vi.fn(() => true);
-		const swup = new Swup({ ignoreVisit });
-		swup.navigate(el.href, {}, { el, event });
-
-		expect(ignoreVisit.mock.calls).toHaveLength(1);
-		expect((ignoreVisit.mock.lastCall as any)[1]).toEqual(
-			expect.objectContaining({ el, event })
-		);
-	});
-
-	it('should be called from visit method', () => {
-		const ignoreVisit = vi.fn(() => true);
-		const swup = new Swup({ ignoreVisit });
-		swup.navigate('/path/');
-
-		expect(ignoreVisit.mock.calls).toHaveLength(1);
-	});
-});

package/src/helpers/__test__/matchPath.test.ts

@@ -1,54 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { matchPath } from '../../index.js';
-import { pathToRegexp } from 'path-to-regexp';
-
-describe('matchPath', () => {
-	it('should return false if not matching', () => {
-		const urlMatch = matchPath('/users/:user');
-		const match = urlMatch('/posts/');
-		expect(match).toBe(false);
-	});
-
-	it('should return an object if matching', () => {
-		const urlMatch = matchPath('/users/:user');
-		const match = urlMatch('/users/bob');
-		expect(match).toEqual({
-			path: '/users/bob',
-			index: 0,
-			params: { user: 'bob' }
-		});
-	});
-
-	it('should work with primitive strings', () => {
-		const urlMatch = matchPath<{ user: string }>('/users/:user');
-		const match = urlMatch('/users/bob');
-		const params = !match ? false : match.params;
-		expect(params).toEqual({ user: 'bob' });
-	});
-
-	it('should work with an array of paths', () => {
-		const urlMatch = matchPath<{ user: string }>(['/users/', '/users/:user']);
-
-		const { params: withParams } = urlMatch('/users/bob') || {};
-		expect(withParams).toEqual({ user: 'bob' });
-
-		const { params: withoutParams } = urlMatch('/users/') || {};
-		expect(withoutParams).toEqual({});
-	});
-
-	/**
-	 * When passing a regex to `match`, the params in the response are sorted by appearance.
-	 * Only helpful for falsy/truthy detection
-	 */
-	it('should work with regex', () => {
-		const re = pathToRegexp('/users/:user');
-		const urlMatch = matchPath(re);
-		const { params } = urlMatch('/users/bob') || {};
-		expect(params).toEqual({ '0': 'bob' });
-	});
-
-	it('should throw with malformed paths', () => {
-		// prettier-ignore
-		expect(() => matchPath('/\?user=:user')).toThrowError('[swup] Error parsing path');
-	});
-});