swup 3.1.0 → 4.0.0-rc.14

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

@@ -0,0 +1,192 @@
+import { describe, expect, it, vi } from 'vitest';
+import Swup from '../../Swup.js';
+import { Handler, Hooks } from '../Hooks.js';
+import { Context } from '../Context.js';
+
+describe('Hook registry', () => {
+	it('should add custom handlers', () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		// Make private fields public for this test
+		const HooksWithAccess = class extends Hooks {
+			getRegistry() {
+				return this.registry;
+			}
+		};
+		const hooks = new HooksWithAccess(swup);
+
+		hooks.on('enabled', handler);
+		const ledger = hooks.getRegistry().get('enabled');
+
+		expect(ledger).toBeDefined();
+		expect(ledger).toBeInstanceOf(Map);
+		expect(ledger!.size).toBe(1);
+
+		const registrations = Array.from(ledger!.values());
+		const registration = registrations.find((reg) => reg.handler === handler);
+
+		expect(registration?.handler).toEqual(handler);
+	});
+
+	it('should return the passed handler', () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		const handlerReturned = swup.hooks.on('enabled', handler);
+
+		expect(handlerReturned).toEqual(handler);
+	});
+
+	it('should trigger custom handlers', async () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		swup.hooks.on('enabled', handler);
+
+		await swup.hooks.trigger('enabled');
+
+		expect(handler).toBeCalledTimes(1);
+	});
+
+	it('should only trigger custom handlers once if requested', async () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		swup.hooks.on('enabled', handler, { once: true });
+
+		await swup.hooks.trigger('enabled', undefined, () => {});
+		await swup.hooks.trigger('enabled', undefined, () => {});
+
+		expect(handler).toBeCalledTimes(1);
+	});
+
+	it('should only trigger custom handlers once if using alias', async () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		swup.hooks.once('enabled', handler);
+
+		await swup.hooks.trigger('enabled', undefined, () => {});
+		await swup.hooks.trigger('enabled', undefined, () => {});
+
+		expect(handler).toBeCalledTimes(1);
+	});
+
+	it('should trigger original handlers', async () => {
+		const swup = new Swup();
+		const handler = vi.fn();
+
+		await swup.hooks.trigger('enabled', undefined, handler);
+
+		expect(handler).toBeCalledTimes(1);
+	});
+
+	it('should allow triggering custom handlers before original handler', async () => {
+		const swup = new Swup();
+
+		let called: Array<string> = [];
+		const handlers = {
+			before: () => {
+				called.push('before');
+			},
+			original: () => {
+				called.push('original');
+			},
+			normal: () => {
+				called.push('normal');
+			},
+			after: () => {
+				called.push('after');
+			}
+		};
+
+		swup.hooks.on('disabled', handlers.before, { before: true });
+		swup.hooks.on('disabled', handlers.normal, {});
+		swup.hooks.on('disabled', handlers.after, {});
+
+		await swup.hooks.trigger('disabled', undefined, handlers.original);
+
+		expect(called).toEqual(['before', 'original', 'normal', 'after']);
+	});
+
+	it('should sort custom handlers by priority', async () => {
+		const swup = new Swup();
+
+		let called: Array<number> = [];
+		const handlers = {
+			1: () => {
+				called.push(1);
+			},
+			2: () => {
+				called.push(2);
+			},
+			3: () => {
+				called.push(3);
+			},
+			4: () => {
+				called.push(4);
+			},
+			5: () => {
+				called.push(5);
+			},
+			6: () => {
+				called.push(6);
+			}
+		};
+
+		swup.hooks.on('disabled', handlers['1'], { priority: 1, before: true });
+		swup.hooks.on('disabled', handlers['2'], { priority: 2, before: true });
+		swup.hooks.on('disabled', handlers['4'], { priority: 5 });
+		swup.hooks.on('disabled', handlers['6'], { priority: 4 });
+		swup.hooks.on('disabled', handlers['5'], { priority: 4 });
+
+		await swup.hooks.trigger('disabled', undefined, handlers['3']);
+
+		expect(called).toEqual([2, 1, 3, 4, 6, 5]);
+	});
+
+	it('should allow replacing original handlers', async () => {
+		const swup = new Swup();
+		const listener = vi.fn();
+		const handler = vi.fn();
+
+		swup.hooks.on('enabled', listener, { replace: true });
+
+		await swup.hooks.trigger('enabled', undefined, handler);
+
+		expect(handler).toBeCalledTimes(0);
+		expect(listener).toBeCalledTimes(1);
+	});
+
+	it('should trigger event handler with context and args', async () => {
+		const swup = new Swup();
+		const handler: Handler<'popState'> = vi.fn();
+		const ctx = swup.context;
+		const args = { event: new PopStateEvent('') };
+
+		swup.hooks.on('popState', handler);
+		await swup.hooks.trigger('popState', args);
+
+		expect(handler).toBeCalledTimes(1);
+		expect(handler).toBeCalledWith(ctx, args);
+	});
+});
+
+describe('Types', () => {
+	it('error when necessary', async () => {
+		const swup = new Swup();
+
+		// @ts-expect-no-error
+		swup.hooks.on('popState', (ctx: Context, { event }: { event: PopStateEvent }) => {});
+		// @ts-expect-no-error
+		await swup.hooks.trigger('popState', { event: new PopStateEvent('') });
+
+		// @ts-expect-error
+		swup.hooks.on('popState', ({ event: MouseEvent }) => {});
+		// @ts-expect-error
+		swup.hooks.on('popState', (ctx: Context, { event }: { event: MouseEvent }) => {});
+		// @ts-expect-error
+		await swup.hooks.trigger('popState', { event: new MouseEvent('') });
+	});
+});

package/src/modules/enterPage.ts

@@ -1,24 +1,26 @@
-import { nextTick } from '../utils.js';
 import Swup from '../Swup.js';
-import { PageRenderOptions } from './renderPage.js';
+import { nextTick } from '../utils.js';
 
-export const enterPage = function (this: Swup, { event, skipTransition }: PageRenderOptions = {}) {
-	if (skipTransition) {
-		this.triggerEvent('transitionEnd', event);
-		this.cleanupAnimationClasses();
-		return [Promise.resolve()];
+export const enterPage = async function (this: Swup) {
+	if (this.context.transition.animate) {
+		const animation = this.hooks.trigger(
+			'awaitAnimation',
+			{ selector: this.options.animationSelector, direction: 'in' },
+			async (context, { selector, direction }) => {
+				await Promise.all(this.getAnimationPromises({ selector, direction }));
+			}
+		);
+		await nextTick();
+		await this.hooks.trigger('animationInStart', undefined, () => {
+			document.documentElement.classList.remove('is-animating');
+		});
+		await animation;
+		await this.hooks.trigger('animationInDone');
 	}
 
-	nextTick(() => {
-		this.triggerEvent('animationInStart');
-		document.documentElement.classList.remove('is-animating');
-	});
-
-	const animationPromises = this.getAnimationPromises('in');
-	Promise.all(animationPromises).then(() => {
-		this.triggerEvent('animationInDone');
-		this.triggerEvent('transitionEnd', event);
+	await this.hooks.trigger('transitionEnd', undefined, () => {
 		this.cleanupAnimationClasses();
 	});
-	return animationPromises;
+
+	this.context = this.createContext({ to: undefined });
 };

package/src/modules/fetchPage.ts

@@ -1,35 +1,80 @@
 import Swup from '../Swup.js';
-import { fetch } from '../helpers.js';
-import { TransitionOptions } from './loadPage.js';
-import { PageRecord } from './Cache.js';
+import { Location } from '../helpers.js';
 
-export function fetchPage(this: Swup, data: TransitionOptions): Promise<PageRecord> {
-	const headers = this.options.requestHeaders;
-	const { url } = data;
+export interface PageData {
+	url: string;
+	html: string;
+}
+
+export interface FetchOptions extends RequestInit {
+	method?: 'GET' | 'POST';
+	body?: string | FormData | URLSearchParams;
+	headers?: Record<string, string>;
+}
+
+export class FetchError extends Error {
+	url: string;
+	status: number;
+	constructor(message: string, details: { url: string; status: number }) {
+		super(message);
+		this.name = 'FetchError';
+		this.url = details.url;
+		this.status = details.status;
+	}
+}
+
+/**
+ * Fetch a page from the server, return it and cache it.
+ */
+export async function fetchPage(
+	this: Swup,
+	url: URL | string,
+	options: FetchOptions & { triggerHooks?: boolean } = {}
+): Promise<PageData> {
+	const { url: requestUrl } = Location.fromUrl(url);
+
+	if (this.cache.has(requestUrl)) {
+		const page = this.cache.get(requestUrl) as PageData;
+		if (options.triggerHooks !== false) {
+			await this.hooks.trigger('pageLoaded', { page, cache: true });
+		}
+		return page;
+	}
+
+	const headers = { ...this.options.requestHeaders, ...options.headers };
+	options = { ...options, headers };
+
+	// Allow hooking before this and returning a custom response-like object (e.g. custom fetch implementation)
+	const response = await this.hooks.trigger(
+		'fetchPage',
+		{ url: requestUrl, options },
+		async (context, { url, options, response }) => await (response || fetch(url, options))
+	);
+
+	const { status, url: responseUrl } = response;
+	const html = await response.text();
+
+	if (status === 500) {
+		this.hooks.trigger('serverError', { status, response, url: responseUrl });
+		throw new FetchError(`Server error: ${responseUrl}`, { status, url: responseUrl });
+	}
+
+	if (!html) {
+		throw new FetchError(`Empty response: ${responseUrl}`, { status, url: responseUrl });
+	}
+
+	// Resolve real url after potential redirect
+	const { url: finalUrl } = new Location(responseUrl);
+	const page = { url: finalUrl, html };
+
+	// Only save cache entry for non-redirects
+	if (requestUrl === finalUrl) {
+		this.cache.set(page.url, page);
+	}
 
-	if (this.cache.exists(url)) {
-		this.triggerEvent('pageRetrievedFromCache');
-		return Promise.resolve(this.cache.getPage(url));
+	if (options.triggerHooks !== false) {
+		await this.hooks.trigger('pageLoaded', { page, cache: false });
 	}
 
-	return new Promise((resolve, reject) => {
-		fetch({ ...data, headers }, (response) => {
-			if (response.status === 500) {
-				this.triggerEvent('serverError');
-				reject(url);
-				return;
-			}
-			// get json data
-			const page = this.getPageData(response);
-			if (!page || !page.blocks.length) {
-				reject(url);
-				return;
-			}
-			// render page
-			const cacheablePageData = { ...page, url };
-			this.cache.cacheUrl(cacheablePageData);
-			this.triggerEvent('pageLoaded');
-			resolve(cacheablePageData);
-		});
-	});
+	return page;
 }

package/src/modules/getAnchorElement.ts

@@ -17,11 +17,15 @@ export const getAnchorElement = (hash: string): Element | null => {
 	}
 
 	const decoded = decodeURIComponent(hash);
-
-	return (
+	let element =
 		document.getElementById(hash) ||
 		document.getElementById(decoded) ||
 		query(`a[name='${escape(hash)}']`) ||
-		query(`a[name='${escape(decoded)}']`)
-	);
+		query(`a[name='${escape(decoded)}']`);
+
+	if (!element && hash === 'top') {
+		element = document.body;
+	}
+
+	return element;
 };

package/src/modules/getAnimationPromises.ts

@@ -1,44 +1,51 @@
 import { queryAll, toMs } from '../utils.js';
-import Swup from '../Swup.js';
+import Swup, { Options } from '../Swup.js';
 
-// Transition property/event sniffing
-let transitionProp = 'transition';
-let transitionEndEvent = 'transitionend';
-let animationProp = 'animation';
-let animationEndEvent = 'animationend';
+const TRANSITION = 'transition';
+const ANIMATION = 'animation';
 
-if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
-	transitionProp = 'WebkitTransition';
-	transitionEndEvent = 'webkitTransitionEnd';
-}
+type AnimationTypes = typeof TRANSITION | typeof ANIMATION;
+type AnimationProperties = 'Delay' | 'Duration';
+type AnimationStyleKeys = `${AnimationTypes}${AnimationProperties}` | 'transitionProperty';
+type AnimationStyleDeclarations = Pick<CSSStyleDeclaration, AnimationStyleKeys>;
 
-if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) {
-	animationProp = 'WebkitAnimation';
-	animationEndEvent = 'webkitAnimationEnd';
-}
+export type AnimationDirection = 'in' | 'out';
 
+/**
+ * Get an array of Promises that resolve when all animations are done on the page.
+ * @note We don't make use of the `direction` argument, but it's required by JS plugin
+ */
 export function getAnimationPromises(
 	this: Swup,
-	// we don't use this argument, but JS plugin depends on it with
-	// its own version of getAnimationPromises, so it must be specified when
-	// getAnimationPromises is being used
-	animationType: 'in' | 'out'
+	{
+		elements,
+		selector
+	}: {
+		selector: Options['animationSelector'];
+		elements?: NodeListOf<HTMLElement> | HTMLElement[];
+		direction?: AnimationDirection;
+	}
 ): Promise<void>[] {
-	const selector = this.options.animationSelector;
+	// Use array of a single resolved promise instead of an empty array to allow
+	// possible future use with Promise.race() which requires an actual value
+	const resolved = [Promise.resolve()];
 
 	// Allow usage of swup without animations
-	if (selector === false) {
-		// Use array of a single resolved promise instead of an empty array to allow
-		// possible future use with Promise.race() which requires an actual value
-		return [Promise.resolve()];
+	if (selector === false && !elements) {
+		return resolved;
 	}
 
-	const animatedElements = queryAll(selector, document.body);
-
-	// Warn if no elements match the animationSelector, but keep things going
-	if (!animatedElements.length) {
-		console.warn(`[swup] No elements found matching animationSelector \`${selector}\``);
-		return [Promise.resolve()];
+	// Allow passing in elements
+	let animatedElements: HTMLElement[] = [];
+	if (elements) {
+		animatedElements = Array.from(elements);
+	} else if (selector) {
+		animatedElements = queryAll(selector, document.body);
+		// Warn if no elements match the selector, but keep things going
+		if (!animatedElements.length) {
+			console.warn(`[swup] No elements found matching animationSelector \`${selector}\``);
+			return resolved;
+		}
 	}
 
 	const animationPromises = animatedElements
@@ -46,18 +53,17 @@ export function getAnimationPromises(
 		.filter(Boolean) as Promise<void>[];
 
 	if (!animationPromises.length) {
-		console.warn(
-			`[swup] No CSS animation duration defined on elements matching \`${selector}\``
-		);
-		return [Promise.resolve()];
+		if (selector) {
+			console.warn(
+				`[swup] No CSS animation duration defined on elements matching \`${selector}\``
+			);
+		}
+		return resolved;
 	}
 
 	return animationPromises;
 }
 
-const isTransitionOrAnimationEvent = (event: any): event is TransitionEvent | AnimationEvent =>
-	[transitionEndEvent, animationEndEvent].includes(event.type);
-
 function getAnimationPromiseForElement(element: Element): Promise<void> | undefined {
 	const { type, timeout, propCount } = getTransitionInfo(element);
 
@@ -67,7 +73,7 @@ function getAnimationPromiseForElement(element: Element): Promise<void> | undefi
 	}
 
 	return new Promise((resolve) => {
-		const endEvent = type === 'transition' ? transitionEndEvent : animationEndEvent;
+		const endEvent = `${type}end`;
 		const startTime = performance.now();
 		let propsTransitioned = 0;
 
@@ -108,60 +114,37 @@ function getAnimationPromiseForElement(element: Element): Promise<void> | undefi
 	});
 }
 
-export function getTransitionInfo(
-	element: Element,
-	expectedType: 'animation' | 'transition' | null = null
-) {
-	const styles = window.getComputedStyle(element);
-
-	// not sure what to do about the below mess other than casting, but it's a mess
-	const transitionDelay = `${transitionProp}Delay` as keyof CSSStyleDeclaration;
-	const transitionDuration = `${transitionProp}Duration` as keyof CSSStyleDeclaration;
-	const animationDelay = `${animationProp}Delay` as keyof CSSStyleDeclaration;
-	const animationDuration = `${animationProp}Duration` as keyof CSSStyleDeclaration;
-
-	const transitionDelays = (
-		styles[transitionDelay] as CSSStyleDeclaration['transitionDelay']
-	).split(', ');
-	const transitionDurations = (
-		(styles[transitionDuration] || '') as CSSStyleDeclaration['transitionDuration']
-	).split(', ');
-	const transitionTimeout = calculateTimeout(transitionDelays, transitionDurations);
+export function getTransitionInfo(element: Element, expectedType?: AnimationTypes) {
+	const styles = window.getComputedStyle(element) as AnimationStyleDeclarations;
 
-	const animationDelays = (
-		(styles[animationDelay] || '') as CSSStyleDeclaration['animationDelay']
-	).split(', ');
-	const animationDurations = (
-		(styles[animationDuration] || '') as CSSStyleDeclaration['animationDuration']
-	).split(', ');
+	const transitionDelays = getStyleProperties(styles, `${TRANSITION}Delay`);
+	const transitionDurations = getStyleProperties(styles, `${TRANSITION}Duration`);
+	const transitionTimeout = calculateTimeout(transitionDelays, transitionDurations);
+	const animationDelays = getStyleProperties(styles, `${ANIMATION}Delay`);
+	const animationDurations = getStyleProperties(styles, `${ANIMATION}Duration`);
 	const animationTimeout = calculateTimeout(animationDelays, animationDurations);
 
-	let type: string | null = '';
+	let type: AnimationTypes | null = null;
 	let timeout = 0;
 	let propCount = 0;
 
-	if (expectedType === 'transition') {
+	if (expectedType === TRANSITION) {
 		if (transitionTimeout > 0) {
-			type = 'transition';
+			type = TRANSITION;
 			timeout = transitionTimeout;
 			propCount = transitionDurations.length;
 		}
-	} else if (expectedType === 'animation') {
+	} else if (expectedType === ANIMATION) {
 		if (animationTimeout > 0) {
-			type = 'animation';
+			type = ANIMATION;
 			timeout = animationTimeout;
 			propCount = animationDurations.length;
 		}
 	} else {
 		timeout = Math.max(transitionTimeout, animationTimeout);
-		type =
-			timeout > 0
-				? transitionTimeout > animationTimeout
-					? 'transition'
-					: 'animation'
-				: null;
+		type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : null;
 		propCount = type
-			? type === 'transition'
+			? type === TRANSITION
 				? transitionDurations.length
 				: animationDurations.length
 			: 0;
@@ -174,7 +157,15 @@ export function getTransitionInfo(
 	};
 }
 
-function calculateTimeout(delays: string[], durations: string[]) {
+function isTransitionOrAnimationEvent(event: any): event is TransitionEvent | AnimationEvent {
+	return [`${TRANSITION}end`, `${ANIMATION}end`].includes(event.type);
+}
+
+function getStyleProperties(styles: AnimationStyleDeclarations, key: AnimationStyleKeys): string[] {
+	return (styles[key] || '').split(', ');
+}
+
+function calculateTimeout(delays: string[], durations: string[]): number {
 	while (delays.length < durations.length) {
 		delays = delays.concat(delays);
 	}

package/src/modules/leavePage.ts

@@ -1,27 +1,29 @@
 import Swup from '../Swup.js';
-import { PageRenderOptions } from './renderPage.js';
+import { classify } from '../helpers.js';
 
-export const leavePage = function (this: Swup, { event, skipTransition }: PageRenderOptions = {}) {
-	const isHistoryVisit = event instanceof PopStateEvent;
-
-	if (skipTransition) {
-		this.triggerEvent('animationSkipped');
-		return [Promise.resolve()];
+export const leavePage = async function (this: Swup) {
+	if (!this.context.transition.animate) {
+		await this.hooks.trigger('animationSkipped');
+		return;
 	}
 
-	this.triggerEvent('animationOutStart');
-
-	// handle classes
-	document.documentElement.classList.add('is-changing', 'is-leaving', 'is-animating');
-	if (isHistoryVisit) {
-		document.documentElement.classList.add('is-popstate');
-	}
-
-	// animation promise stuff
-	const animationPromises: Promise<void>[] = this.getAnimationPromises('out');
-	Promise.all(animationPromises).then(() => {
-		this.triggerEvent('animationOutDone');
+	await this.hooks.trigger('animationOutStart', undefined, () => {
+		document.documentElement.classList.add('is-changing', 'is-leaving', 'is-animating');
+		if (this.context.history.popstate) {
+			document.documentElement.classList.add('is-popstate');
+		}
+		if (this.context.transition.name) {
+			document.documentElement.classList.add(`to-${classify(this.context.transition.name)}`);
+		}
 	});
 
-	return animationPromises;
+	await this.hooks.trigger(
+		'awaitAnimation',
+		{ selector: this.options.animationSelector, direction: 'out' },
+		async (context, { selector, direction }) => {
+			await Promise.all(this.getAnimationPromises({ selector, direction }));
+		}
+	);
+
+	await this.hooks.trigger('animationOutDone');
 };