swup 3.0.0 → 3.0.2

package/src/modules/enterPage.ts

@@ -1,12 +1,10 @@
 import { nextTick } from '../utils';
 import Swup from '../Swup';
+import { PageRenderOptions } from './renderPage';
 
-export const enterPage = function (
-	this: Swup,
-	{ popstate, skipTransition }: { popstate?: PopStateEvent; skipTransition?: boolean }
-) {
+export const enterPage = function (this: Swup, { event, skipTransition }: PageRenderOptions = {}) {
 	if (skipTransition) {
-		this.triggerEvent('transitionEnd', popstate);
+		this.triggerEvent('transitionEnd', event);
 		this.cleanupAnimationClasses();
 		return [Promise.resolve()];
 	}
@@ -19,7 +17,7 @@ export const enterPage = function (
 	const animationPromises = this.getAnimationPromises('in');
 	Promise.all(animationPromises).then(() => {
 		this.triggerEvent('animationInDone');
-		this.triggerEvent('transitionEnd', popstate);
+		this.triggerEvent('transitionEnd', event);
 		this.cleanupAnimationClasses();
 	});
 	return animationPromises;

package/src/modules/events.ts

@@ -0,0 +1,67 @@
+import Swup from '../Swup';
+
+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[]>;
+
+export function on(this: Swup, event: EventType, handler: Handler) {
+	if (this._handlers[event]) {
+		this._handlers[event].push(handler);
+	} else {
+		console.warn(`Unsupported event ${event}.`);
+	}
+}
+
+export function off(this: Swup, event?: EventType, handler?: Handler) {
+	if (event && handler) {
+		// Remove specific handler
+		if (this._handlers[event].includes(handler)) {
+			this._handlers[event] = this._handlers[event].filter((h) => h !== handler);
+		} else {
+			console.warn(`Handler for event '${event}' not found.`);
+		}
+	} else if (event) {
+		// Remove all handlers for specific event
+		this._handlers[event] = [];
+	} else {
+		// Remove all handlers for all events
+		Object.keys(this._handlers).forEach((event) => {
+			this._handlers[event as EventType] = [];
+		});
+	}
+}
+
+export function triggerEvent(this: Swup, eventName: EventType, originalEvent?: Event): void {
+	// call saved handlers with "on" method and pass originalEvent object if available
+	this._handlers[eventName].forEach((handler) => {
+		try {
+			handler(originalEvent);
+		} catch (error) {
+			console.error(error);
+		}
+	});
+
+	// trigger event on document with prefix "swup:"
+	const event = new CustomEvent(`swup:${eventName}`, { detail: eventName });
+	document.dispatchEvent(event);
+}

package/src/modules/leavePage.ts

@@ -1,13 +1,9 @@
 import Swup from '../Swup';
-import { TransitionOptions } from './loadPage';
+import { PageRenderOptions } from './renderPage';
+
+export const leavePage = function (this: Swup, { event, skipTransition }: PageRenderOptions = {}) {
+	const isHistoryVisit = event instanceof PopStateEvent;
 
-export const leavePage = function (
-	this: Swup,
-	data: TransitionOptions,
-	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
-		popstate: null
-	}
-) {
 	if (skipTransition) {
 		this.triggerEvent('animationSkipped');
 		return [Promise.resolve()];
@@ -17,7 +13,7 @@ export const leavePage = function (
 
 	// handle classes
 	document.documentElement.classList.add('is-changing', 'is-leaving', 'is-animating');
-	if (popstate) {
+	if (isHistoryVisit) {
 		document.documentElement.classList.add('is-popstate');
 	}
 

package/src/modules/loadPage.ts

@@ -7,15 +7,30 @@ export type TransitionOptions = {
 	customTransition?: string;
 };
 
-export const loadPage = function (
-	this: Swup,
-	data: TransitionOptions,
-	popstate: PopStateEvent | null
-) {
-	const { url, customTransition } = data;
-	const skipTransition = !!(popstate && !this.options.animateHistoryBrowsing);
+export type PageLoadOptions = {
+	url: string;
+	event?: Event;
+	customTransition?: string;
+};
 
-	this.triggerEvent('transitionStart', popstate || undefined);
+export function loadPage(this: Swup, data: TransitionOptions) {
+	const { url } = data;
+
+	// Check if the visit should be ignored
+	if (this.shouldIgnoreVisit(url)) {
+		window.location.href = url;
+	} else {
+		this.performPageLoad(data);
+	}
+}
+
+export function performPageLoad(this: Swup, data: PageLoadOptions) {
+	const { url, event, customTransition } = data ?? {};
+
+	const isHistoryVisit = event instanceof PopStateEvent;
+	const skipTransition = this.shouldSkipTransition({ url, event });
+
+	this.triggerEvent('transitionStart', event);
 
 	// set transition object
 	this.updateTransition(getCurrentUrl(), url, customTransition);
@@ -24,10 +39,10 @@ export const loadPage = function (
 	}
 
 	// start/skip animation
-	const animationPromises = this.leavePage(data, { popstate, skipTransition });
+	const animationPromises = this.leavePage({ event, skipTransition });
 
 	// create history record if this is not a popstate call (with or without anchor)
-	if (!popstate) {
+	if (!isHistoryVisit) {
 		createHistoryRecord(url + (this.scrollToElement || ''));
 	}
 
@@ -39,7 +54,7 @@ export const loadPage = function (
 	// when everything is ready, render the page
 	Promise.all<PageRecord | void>([fetchPromise, ...animationPromises])
 		.then(([pageData]) => {
-			this.renderPage(pageData as PageRecord, { popstate, skipTransition });
+			this.renderPage(pageData as PageRecord, { event, skipTransition });
 		})
 		.catch((errorUrl) => {
 			// Return early if errorUrl is not defined (probably aborted preload request)
@@ -54,4 +69,4 @@ export const loadPage = function (
 			// Go back to the actual page we're still at
 			history.go(-1);
 		});
-};
+}

package/src/modules/renderPage.ts

@@ -2,12 +2,15 @@ import { Location, updateHistoryRecord, getCurrentUrl } from '../helpers';
 import Swup from '../Swup';
 import { PageRecord } from './Cache';
 
+export type PageRenderOptions = {
+	event?: Event;
+	skipTransition?: boolean;
+};
+
 export const renderPage = function (
 	this: Swup,
 	page: PageRecord,
-	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
-		popstate: null
-	}
+	{ event, skipTransition }: PageRenderOptions = {}
 ) {
 	document.documentElement.classList.remove('is-leaving');
 
@@ -30,11 +33,11 @@ export const renderPage = function (
 		document.documentElement.classList.add('is-rendering');
 	}
 
-	this.triggerEvent('willReplaceContent', popstate || undefined);
+	this.triggerEvent('willReplaceContent', event);
 
 	this.replaceContent(page).then(() => {
-		this.triggerEvent('contentReplaced', popstate || undefined);
-		this.triggerEvent('pageView', popstate || undefined);
+		this.triggerEvent('contentReplaced', event);
+		this.triggerEvent('pageView', event);
 
 		// empty cache if it's disabled (in case preload plugin filled it)
 		if (!this.options.cache) {
@@ -42,7 +45,7 @@ export const renderPage = function (
 		}
 
 		// Perform in transition
-		this.enterPage({ popstate: popstate || undefined, skipTransition });
+		this.enterPage({ event, skipTransition });
 
 		// reset scroll-to element
 		this.scrollToElement = null;

package/src/modules/transitions.ts

@@ -0,0 +1,10 @@
+import Swup from '../Swup';
+
+export function updateTransition(this: Swup, from: string, to: string, custom?: string): void {
+	this.transition = { from, to, custom };
+}
+
+export function shouldSkipTransition(this: Swup, { event }: { url?: string; event?: Event }) {
+	const isHistoryVisit = event instanceof PopStateEvent;
+	return !!(isHistoryVisit && !this.options.animateHistoryBrowsing);
+}

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

@@ -1,3 +0,0 @@
-import Swup from '../Swup';
-import { EventType, Handler } from './on';
-export declare const off: (this: Swup, event?: EventType, handler?: Handler) => void;

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

@@ -1,3 +0,0 @@
-import { EventType } from './on';
-import Swup from '../Swup';
-export declare const triggerEvent: (this: Swup, eventName: EventType, originalEvent?: PopStateEvent | MouseEvent) => void;

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

@@ -1,2 +0,0 @@
-import Swup from '../Swup';
-export declare const updateTransition: (this: Swup, from: string, to: string, custom?: string) => void;

package/src/modules/off.ts

@@ -1,21 +0,0 @@
-import Swup from '../Swup';
-import { EventType, Handler } from './on';
-
-export const off = function off(this: Swup, event?: EventType, handler?: Handler) {
-	if (event && handler) {
-		// Remove specific handler
-		if (this._handlers[event].includes(handler)) {
-			this._handlers[event] = this._handlers[event].filter((h) => h !== handler);
-		} else {
-			console.warn(`Handler for event '${event}' not found.`);
-		}
-	} else if (event) {
-		// Remove all handlers for specific event
-		this._handlers[event] = [];
-	} else {
-		// Remove all handlers for all events
-		Object.keys(this._handlers).forEach((event) => {
-			this._handlers[event as EventType] = [];
-		});
-	}
-};

package/src/modules/on.ts

@@ -1,33 +0,0 @@
-import Swup from '../Swup';
-
-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[]>;
-
-export const on = function on(this: Swup, event: EventType, handler: Handler) {
-	if (this._handlers[event]) {
-		this._handlers[event].push(handler);
-	} else {
-		console.warn(`Unsupported event ${event}.`);
-	}
-};

package/src/modules/triggerEvent.ts

@@ -1,21 +0,0 @@
-import { EventType } from './on';
-import Swup from '../Swup';
-
-export const triggerEvent = function (
-	this: Swup,
-	eventName: EventType,
-	originalEvent?: PopStateEvent | MouseEvent
-): void {
-	// call saved handlers with "on" method and pass originalEvent object if available
-	this._handlers[eventName].forEach((handler) => {
-		try {
-			handler(originalEvent);
-		} catch (error) {
-			console.error(error);
-		}
-	});
-
-	// trigger event on document with prefix "swup:"
-	const event = new CustomEvent(`swup:${eventName}`, { detail: eventName });
-	document.dispatchEvent(event);
-};

package/src/modules/updateTransition.ts

@@ -1,10 +0,0 @@
-import Swup from '../Swup';
-
-export const updateTransition = function (
-	this: Swup,
-	from: string,
-	to: string,
-	custom?: string
-): void {
-	this.transition = { from, to, custom };
-};