swup 4.0.0-rc.14 → 4.0.0-rc.21

package/src/modules/Hooks.ts

@@ -4,33 +4,33 @@ import Swup, { Options } from '../Swup.js';
 import { isPromise, runAsPromise } from '../utils.js';
 import { Context } from './Context.js';
 import { FetchOptions, PageData } from './fetchPage.js';
-import { AnimationDirection } from './getAnimationPromises.js';
+import { AnimationDirection } from './awaitAnimations.js';
 
 export interface HookDefinitions {
-	animationInDone: undefined;
-	animationInStart: undefined;
-	animationOutDone: undefined;
-	animationOutStart: undefined;
-	animationSkipped: undefined;
-	awaitAnimation: { selector: Options['animationSelector']; direction: AnimationDirection };
-	cacheCleared: undefined;
-	clickLink: { el: HTMLAnchorElement; event: DelegateEvent<MouseEvent> };
-	disabled: undefined;
-	enabled: undefined;
-	fetchPage: { url: string; options: FetchOptions; response?: Response | Promise<Response> };
-	loadPage: { url: string; options: FetchOptions; page?: PageData | Promise<PageData> };
-	openPageInNewTab: { href: string };
-	pageCached: { page: PageData };
-	pageLoaded: { page: PageData; cache?: boolean };
-	pageView: { url: string; title: string };
-	popState: { event: PopStateEvent };
-	replaceContent: { page: PageData; containers: Options['containers'] };
-	samePage: undefined;
-	samePageWithHash: { hash: string; options: ScrollIntoViewOptions };
-	scrollToContent: { options: ScrollIntoViewOptions };
-	serverError: { url: string; status: number; response: Response };
-	transitionStart: undefined;
-	transitionEnd: undefined;
+	'animation:out:start': undefined;
+	'animation:out:end': undefined;
+	'animation:in:start': undefined;
+	'animation:in:end': undefined;
+	'animation:skip': undefined;
+	'animation:await': { direction: AnimationDirection };
+	'cache:clear': undefined;
+	'cache:set': { page: PageData };
+	'content:replace': { page: PageData };
+	'content:scroll': { options: ScrollIntoViewOptions };
+	'enable': undefined;
+	'disable': undefined;
+	'fetch:request': { url: string; options: FetchOptions };
+	'fetch:error': { url: string; status: number; response: Response };
+	'history:popstate': { event: PopStateEvent };
+	'link:click': { el: HTMLAnchorElement; event: DelegateEvent<MouseEvent> };
+	'link:self': undefined;
+	'link:anchor': { hash: string; options: ScrollIntoViewOptions };
+	'link:newtab': { href: string };
+	'page:request': { url: string; options: FetchOptions };
+	'page:load': { page: PageData; cache?: boolean };
+	'page:view': { url: string; title: string };
+	'visit:start': undefined;
+	'visit:end': undefined;
 }
 
 export type HookArguments<T extends HookName> = HookDefinitions[T];
@@ -38,18 +38,28 @@ export type HookArguments<T extends HookName> = HookDefinitions[T];
 export type HookName = keyof HookDefinitions;
 
 export type Handler<T extends HookName> = (
+	/** The global context object for the current visit */
 	context: Context,
-	args: HookArguments<T>
+	/** The local arguments passed into the handler */
+	args: HookArguments<T>,
+	/** The default handler to be executed, available if replacing an internal hook handler */
+	defaultHandler?: Handler<T>
 ) => Promise<any> | void;
 
 export type Handlers = {
 	[K in HookName]: Handler<K>[];
 };
 
+export type HookUnregister = () => void;
+
 export type HookOptions = {
+	/** Execute the hook once, then remove the handler */
 	once?: boolean;
+	/** Execute the hook before the internal default handler */
 	before?: boolean;
+	/** Set a priority for when to execute this hook. Lower numbers execute first. Default: `0` */
 	priority?: number;
+	/** Replace the internal default handler with this hook handler */
 	replace?: boolean;
 };
 
@@ -79,30 +89,30 @@ export class Hooks {
 	// Can we deduplicate this somehow? Or make it error when not in sync with HookDefinitions?
 	// https://stackoverflow.com/questions/53387838/how-to-ensure-an-arrays-values-the-keys-of-a-typescript-interface/53395649
 	readonly hooks: HookName[] = [
-		'animationInDone',
-		'animationInStart',
-		'animationOutDone',
-		'animationOutStart',
-		'animationSkipped',
-		'awaitAnimation',
-		'cacheCleared',
-		'clickLink',
-		'disabled',
-		'enabled',
-		'fetchPage',
-		'loadPage',
-		'openPageInNewTab',
-		'pageCached',
-		'pageLoaded',
-		'pageView',
-		'popState',
-		'replaceContent',
-		'samePage',
-		'samePageWithHash',
-		'scrollToContent',
-		'serverError',
-		'transitionStart',
-		'transitionEnd'
+		'animation:out:start',
+		'animation:out:end',
+		'animation:in:start',
+		'animation:in:end',
+		'animation:skip',
+		'animation:await',
+		'cache:clear',
+		'cache:set',
+		'content:replace',
+		'content:scroll',
+		'enable',
+		'disable',
+		'fetch:request',
+		'fetch:error',
+		'history:popstate',
+		'link:click',
+		'link:self',
+		'link:anchor',
+		'link:newtab',
+		'page:request',
+		'page:load',
+		'page:view',
+		'visit:start',
+		'visit:end'
 	];
 
 	constructor(swup: Swup) {
@@ -140,9 +150,8 @@ export class Hooks {
 		const ledger = this.registry.get(hook);
 		if (ledger) {
 			return ledger;
-		} else {
-			console.error(`Unknown hook '${hook}'`);
 		}
+		console.error(`Unknown hook '${hook}'`);
 	}
 
 	/**
@@ -162,21 +171,26 @@ export class Hooks {
 	 *                - `before`: Execute the handler before the default handler
 	 *                - `priority`: Specify the order in which the handlers are executed
 	 *                - `replace`: Replace the default handler with this handler
-	 * @returns The handler function
+	 * @returns A function to unregister the handler
 	 */
-	on<T extends HookName>(hook: T, handler: Handler<T>): Handler<T>;
-	on<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): Handler<T>;
-	on<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions = {}): Handler<T> {
+	on<T extends HookName>(hook: T, handler: Handler<T>): HookUnregister;
+	on<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): HookUnregister;
+	on<T extends HookName>(
+		hook: T,
+		handler: Handler<T>,
+		options: HookOptions = {}
+	): HookUnregister {
 		const ledger = this.get(hook);
 		if (!ledger) {
 			console.warn(`Hook '${hook}' not found.`);
-			return handler;
+			return () => {};
 		}
 
 		const id = ledger.size + 1;
 		const registration: HookRegistration<T> = { ...options, id, hook, handler };
 		ledger.set(handler, registration);
-		return handler;
+
+		return () => this.off(hook, handler);
 	}
 
 	/**
@@ -185,16 +199,16 @@ export class Hooks {
 	 * @param hook Name of the hook to listen for
 	 * @param handler The handler function to execute
 	 * @param options Any other event options (see `hooks.on()` for details)
-	 * @returns The handler function
+	 * @returns A function to unregister the handler
 	 * @see on
 	 */
-	before<T extends HookName>(hook: T, handler: Handler<T>): Handler<T>;
-	before<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): Handler<T>;
+	before<T extends HookName>(hook: T, handler: Handler<T>): HookUnregister;
+	before<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): HookUnregister;
 	before<T extends HookName>(
 		hook: T,
 		handler: Handler<T>,
 		options: HookOptions = {}
-	): Handler<T> {
+	): HookUnregister {
 		return this.on(hook, handler, { ...options, before: true });
 	}
 
@@ -204,16 +218,16 @@ export class Hooks {
 	 * @param hook Name of the hook to listen for
 	 * @param handler The handler function to execute instead of the default handler
 	 * @param options Any other event options (see `hooks.on()` for details)
-	 * @returns The handler function
+	 * @returns A function to unregister the handler
 	 * @see on
 	 */
-	replace<T extends HookName>(hook: T, handler: Handler<T>): Handler<T>;
-	replace<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): Handler<T>;
+	replace<T extends HookName>(hook: T, handler: Handler<T>): HookUnregister;
+	replace<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): HookUnregister;
 	replace<T extends HookName>(
 		hook: T,
 		handler: Handler<T>,
 		options: HookOptions = {}
-	): Handler<T> {
+	): HookUnregister {
 		return this.on(hook, handler, { ...options, replace: true });
 	}
 
@@ -225,9 +239,13 @@ export class Hooks {
 	 * @param options Any other event options (see `hooks.on()` for details)
 	 * @see on
 	 */
-	once<T extends HookName>(hook: T, handler: Handler<T>): Handler<T>;
-	once<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): Handler<T>;
-	once<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions = {}): Handler<T> {
+	once<T extends HookName>(hook: T, handler: Handler<T>): HookUnregister;
+	once<T extends HookName>(hook: T, handler: Handler<T>, options: HookOptions): HookUnregister;
+	once<T extends HookName>(
+		hook: T,
+		handler: Handler<T>,
+		options: HookOptions = {}
+	): HookUnregister {
 		return this.on(hook, handler, { ...options, once: true });
 	}
 
@@ -241,7 +259,6 @@ export class Hooks {
 	off<T extends HookName>(hook: T, handler: Handler<T>): void;
 	off<T extends HookName>(hook: T, handler?: Handler<T>): void {
 		const ledger = this.get(hook);
-
 		if (ledger && handler) {
 			const deleted = ledger.delete(handler);
 			if (!deleted) {
@@ -265,11 +282,11 @@ export class Hooks {
 		args?: HookArguments<T>,
 		defaultHandler?: Handler<T>
 	): Promise<any> {
-		const { before, handler, after } = this.getHandlers(hook, defaultHandler);
+		const { before, handler, after, replaced } = this.getHandlers(hook, defaultHandler);
 		await this.execute(before, args);
-		const [result] = await this.execute(handler, args);
+		const [result] = await this.execute(handler, args, replaced ? defaultHandler : undefined);
 		await this.execute(after, args);
-		this.dispatchDomEvent(hook);
+		this.dispatchDomEvent(hook, args);
 		return result;
 	}
 
@@ -286,11 +303,11 @@ export class Hooks {
 		args?: HookArguments<T>,
 		defaultHandler?: Handler<T>
 	): any {
-		const { before, after, handler } = this.getHandlers(hook, defaultHandler);
+		const { before, after, handler, replaced } = this.getHandlers(hook, defaultHandler);
 		this.executeSync(before, args);
-		const [result] = this.executeSync(handler, args);
+		const [result] = this.executeSync(handler, args, replaced ? defaultHandler : undefined);
 		this.executeSync(after, args);
-		this.dispatchDomEvent(hook);
+		this.dispatchDomEvent(hook, args);
 		return result;
 	}
 
@@ -301,11 +318,12 @@ export class Hooks {
 	 */
 	async execute<T extends HookName>(
 		registrations: HookRegistration<T>[],
-		args?: HookArguments<T>
+		args?: HookArguments<T>,
+		defaultHandler?: Handler<T>
 	): Promise<any> {
 		const results = [];
 		for (const { hook, handler, once } of registrations) {
-			const result = await runAsPromise(handler, [this.swup.context, args]);
+			const result = await runAsPromise(handler, [this.swup.context, args, defaultHandler]);
 			results.push(result);
 			if (once) {
 				this.off(hook, handler);
@@ -321,11 +339,12 @@ export class Hooks {
 	 */
 	executeSync<T extends HookName>(
 		registrations: HookRegistration<T>[],
-		args?: HookArguments<T>
+		args?: HookArguments<T>,
+		defaultHandler?: Handler<T>
 	): any[] {
 		const results = [];
 		for (const { hook, handler, once } of registrations) {
-			const result = handler(this.swup.context, args as HookArguments<T>);
+			const result = handler(this.swup.context, args as HookArguments<T>, defaultHandler);
 			results.push(result);
 			if (isPromise(result)) {
 				console.warn(
@@ -378,7 +397,7 @@ export class Hooks {
 	 * @returns The sort direction
 	 */
 	sortRegistrations<T extends HookName>(a: HookRegistration<T>, b: HookRegistration<T>): number {
-		const priority = (b.priority ?? 0) - (a.priority ?? 0);
+		const priority = (a.priority ?? 0) - (b.priority ?? 0);
 		const id = a.id - b.id;
 		return priority || id || 0;
 	}
@@ -387,7 +406,8 @@ export class Hooks {
 	 * Trigger a custom event on the `document`. Prefixed with `swup:`
 	 * @param hook Name of the hook to trigger.
 	 */
-	dispatchDomEvent<T extends HookName>(hook: T): void {
-		document.dispatchEvent(new CustomEvent(`swup:${hook}`, { detail: hook }));
+	dispatchDomEvent<T extends HookName>(hook: T, args?: HookArguments<T>): void {
+		const detail = { hook, args, context: this.swup.context };
+		document.dispatchEvent(new CustomEvent(`swup:${hook}`, { detail }));
 	}
 }

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

@@ -77,18 +77,18 @@ describe('Cache', () => {
 	it('should trigger a hook on set', () => {
 		const handler = vi.fn();
 
-		swup.hooks.on('pageCached', handler);
+		swup.hooks.on('cache:set', handler);
 
 		cache.set(page1.url, page1);
 
 		expect(handler).toBeCalledTimes(1);
-		expect(handler).toBeCalledWith(ctx, { page: page1 });
+		expect(handler).toBeCalledWith(ctx, { page: page1 }, undefined);
 	});
 
 	it('should allow augmenting cache entries on save', () => {
 		const now = Date.now();
 
-		swup.hooks.on('pageCached', (_, { page }) => {
+		swup.hooks.on('cache:set', (_, { page }) => {
 			const ttl: CacheTtlData = { ttl: 1000, created: now };
 			cache.update(page.url, ttl as AugmentedCacheData);
 		});
@@ -101,7 +101,7 @@ describe('Cache', () => {
 	});
 
 	it('should allow manual pruning', () => {
-		swup.hooks.on('pageCached', (_, { page }) => {
+		swup.hooks.on('cache:set', (_, { page }) => {
 			cache.update(page.url, { index: cache.size } as AugmentedCacheData);
 		});
 
@@ -124,9 +124,9 @@ describe('Types', () => {
 		const cache = new Cache(swup);
 
 		// @ts-expect-no-error
-		swup.hooks.on('popState', (ctx: Context, { event: PopStateEvent }) => {});
+		swup.hooks.on('history:popstate', (ctx: Context, { event: PopStateEvent }) => {});
 		// @ts-expect-no-error
-		await swup.hooks.trigger('popState', { event: new PopStateEvent('') });
+		await swup.hooks.trigger('history:popstate', { event: new PopStateEvent('') });
 
 		try {
 			// @ts-expect-error

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

@@ -4,7 +4,7 @@ import { Handler, Hooks } from '../Hooks.js';
 import { Context } from '../Context.js';
 
 describe('Hook registry', () => {
-	it('should add custom handlers', () => {
+	it('should add handlers', () => {
 		const swup = new Swup();
 		const handler = vi.fn();
 
@@ -16,8 +16,8 @@ describe('Hook registry', () => {
 		};
 		const hooks = new HooksWithAccess(swup);
 
-		hooks.on('enabled', handler);
-		const ledger = hooks.getRegistry().get('enabled');
+		hooks.on('enable', handler);
+		const ledger = hooks.getRegistry().get('enable');
 
 		expect(ledger).toBeDefined();
 		expect(ledger).toBeInstanceOf(Map);
@@ -29,22 +29,57 @@ describe('Hook registry', () => {
 		expect(registration?.handler).toEqual(handler);
 	});
 
-	it('should return the passed handler', () => {
+	it('should remove handlers', async () => {
 		const swup = new Swup();
-		const handler = vi.fn();
+		const handler1 = vi.fn();
+		const handler2 = vi.fn();
+
+		swup.hooks.on('enable', handler1);
+		swup.hooks.on('enable', handler2);
+
+		await swup.hooks.trigger('enable');
+
+		expect(handler1).toBeCalledTimes(1);
+		expect(handler2).toBeCalledTimes(1);
+
+		swup.hooks.off('enable', handler2);
+
+		await swup.hooks.trigger('enable');
+
+		expect(handler1).toBeCalledTimes(2);
+		expect(handler2).toBeCalledTimes(1);
+	});
 
-		const handlerReturned = swup.hooks.on('enabled', handler);
+	it('should return a function to unregister the handler', async () => {
+		const swup = new Swup();
+		const handler1 = vi.fn();
+		const handler2 = vi.fn();
+
+		const unregister1 = swup.hooks.on('enable', handler1);
+		const unregister2 = swup.hooks.on('enable', handler2);
+
+		expect(unregister1).toBeTypeOf('function');
+
+		await swup.hooks.trigger('enable');
 
-		expect(handlerReturned).toEqual(handler);
+		expect(handler1).toBeCalledTimes(1);
+		expect(handler2).toBeCalledTimes(1);
+
+		unregister2();
+
+		await swup.hooks.trigger('enable');
+
+		expect(handler1).toBeCalledTimes(2);
+		expect(handler2).toBeCalledTimes(1);
 	});
 
 	it('should trigger custom handlers', async () => {
 		const swup = new Swup();
 		const handler = vi.fn();
 
-		swup.hooks.on('enabled', handler);
+		swup.hooks.on('enable', handler);
 
-		await swup.hooks.trigger('enabled');
+		await swup.hooks.trigger('enable');
 
 		expect(handler).toBeCalledTimes(1);
 	});
@@ -53,10 +88,10 @@ describe('Hook registry', () => {
 		const swup = new Swup();
 		const handler = vi.fn();
 
-		swup.hooks.on('enabled', handler, { once: true });
+		swup.hooks.on('enable', handler, { once: true });
 
-		await swup.hooks.trigger('enabled', undefined, () => {});
-		await swup.hooks.trigger('enabled', undefined, () => {});
+		await swup.hooks.trigger('enable', undefined, () => {});
+		await swup.hooks.trigger('enable', undefined, () => {});
 
 		expect(handler).toBeCalledTimes(1);
 	});
@@ -65,10 +100,10 @@ describe('Hook registry', () => {
 		const swup = new Swup();
 		const handler = vi.fn();
 
-		swup.hooks.once('enabled', handler);
+		swup.hooks.once('enable', handler);
 
-		await swup.hooks.trigger('enabled', undefined, () => {});
-		await swup.hooks.trigger('enabled', undefined, () => {});
+		await swup.hooks.trigger('enable', undefined, () => {});
+		await swup.hooks.trigger('enable', undefined, () => {});
 
 		expect(handler).toBeCalledTimes(1);
 	});
@@ -77,7 +112,7 @@ describe('Hook registry', () => {
 		const swup = new Swup();
 		const handler = vi.fn();
 
-		await swup.hooks.trigger('enabled', undefined, handler);
+		await swup.hooks.trigger('enable', undefined, handler);
 
 		expect(handler).toBeCalledTimes(1);
 	});
@@ -101,11 +136,11 @@ describe('Hook registry', () => {
 			}
 		};
 
-		swup.hooks.on('disabled', handlers.before, { before: true });
-		swup.hooks.on('disabled', handlers.normal, {});
-		swup.hooks.on('disabled', handlers.after, {});
+		swup.hooks.on('disable', handlers.before, { before: true });
+		swup.hooks.on('disable', handlers.normal, {});
+		swup.hooks.on('disable', handlers.after, {});
 
-		await swup.hooks.trigger('disabled', undefined, handlers.original);
+		await swup.hooks.trigger('disable', undefined, handlers.original);
 
 		expect(called).toEqual(['before', 'original', 'normal', 'after']);
 	});
@@ -132,44 +167,77 @@ describe('Hook registry', () => {
 			},
 			6: () => {
 				called.push(6);
+			},
+			7: () => {
+				called.push(7);
+			},
+			8: () => {
+				called.push(8);
 			}
 		};
 
-		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 });
+		swup.hooks.on('disable', handlers['1'], { priority: 2, before: true });
+		swup.hooks.on('disable', handlers['2'], { priority: -1, before: true });
+		swup.hooks.on('disable', handlers['3'], { priority: 1 });
+		swup.hooks.on('disable', handlers['4']);
+		swup.hooks.on('disable', handlers['8'], { priority: 4 });
+		swup.hooks.on('disable', handlers['7'], { priority: 4 });
 
-		await swup.hooks.trigger('disabled', undefined, handlers['3']);
+		await swup.hooks.trigger('disable', undefined, handlers['5']);
 
-		expect(called).toEqual([2, 1, 3, 4, 6, 5]);
+		expect(called).toEqual([2, 1, 5, 4, 3, 8, 7]);
 	});
 
 	it('should allow replacing original handlers', async () => {
+		const swup = new Swup();
+		const customHandler = vi.fn();
+		const defaultHandler = vi.fn();
+
+		swup.hooks.on('enable', customHandler, { replace: true });
+
+		await swup.hooks.trigger('enable', undefined, defaultHandler);
+
+		expect(customHandler).toBeCalledTimes(1);
+		expect(defaultHandler).toBeCalledTimes(0);
+	});
+
+	it('should pass original handler into replacing handlers', async () => {
+		const swup = new Swup();
+		const customHandler = vi.fn();
+		const defaultHandler = vi.fn();
+		const ctx = swup.context;
+
+		swup.hooks.on('enable', customHandler, { replace: true });
+
+		await swup.hooks.trigger('enable', undefined, defaultHandler);
+
+		expect(customHandler).toBeCalledWith(ctx, undefined, defaultHandler);
+	});
+
+	it('should not pass original handler into normal handlers', async () => {
 		const swup = new Swup();
 		const listener = vi.fn();
 		const handler = vi.fn();
+		const ctx = swup.context;
 
-		swup.hooks.on('enabled', listener, { replace: true });
+		swup.hooks.on('enable', listener);
 
-		await swup.hooks.trigger('enabled', undefined, handler);
+		await swup.hooks.trigger('enable', undefined, handler);
 
-		expect(handler).toBeCalledTimes(0);
-		expect(listener).toBeCalledTimes(1);
+		expect(listener).toBeCalledWith(ctx, undefined, undefined);
 	});
 
 	it('should trigger event handler with context and args', async () => {
 		const swup = new Swup();
-		const handler: Handler<'popState'> = vi.fn();
+		const handler: Handler<'history:popstate'> = vi.fn();
 		const ctx = swup.context;
 		const args = { event: new PopStateEvent('') };
 
-		swup.hooks.on('popState', handler);
-		await swup.hooks.trigger('popState', args);
+		swup.hooks.on('history:popstate', handler);
+		await swup.hooks.trigger('history:popstate', args);
 
 		expect(handler).toBeCalledTimes(1);
-		expect(handler).toBeCalledWith(ctx, args);
+		expect(handler).toBeCalledWith(ctx, args, undefined);
 	});
 });
 
@@ -178,15 +246,18 @@ describe('Types', () => {
 		const swup = new Swup();
 
 		// @ts-expect-no-error
-		swup.hooks.on('popState', (ctx: Context, { event }: { event: PopStateEvent }) => {});
+		swup.hooks.on(
+			'history:popstate',
+			(ctx: Context, { event }: { event: PopStateEvent }) => {}
+		);
 		// @ts-expect-no-error
-		await swup.hooks.trigger('popState', { event: new PopStateEvent('') });
+		await swup.hooks.trigger('history:popstate', { event: new PopStateEvent('') });
 
 		// @ts-expect-error
-		swup.hooks.on('popState', ({ event: MouseEvent }) => {});
+		swup.hooks.on('history:popstate', ({ event: MouseEvent }) => {});
 		// @ts-expect-error
-		swup.hooks.on('popState', (ctx: Context, { event }: { event: MouseEvent }) => {});
+		swup.hooks.on('history:popstate', (ctx: Context, { event }: { event: MouseEvent }) => {});
 		// @ts-expect-error
-		await swup.hooks.trigger('popState', { event: new MouseEvent('') });
+		await swup.hooks.trigger('history:popstate', { event: new MouseEvent('') });
 	});
 });