swup 3.1.1 → 4.0.0-rc.20

package/src/helpers/getDataFromHtml.ts

@@ -1,39 +0,0 @@
-import { query, queryAll } from '../utils.js';
-
-export type PageHtmlData = {
-	title: string;
-	originalContent: string;
-	blocks: string[];
-	pageClass?: string;
-};
-
-export const getDataFromHtml = (html: string, containers: string[]): PageHtmlData => {
-	let fakeDom = document.createElement('html');
-	fakeDom.innerHTML = html;
-	let blocks: string[] = [];
-
-	containers.forEach((selector) => {
-		if (query(selector, fakeDom) == null) {
-			console.warn(`[swup] Container ${selector} not found on page.`);
-			return null;
-		} else {
-			if (queryAll(selector).length !== queryAll(selector, fakeDom).length) {
-				console.warn(`[swup] Mismatched number of containers found on new page.`);
-			}
-			queryAll(selector).forEach((item, index) => {
-				queryAll(selector, fakeDom)[index].setAttribute('data-swup', String(blocks.length));
-				blocks.push(queryAll(selector, fakeDom)[index].outerHTML);
-			});
-		}
-	});
-
-	const title = query('title', fakeDom)?.innerText || '';
-	const pageClass = query('body', fakeDom)?.className;
-
-	// to prevent memory leaks
-	fakeDom.innerHTML = '';
-	// @ts-ignore don't want to type it as possible null, since it's created at the top of the function always
-	fakeDom = null;
-
-	return { title, pageClass, blocks, originalContent: html };
-};

package/src/helpers/markSwupElements.ts

@@ -1,16 +0,0 @@
-import { query, queryAll } from '../utils.js';
-
-export const markSwupElements = (element: Element, containers: string[]): void => {
-	let blocks = 0;
-
-	containers.forEach((selector) => {
-		if (query(selector, element) == null) {
-			console.warn(`[swup] Container ${selector} not found on page.`);
-		} else {
-			queryAll(selector).forEach((item: Element, index: number) => {
-				queryAll(selector, element)[index].setAttribute('data-swup', String(blocks));
-				blocks++;
-			});
-		}
-	});
-};

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

@@ -1,72 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import Swup from '../../Swup.js';
-import { Handler } from '../events.js';
-
-describe('events', () => {
-	it('should add event handlers to handlers array', () => {
-		const swup = new Swup();
-		const handler = vi.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 = vi.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 = vi.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'> = vi.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,92 +0,0 @@
-import Swup from '../Swup.js';
-import { DelegateEvent } from 'delegate-it';
-
-type HandlersEventMap = {
-	animationInDone: undefined;
-	animationInStart: undefined;
-	animationOutDone: undefined;
-	animationOutStart: undefined;
-	animationSkipped: undefined;
-	clickLink: DelegateEvent<MouseEvent>;
-	contentReplaced: PopStateEvent | undefined;
-	disabled: undefined;
-	enabled: undefined;
-	openPageInNewTab: DelegateEvent<MouseEvent>;
-	pageLoaded: undefined;
-	pageRetrievedFromCache: undefined;
-	pageView: PopStateEvent | undefined;
-	popState: PopStateEvent;
-	samePage: DelegateEvent<MouseEvent>;
-	samePageWithHash: DelegateEvent<MouseEvent>;
-	serverError: undefined;
-	transitionStart: PopStateEvent | undefined;
-	transitionEnd: PopStateEvent | undefined;
-	willReplaceContent: PopStateEvent | undefined;
-};
-type AvailableEventNames = keyof HandlersEventMap;
-
-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<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 (eventHandlers.includes(handler)) {
-			(this._handlers[event] as Handler<TEventType>[]) = eventHandlers.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 keyof HandlersEventMap] = [];
-		});
-	}
-}
-
-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
-	eventHandlers.forEach((handler) => {
-		try {
-			handler(originalEvent as HandlersEventMap[TEventType]);
-		} 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/getAnimationPromises.ts

@@ -1,183 +0,0 @@
-import { queryAll, toMs } from '../utils.js';
-import Swup from '../Swup.js';
-
-// Transition property/event sniffing
-let transitionProp = 'transition';
-let transitionEndEvent = 'transitionend';
-let animationProp = 'animation';
-let animationEndEvent = 'animationend';
-
-if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
-	transitionProp = 'WebkitTransition';
-	transitionEndEvent = 'webkitTransitionEnd';
-}
-
-if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) {
-	animationProp = 'WebkitAnimation';
-	animationEndEvent = 'webkitAnimationEnd';
-}
-
-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'
-): Promise<void>[] {
-	const selector = this.options.animationSelector;
-
-	// 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()];
-	}
-
-	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()];
-	}
-
-	const animationPromises = animatedElements
-		.map((element) => getAnimationPromiseForElement(element))
-		.filter(Boolean) as Promise<void>[];
-
-	if (!animationPromises.length) {
-		console.warn(
-			`[swup] No CSS animation duration defined on elements matching \`${selector}\``
-		);
-		return [Promise.resolve()];
-	}
-
-	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);
-
-	// Resolve immediately if no transition defined
-	if (!type || !timeout) {
-		return undefined;
-	}
-
-	return new Promise((resolve) => {
-		const endEvent = type === 'transition' ? transitionEndEvent : animationEndEvent;
-		const startTime = performance.now();
-		let propsTransitioned = 0;
-
-		const end = () => {
-			element.removeEventListener(endEvent, onEnd);
-			resolve();
-		};
-
-		const onEnd: EventListener = (event) => {
-			// Skip transitions on child elements
-			if (event.target !== element) {
-				return;
-			}
-
-			if (!isTransitionOrAnimationEvent(event)) {
-				throw new Error('Not a transition or animation event.');
-			}
-
-			// Skip transitions that happened before we started listening
-			const elapsedTime = (performance.now() - startTime) / 1000;
-			if (elapsedTime < event.elapsedTime) {
-				return;
-			}
-
-			// End if all properties have transitioned
-			if (++propsTransitioned >= propCount) {
-				end();
-			}
-		};
-
-		setTimeout(() => {
-			if (propsTransitioned < propCount) {
-				end();
-			}
-		}, timeout + 1);
-
-		element.addEventListener(endEvent, onEnd);
-	});
-}
-
-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);
-
-	const animationDelays = (
-		(styles[animationDelay] || '') as CSSStyleDeclaration['animationDelay']
-	).split(', ');
-	const animationDurations = (
-		(styles[animationDuration] || '') as CSSStyleDeclaration['animationDuration']
-	).split(', ');
-	const animationTimeout = calculateTimeout(animationDelays, animationDurations);
-
-	let type: string | null = '';
-	let timeout = 0;
-	let propCount = 0;
-
-	if (expectedType === 'transition') {
-		if (transitionTimeout > 0) {
-			type = 'transition';
-			timeout = transitionTimeout;
-			propCount = transitionDurations.length;
-		}
-	} else if (expectedType === 'animation') {
-		if (animationTimeout > 0) {
-			type = 'animation';
-			timeout = animationTimeout;
-			propCount = animationDurations.length;
-		}
-	} else {
-		timeout = Math.max(transitionTimeout, animationTimeout);
-		type =
-			timeout > 0
-				? transitionTimeout > animationTimeout
-					? 'transition'
-					: 'animation'
-				: null;
-		propCount = type
-			? type === 'transition'
-				? transitionDurations.length
-				: animationDurations.length
-			: 0;
-	}
-
-	return {
-		type,
-		timeout,
-		propCount
-	};
-}
-
-function calculateTimeout(delays: string[], durations: string[]) {
-	while (delays.length < durations.length) {
-		delays = delays.concat(delays);
-	}
-
-	return Math.max(...durations.map((duration, i) => toMs(duration) + toMs(delays[i])));
-}

package/src/modules/getPageData.ts

@@ -1,24 +0,0 @@
-import { getDataFromHtml } from '../helpers.js';
-import Swup from '../Swup.js';
-import { PageHtmlData } from '../helpers/getDataFromHtml.js';
-
-export type PageData = PageHtmlData & {
-	responseURL: string;
-};
-export const getPageData = function (this: Swup, request: XMLHttpRequest): PageData | null {
-	// this method can be replaced in case other content than html is expected to be received from server
-	// this function should always return { title, pageClass, originalContent, blocks, responseURL }
-	// in case page has invalid structure - return null
-	const html = request.responseText;
-	const pageHtmlData = getDataFromHtml(html, this.options.containers);
-
-	if (!pageHtmlData) {
-		console.warn('[swup] Received page is invalid.');
-		return null;
-	}
-
-	return {
-		...pageHtmlData,
-		responseURL: request.responseURL || window.location.href
-	};
-};

package/src/modules/loadPage.ts

@@ -1,81 +0,0 @@
-import { classify, createHistoryRecord, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
-import Swup from '../Swup.js';
-import { PageRecord } from './Cache.js';
-
-export type HistoryAction = 'push' | 'replace';
-
-export type TransitionOptions = {
-	url: string;
-	customTransition?: string;
-	history?: HistoryAction;
-};
-
-export type PageLoadOptions = {
-	url: string;
-	customTransition?: string;
-	history?: HistoryAction;
-	event?: PopStateEvent;
-};
-
-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, history: historyAction = 'push' } = data ?? {};
-
-	const isHistoryVisit = event instanceof PopStateEvent;
-	const skipTransition = this.shouldSkipTransition({ url, event });
-
-	this.triggerEvent('transitionStart', event);
-
-	// set transition object
-	this.updateTransition(getCurrentUrl(), url, customTransition);
-	if (customTransition != null) {
-		document.documentElement.classList.add(`to-${classify(customTransition)}`);
-	}
-
-	// 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) {
-		const historyUrl = url + (this.scrollToElement || '');
-		if (historyAction === 'replace') {
-			updateHistoryRecord(historyUrl);
-		} else {
-			createHistoryRecord(historyUrl);
-		}
-	}
-
-	this.currentPageUrl = getCurrentUrl();
-
-	// when everything is ready, render the page
-	Promise.all<PageRecord | void>([fetchPromise, ...animationPromises])
-		.then(([pageData]) => {
-			this.renderPage(pageData as PageRecord, { event, skipTransition });
-		})
-		.catch((errorUrl) => {
-			// Return early if errorUrl is not defined (probably aborted preload request)
-			if (errorUrl === undefined) return;
-
-			// Rewrite `skipPopStateHandling` to redirect manually when `history.go` is processed
-			this.options.skipPopStateHandling = () => {
-				window.location = errorUrl;
-				return true;
-			};
-
-			// Go back to the actual page we're still at
-			history.go(-1);
-		});
-}

package/src/modules/transitions.ts

@@ -1,10 +0,0 @@
-import Swup from '../Swup.js';
-
-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);
-}