swup 3.0.3 → 3.0.5

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

@@ -0,0 +1,71 @@
+import Swup from '../../Swup';
+import { Handler } from '../events';
+
+describe('events', () => {
+	it('should add event handlers to handlers array', () => {
+		const swup = new Swup();
+		const handler = jest.fn();
+
+		swup.on('enabled', handler);
+
+		expect(swup._handlers.enabled.indexOf(handler)).toBe(0);
+	});
+
+	it('should remove event handlers from handlers array', () => {
+		const swup = new Swup();
+		const handler = jest.fn();
+
+		swup.on('enabled', handler);
+		swup.on('animationInDone', handler);
+		swup.on('animationInStart', handler);
+
+		expect(swup._handlers.enabled.indexOf(handler)).toBe(0);
+		expect(swup._handlers.animationInDone.indexOf(handler)).toBe(0);
+		expect(swup._handlers.animationInStart.indexOf(handler)).toBe(0);
+
+		swup.off('enabled', handler);
+		expect(swup._handlers.enabled.indexOf(handler)).toBe(-1);
+
+		swup.off('animationInDone');
+		expect(swup._handlers.animationInDone.indexOf(handler)).toBe(-1);
+
+		swup.off();
+		expect(swup._handlers.animationInStart.indexOf(handler)).toBe(-1);
+	});
+
+	it('should trigger event handler', () => {
+		const swup = new Swup();
+		const handler = jest.fn();
+
+		swup.on('enabled', handler);
+
+		swup.triggerEvent('enabled');
+
+		expect(handler).toBeCalledTimes(1);
+	});
+
+	it('should trigger event handler with event', () => {
+		const swup = new Swup();
+		const handler: Handler<'popState'> = jest.fn();
+		const event = new PopStateEvent('');
+
+		swup.on('popState', handler);
+		swup.triggerEvent('popState', event);
+
+		expect(handler).toBeCalledWith(event);
+	});
+
+	it('types work and error when necessary', () => {
+		const swup = new Swup();
+
+		// @ts-expect-no-error
+		swup.on('popState', (event: PopStateEvent) => {});
+		// @ts-expect-no-error
+		swup.triggerEvent('popState', new PopStateEvent(''));
+
+		// @ts-expect-error
+		swup.on('popState', (event: MouseEvent) => {});
+		// @ts-expect-error
+		swup.triggerEvent('popState', new MouseEvent(''));
+	});
+});

package/src/modules/events.ts

@@ -1,42 +1,61 @@
 import Swup from '../Swup';
+import delegate from 'delegate-it';
 
-export type EventType =
-	| 'animationInDone'
-	| 'animationInStart'
-	| 'animationOutDone'
-	| 'animationOutStart'
-	| 'animationSkipped'
-	| 'clickLink'
-	| 'contentReplaced'
-	| 'disabled'
-	| 'enabled'
-	| 'openPageInNewTab'
-	| 'pageLoaded'
-	| 'pageRetrievedFromCache'
-	| 'pageView'
-	| 'popState'
-	| 'samePage'
-	| 'samePageWithHash'
-	| 'serverError'
-	| 'transitionStart'
-	| 'transitionEnd'
-	| 'willReplaceContent';
-export type Handler = (event?: Event) => void;
-export type Handlers = Record<EventType, Handler[]>;
+type HandlersEventMap = {
+	animationInDone: undefined;
+	animationInStart: undefined;
+	animationOutDone: undefined;
+	animationOutStart: undefined;
+	animationSkipped: undefined;
+	clickLink: delegate.Event<MouseEvent>;
+	contentReplaced: PopStateEvent | undefined;
+	disabled: undefined;
+	enabled: undefined;
+	openPageInNewTab: delegate.Event<MouseEvent>;
+	pageLoaded: undefined;
+	pageRetrievedFromCache: undefined;
+	pageView: PopStateEvent | undefined;
+	popState: PopStateEvent;
+	samePage: delegate.Event<MouseEvent>;
+	samePageWithHash: delegate.Event<MouseEvent>;
+	serverError: undefined;
+	transitionStart: PopStateEvent | undefined;
+	transitionEnd: PopStateEvent | undefined;
+	willReplaceContent: PopStateEvent | undefined;
+};
+type AvailableEventNames = keyof HandlersEventMap;
 
-export function on(this: Swup, event: EventType, handler: Handler) {
-	if (this._handlers[event]) {
-		this._handlers[event].push(handler);
+export type Handler<T extends keyof HandlersEventMap> = (event: HandlersEventMap[T]) => void;
+export type Handlers = {
+	[Key in keyof HandlersEventMap]: Handler<Key>[];
+};
+
+export function on<TEventType extends AvailableEventNames>(
+	this: Swup,
+	event: TEventType,
+	handler: Handler<TEventType>
+): void {
+	const eventHandlers = this._handlers[event] as Handler<TEventType>[];
+
+	if (eventHandlers) {
+		eventHandlers.push(handler);
 	} else {
 		console.warn(`Unsupported event ${event}.`);
 	}
 }
 
-export function off(this: Swup, event?: EventType, handler?: Handler) {
+export function off<TEventType extends AvailableEventNames>(
+	this: Swup,
+	event?: TEventType,
+	handler?: Handler<TEventType>
+) {
 	if (event && handler) {
+		const eventHandlers = this._handlers[event] as Handler<TEventType>[];
 		// Remove specific handler
-		if (this._handlers[event].includes(handler)) {
-			this._handlers[event] = this._handlers[event].filter((h) => h !== handler);
+		if (eventHandlers.includes(handler)) {
+			(this._handlers[event] as Handler<TEventType>[]) = eventHandlers.filter(
+				(h) => h !== handler
+			);
 		} else {
 			console.warn(`Handler for event '${event}' not found.`);
 		}
@@ -46,16 +65,22 @@ export function off(this: Swup, event?: EventType, handler?: Handler) {
 	} else {
 		// Remove all handlers for all events
 		Object.keys(this._handlers).forEach((event) => {
-			this._handlers[event as EventType] = [];
+			this._handlers[event as keyof HandlersEventMap] = [];
 		});
 	}
 }
 
-export function triggerEvent(this: Swup, eventName: EventType, originalEvent?: Event): void {
+export function triggerEvent<TEventType extends AvailableEventNames>(
+	this: Swup,
+	eventName: TEventType,
+	originalEvent?: HandlersEventMap[TEventType]
+): void {
+	const eventHandlers = this._handlers[eventName] as Handler<TEventType>[];
+
 	// call saved handlers with "on" method and pass originalEvent object if available
-	this._handlers[eventName].forEach((handler) => {
+	eventHandlers.forEach((handler) => {
 		try {
-			handler(originalEvent);
+			handler(originalEvent as HandlersEventMap[TEventType]);
 		} catch (error) {
 			console.error(error);
 		}

package/src/modules/loadPage.ts

@@ -9,7 +9,7 @@ export type TransitionOptions = {
 
 export type PageLoadOptions = {
 	url: string;
-	event?: Event;
+	event?: PopStateEvent;
 	customTransition?: string;
 };
 
@@ -41,6 +41,9 @@ export function performPageLoad(this: Swup, data: PageLoadOptions) {
 	// start/skip animation
 	const animationPromises = this.leavePage({ event, skipTransition });
 
+	// Load page data
+	const fetchPromise = this.fetchPage(data);
+
 	// create history record if this is not a popstate call (with or without anchor)
 	if (!isHistoryVisit) {
 		createHistoryRecord(url + (this.scrollToElement || ''));
@@ -48,9 +51,6 @@ export function performPageLoad(this: Swup, data: PageLoadOptions) {
 
 	this.currentPageUrl = getCurrentUrl();
 
-	// Load page data
-	const fetchPromise = this.fetchPage(data);
-
 	// when everything is ready, render the page
 	Promise.all<PageRecord | void>([fetchPromise, ...animationPromises])
 		.then(([pageData]) => {

package/src/modules/renderPage.ts

@@ -3,7 +3,7 @@ import Swup from '../Swup';
 import { PageRecord } from './Cache';
 
 export type PageRenderOptions = {
-	event?: Event;
+	event?: PopStateEvent;
 	skipTransition?: boolean;
 };