swup 3.0.1 → 3.0.3

package/src/__test__/index.test.ts

@@ -1,3 +1,4 @@
+import pckg from '../../package.json';
 import Swup, { Options, Plugin } from '../index';
 
 console.log = jest.fn();
@@ -6,8 +7,19 @@ console.error = jest.fn();
 
 const baseUrl = window.location.origin;
 
-describe('exports', () => {
-	it('exports Swup, and Options/Plugin types', () => {
+function createPlugin(plugin = {}) {
+	return {
+		name: 'TestPlugin',
+		isSwupPlugin: true as const,
+		mount: jest.fn(() => {}),
+		unmount: jest.fn(() => {}),
+		_checkRequirements: jest.fn(() => true),
+		...plugin
+	};
+}
+
+describe('Exports', () => {
+	it('should export Swup and Options/Plugin types', () => {
 		class SwupPlugin implements Plugin {
 			name = 'SwupPlugin';
 			isSwupPlugin = true as const;
@@ -32,21 +44,92 @@ describe('exports', () => {
 		};
 
 		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('passes relative URL to ignoreVisit', () => {
-		let ignorableUrl = 'nothing';
-		const swup = new Swup({
-			ignoreVisit: (url, { el } = {}) => {
-				ignorableUrl = url;
-				return false;
-			}
-		});
+describe('ignoreVisit', () => {
+	it('should be called with relative URL', () => {
+		const ignoreVisit = jest.fn(() => true);
+		const swup = new Swup({ ignoreVisit });
 
 		swup.shouldIgnoreVisit(baseUrl + '/path/?query#hash');
 
-		expect(ignorableUrl).toEqual('/path/?query#hash');
+		expect(ignoreVisit.mock.calls).toHaveLength(1);
+		expect(ignoreVisit.mock.lastCall).toBeDefined();
+		expect((ignoreVisit.mock.lastCall as any)[0]).toEqual('/path/?query#hash');
+	});
+
+	it('should be called from loadPage method', () => {
+		const ignoreVisit = jest.fn(() => true);
+		const swup = new Swup({ ignoreVisit });
+
+		swup.loadPage({ url: '/path/' });
+
+		expect(ignoreVisit.mock.calls).toHaveLength(1);
+	});
+});
+
+describe('Plugin module', () => {
+	it('should mount and unmount plugins', function () {
+		const plugin = createPlugin();
+		const swup = new Swup();
+		swup.use(plugin);
+		swup.unuse(plugin);
+
+		expect(plugin.mount.mock.calls).toHaveLength(1);
+		expect(plugin.unmount.mock.calls).toHaveLength(1);
+	});
+
+	it('should mount plugins from options', function () {
+		const plugin = createPlugin();
+		const swup = new Swup({ plugins: [plugin] });
+		expect(plugin.mount.mock.calls).toHaveLength(1);
+	});
+
+	it('should find a plugin instance by reference', function () {
+		const plugin = createPlugin({ name: 'ExamplePlugin' });
+		const swup = new Swup({ plugins: [plugin] });
+		const instance = swup.findPlugin(plugin);
+
+		expect(instance).toEqual(expect.objectContaining({ name: 'ExamplePlugin' }));
+	});
+
+	it('should find a plugin instance by name', function () {
+		const plugin = createPlugin({ name: 'ExamplePlugin' });
+		const swup = new Swup({ plugins: [plugin] });
+		const instance = swup.findPlugin('ExamplePlugin');
+
+		expect(instance).toEqual(expect.objectContaining({ name: 'ExamplePlugin' }));
+	});
+
+	it('should check plugin requirements', function () {
+		const plugin = createPlugin();
+		const swup = new Swup({ plugins: [plugin] });
+		expect(plugin._checkRequirements.mock.calls).toHaveLength(1);
+	});
+
+	it('should reject plugins with unmet requirements', function () {
+		const allowedPlugin = createPlugin({
+			name: 'AllowedPlugin',
+			_checkRequirements: () => true
+		});
+		const unallowedPlugin = createPlugin({
+			name: 'UnallowedPlugin',
+			_checkRequirements: () => false
+		});
+		const swup = new Swup({ plugins: [allowedPlugin, unallowedPlugin] });
+
+		const allowedInstance = swup.findPlugin(allowedPlugin);
+		expect(allowedInstance).toEqual(expect.objectContaining({ name: 'AllowedPlugin' }));
+
+		const unallowedInstance = swup.findPlugin(unallowedPlugin);
+		expect(unallowedInstance).toBeUndefined();
 	});
 });

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

@@ -51,11 +51,7 @@ export function off(this: Swup, event?: EventType, handler?: Handler) {
 	}
 }
 
-export function triggerEvent(
-	this: Swup,
-	eventName: EventType,
-	originalEvent?: PopStateEvent | MouseEvent
-): void {
+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 {

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/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/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 };
-};