swup 4.3.4 → 4.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swup",
   "amdName": "Swup",
-  "version": "4.3.4",
+  "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/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';
@@ -137,20 +137,27 @@ export async function performNavigation(
 			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();
 
-		// Abort if another visit was started in the meantime
-		if (visit.id !== this.visit.id) {
-			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;
+			}
 
-		// 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(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());
@@ -159,9 +166,9 @@ export async function performNavigation(
 		// 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;
 		}
 

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/dist/types/modules/__test__/visit.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');
-	});
-});

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

@@ -1,159 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import Swup from '../../Swup.js';
-import { Cache, CacheData } from '../Cache.js';
-import { Visit } from '../Visit.js';
-
-interface CacheTtlData {
-	ttl: number;
-	created: number;
-}
-
-interface CacheIndexData {
-	index: number;
-}
-
-interface AugmentedCacheData extends CacheData, CacheTtlData, CacheIndexData {}
-
-const swup = new Swup();
-const visit = swup.visit;
-const cache = new Cache(swup);
-
-const page1 = { url: '/page-1', html: '1' };
-const page2 = { url: '/page-2', html: '2' };
-const page3 = { url: '/page-3', html: '3' };
-
-describe('Cache', () => {
-	beforeEach(() => {
-		cache.clear();
-	});
-
-	it('should be empty', () => {
-		expect(cache.size).toBe(0);
-	});
-
-	it('should append pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.size).toBe(1);
-	});
-
-	it('should have pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.has(page1.url)).toBe(true);
-	});
-
-	it('should get pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.get(page1.url)).toEqual(page1);
-	});
-
-	it('should delete pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.has(page1.url)).toBe(true);
-		cache.delete(page1.url);
-		expect(cache.has(page1.url)).toBe(false);
-	});
-
-	it('should clear', () => {
-		cache.set(page1.url, page1);
-		expect(cache.size).toBe(1);
-		cache.clear();
-		expect(cache.size).toBe(0);
-	});
-
-	it('should overwrite identical pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.size).toBe(1);
-		cache.set(page1.url, page1);
-		expect(cache.size).toBe(1);
-	});
-
-	it('should not overwrite different pages', () => {
-		cache.set(page1.url, page1);
-		expect(cache.size).toBe(1);
-		cache.set(page2.url, page2);
-		expect(cache.size).toBe(2);
-	});
-
-	it('should trigger a hook on set', () => {
-		const handler = vi.fn();
-
-		swup.hooks.on('cache:set', handler);
-
-		cache.set(page1.url, page1);
-
-		expect(handler).toBeCalledTimes(1);
-		expect(handler).toBeCalledWith(visit, { page: page1 }, undefined);
-	});
-
-	it('should allow augmenting cache entries on save', () => {
-		const now = Date.now();
-
-		swup.hooks.on('cache:set', (_, { page }) => {
-			const ttl: CacheTtlData = { ttl: 1000, created: now };
-			cache.update(page.url, ttl);
-		});
-
-		cache.set('/page', { url: '/page', html: '' });
-
-		const page = cache.get('/page');
-
-		expect(page).toEqual({ url: '/page', html: '', ttl: 1000, created: now });
-	});
-
-	it('should allow manual pruning', () => {
-		swup.hooks.on('cache:set', (_, { page }) => {
-			cache.update(page.url, { index: cache.size });
-		});
-
-		cache.set(page1.url, page1);
-		cache.set(page2.url, page2);
-		cache.set(page3.url, page3);
-
-		cache.prune((url, page) => (page as AugmentedCacheData).index > 2);
-
-		expect(cache.size).toBe(2);
-		expect(cache.has(page1.url)).toBe(true);
-		expect(cache.has(page2.url)).toBe(true);
-		expect(cache.has(page3.url)).toBe(false);
-	});
-
-	it('should return a copy from cache.get()', () => {
-		cache.set(page1.url, page1);
-		const page = cache.get(page1.url);
-		page!.html = 'new';
-		expect(cache.get(page1.url)?.html).toEqual(page1.html);
-	});
-
-	it('should return a new Map with shallow copies from cache.all', () => {
-		cache.set(page1.url, page1);
-		cache.set(page2.url, page2);
-
-		const all = cache.all;
-		all.get(page1.url)!.html = 'new';
-
-		expect(cache.get(page1.url)?.html).toEqual(page1.html);
-	});
-});
-
-describe('Types', () => {
-	it('error when necessary', async () => {
-		const swup = new Swup();
-		const cache = new Cache(swup);
-
-		// @ts-expect-no-error
-		swup.hooks.on('history:popstate', (visit: Visit, { event: PopStateEvent }) => {});
-		// @ts-expect-no-error
-		await swup.hooks.call('history:popstate', { event: new PopStateEvent('') });
-
-		try {
-			// @ts-expect-error
-			cache.set();
-			// @ts-expect-error
-			cache.set(url);
-			// @ts-expect-error
-			cache.set(url, {});
-			// @ts-expect-error
-			cache.set({ url: '/test' });
-		} catch (error) {}
-	});
-});

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

@@ -1,36 +0,0 @@
-import { DelegateEvent } from 'delegate-it';
-import { describe, it } from 'vitest';
-
-import { delegateEvent } from '../../helpers/delegateEvent.js';
-
-describe('delegateEvent', () => {
-	it('should return correct types', () => {
-		delegateEvent('form', 'submit', (event) => {});
-
-		// @ts-expect-no-error
-		delegateEvent('form', 'submit', (event: SubmitEvent) => {});
-		// @ts-expect-error
-		delegateEvent('form', 'submit', (event: MouseEvent) => {});
-
-		// @ts-expect-no-error
-		delegateEvent('form', 'submit', (event: DelegateEvent<SubmitEvent>) => {});
-		// @ts-expect-error
-		delegateEvent('form', 'submit', (event: DelegateEvent<MouseEvent>) => {});
-
-		// @ts-expect-no-error
-		delegateEvent('form', 'submit', (event: DelegateEvent<SubmitEvent, HTMLFormElement>) => {});
-		delegateEvent(
-			'form',
-			'submit',
-			// @ts-expect-error
-			(event: DelegateEvent<MouseEvent, HTMLAnchorElement>) => {}
-		);
-
-		delegateEvent('form', 'submit', (event) => {
-			// @ts-expect-no-error
-			const el: HTMLFormElement = event.delegateTarget;
-		});
-		// @ts-expect-error
-		delegateEvent('form', 'submit', (event: MouseEvent) => {});
-	});
-});