swup 2.0.19 → 3.0.0-rc.2

package/src/modules/Cache.ts

@@ -0,0 +1,57 @@
+import { getCurrentUrl, Location } from '../helpers.js';
+import Swup from '../Swup.js';
+import { PageData } from './getPageData.js';
+
+export interface PageRecord extends PageData {
+	url: string;
+	responseURL: string;
+}
+export class Cache {
+	pages: Record<string, PageRecord> = {};
+	last: PageRecord | null = null;
+	swup: Swup;
+
+	constructor(swup: Swup) {
+		this.swup = swup;
+	}
+
+	getCacheUrl(url: string): string {
+		return this.swup.resolveUrl(Location.fromUrl(url).url);
+	}
+
+	cacheUrl(page: PageRecord) {
+		page.url = this.getCacheUrl(page.url);
+		if (page.url in this.pages === false) {
+			this.pages[page.url] = page;
+		}
+		page.responseURL = this.getCacheUrl(page.responseURL);
+		this.last = this.pages[page.url];
+		this.swup.log(`Cache (${Object.keys(this.pages).length})`, this.pages);
+	}
+
+	getPage(url: string): PageRecord {
+		url = this.getCacheUrl(url);
+		return this.pages[url];
+	}
+
+	getCurrentPage(): PageRecord {
+		return this.getPage(getCurrentUrl());
+	}
+
+	exists(url: string): boolean {
+		url = this.getCacheUrl(url);
+		return url in this.pages;
+	}
+
+	empty(): void {
+		this.pages = {};
+		this.last = null;
+		this.swup.log('Cache cleared');
+	}
+
+	remove(url: string): void {
+		delete this.pages[this.getCacheUrl(url)];
+	}
+}
+
+export default Cache;

package/src/modules/enterPage.ts

@@ -0,0 +1,28 @@
+import { nextTick } from '../utils.js';
+import Swup from '../Swup.js';
+
+const enterPage = function (
+	this: Swup,
+	{ popstate, skipTransition }: { popstate?: PopStateEvent; skipTransition?: boolean }
+) {
+	if (skipTransition) {
+		this.triggerEvent('transitionEnd', popstate);
+		this.cleanupAnimationClasses();
+		return [Promise.resolve()];
+	}
+
+	nextTick(() => {
+		this.triggerEvent('animationInStart');
+		document.documentElement.classList.remove('is-animating');
+	});
+
+	const animationPromises = this.getAnimationPromises('in');
+	Promise.all(animationPromises).then(() => {
+		this.triggerEvent('animationInDone');
+		this.triggerEvent('transitionEnd', popstate);
+		this.cleanupAnimationClasses();
+	});
+	return animationPromises;
+};
+
+export default enterPage;

package/src/modules/fetchPage.ts

@@ -0,0 +1,35 @@
+import Swup from '../Swup.js';
+import { fetch } from '../helpers.js';
+import { TransitionOptions } from './loadPage.js';
+import { PageRecord } from './Cache.js';
+
+export default function fetchPage(this: Swup, data: TransitionOptions): Promise<PageRecord> {
+	const headers = this.options.requestHeaders;
+	const { url } = data;
+
+	if (this.cache.exists(url)) {
+		this.triggerEvent('pageRetrievedFromCache');
+		return Promise.resolve(this.cache.getPage(url));
+	}
+
+	return new Promise((resolve, reject) => {
+		fetch({ ...data, headers }, (response) => {
+			if (response.status === 500) {
+				this.triggerEvent('serverError');
+				reject(url);
+				return;
+			}
+			// get json data
+			const page = this.getPageData(response);
+			if (!page || !page.blocks.length) {
+				reject(url);
+				return;
+			}
+			// render page
+			const cacheablePageData = { ...page, url };
+			this.cache.cacheUrl(cacheablePageData);
+			this.triggerEvent('pageLoaded');
+			resolve(cacheablePageData);
+		});
+	});
+}

package/src/modules/getAnchorElement.ts

@@ -0,0 +1,19 @@
+import { escapeCssIdentifier, query } from '../utils.js';
+
+const getAnchorElement = (hash: string): Element | null => {
+	if (!hash) {
+		return null;
+	}
+
+	if (hash.charAt(0) === '#') {
+		hash = hash.substring(1);
+	}
+
+	hash = decodeURIComponent(hash);
+	hash = escapeCssIdentifier(hash);
+
+	// https://html.spec.whatwg.org/#find-a-potential-indicated-element
+	return query(`#${hash}`) || query(`a[name='${hash}']`);
+};
+
+export default getAnchorElement;

package/src/modules/getAnimationPromises.ts

@@ -0,0 +1,179 @@
+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 default 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 animated containers found on page, but keep things going
+	if (!animatedElements.length) {
+		console.warn(`[swup] No animated elements found by selector ${selector}`);
+		return [Promise.resolve()];
+	}
+
+	return animatedElements.map((element) => getAnimationPromiseForElement(element, selector));
+}
+
+const isTransitionOrAnimationEvent = (event: any): event is TransitionEvent | AnimationEvent =>
+	!!event.elapsedTime;
+
+function getAnimationPromiseForElement(
+	element: Element,
+	selector: string,
+	expectedType: 'animation' | 'transition' | null = null
+): Promise<void> {
+	const { type, timeout, propCount } = getTransitionInfo(element, expectedType);
+
+	// Resolve immediately if no transition defined
+	if (!type || !timeout) {
+		console.warn(
+			`[swup] No CSS transition duration defined for element of selector ${selector}`
+		);
+		return Promise.resolve();
+	}
+
+	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

@@ -0,0 +1,26 @@
+import { getDataFromHtml } from '../helpers.js';
+import Swup from '../Swup.js';
+import { PageHtmlData } from '../helpers/getDataFromHtml.js';
+
+export type PageData = PageHtmlData & {
+	responseURL: string;
+};
+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
+	};
+};
+
+export default getPageData;

package/src/modules/leavePage.ts

@@ -0,0 +1,33 @@
+import Swup from '../Swup.js';
+import { TransitionOptions } from './loadPage.js';
+
+const leavePage = function (
+	this: Swup,
+	data: TransitionOptions,
+	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
+		popstate: null
+	}
+) {
+	if (skipTransition) {
+		this.triggerEvent('animationSkipped');
+		return [Promise.resolve()];
+	}
+
+	this.triggerEvent('animationOutStart');
+
+	// handle classes
+	document.documentElement.classList.add('is-changing', 'is-leaving', 'is-animating');
+	if (popstate) {
+		document.documentElement.classList.add('is-popstate');
+	}
+
+	// animation promise stuff
+	const animationPromises: Promise<void>[] = this.getAnimationPromises('out');
+	Promise.all(animationPromises).then(() => {
+		this.triggerEvent('animationOutDone');
+	});
+
+	return animationPromises;
+};
+
+export default leavePage;

package/src/modules/loadPage.ts

@@ -0,0 +1,55 @@
+import { classify, createHistoryRecord, getCurrentUrl } from '../helpers.js';
+import Swup from '../Swup.js';
+import { PageRecord } from './Cache.js';
+
+export type TransitionOptions = {
+	url: string;
+	customTransition?: string;
+};
+
+const loadPage = function (this: Swup, data: TransitionOptions, popstate: PopStateEvent | null) {
+	const { url, customTransition } = data;
+	const skipTransition = !!(popstate && !this.options.animateHistoryBrowsing);
+
+	this.triggerEvent('transitionStart', popstate || undefined);
+
+	// 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(data, { popstate, skipTransition });
+
+	// create history record if this is not a popstate call (with or without anchor)
+	if (!popstate) {
+		createHistoryRecord(url + (this.scrollToElement || ''));
+	}
+
+	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]) => {
+			this.renderPage(pageData as PageRecord, { popstate, 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);
+		});
+};
+
+export default loadPage;

package/src/modules/off.ts

@@ -0,0 +1,23 @@
+import Swup from '../Swup.js';
+import { EventType, Handler } from './on.js';
+
+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] = [];
+		});
+	}
+};
+
+export default off;

package/src/modules/on.ts

@@ -0,0 +1,35 @@
+import Swup from '../Swup.js';
+
+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[]>;
+
+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}.`);
+	}
+};
+
+export default on;

package/src/modules/plugins.ts

@@ -0,0 +1,58 @@
+import Swup from '../Swup.js';
+
+// this should probably just be imported from @swup/plugin, but it doesn't have type defs now
+export type Plugin = {
+	name: string;
+	mount: () => void;
+	unmount: () => void;
+	isSwupPlugin: true;
+	swup?: Swup;
+
+	// these are possibly undefined for backward compatibility
+	_beforeMount?: () => void;
+	_afterUnmount?: () => void;
+	_checkRequirements?: () => boolean;
+};
+
+export const use = function (this: Swup, plugin: Plugin) {
+	if (!plugin.isSwupPlugin) {
+		console.error('Not a swup plugin instance', plugin);
+		return;
+	}
+
+	plugin.swup = this;
+	if (plugin._checkRequirements) {
+		if (!plugin._checkRequirements()) {
+			return;
+		}
+	}
+	if (plugin._beforeMount) {
+		plugin._beforeMount();
+	}
+	plugin.mount();
+
+	this.plugins.push(plugin);
+
+	return this.plugins;
+};
+
+export function unuse(this: Swup, pluginOrName: Plugin | string) {
+	const plugin = this.findPlugin(pluginOrName);
+	if (!plugin) {
+		console.error('No such plugin', plugin);
+		return;
+	}
+
+	plugin.unmount();
+	if (plugin._afterUnmount) {
+		plugin._afterUnmount();
+	}
+
+	this.plugins = this.plugins.filter((p) => p !== plugin);
+
+	return this.plugins;
+}
+
+export function findPlugin(this: Swup, pluginOrName: Plugin | string) {
+	return this.plugins.find((plugin) => plugin === pluginOrName || plugin.name === pluginOrName);
+}

package/src/modules/renderPage.ts

@@ -0,0 +1,52 @@
+import { Location, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
+import Swup from '../Swup.js';
+import { PageRecord } from './Cache.js';
+
+const renderPage = function (
+	this: Swup,
+	page: PageRecord,
+	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
+		popstate: null
+	}
+) {
+	document.documentElement.classList.remove('is-leaving');
+
+	// do nothing if another page was requested in the meantime
+	if (!this.isSameResolvedUrl(getCurrentUrl(), page.url)) {
+		return;
+	}
+
+	const { url } = Location.fromUrl(page.responseURL);
+
+	// update cache and state if the url was redirected
+	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
+		this.cache.cacheUrl({ ...page, url });
+		this.currentPageUrl = getCurrentUrl();
+		updateHistoryRecord(url);
+	}
+
+	// only add for page loads with transitions
+	if (!skipTransition) {
+		document.documentElement.classList.add('is-rendering');
+	}
+
+	this.triggerEvent('willReplaceContent', popstate || undefined);
+
+	this.replaceContent(page).then(() => {
+		this.triggerEvent('contentReplaced', popstate || undefined);
+		this.triggerEvent('pageView', popstate || undefined);
+
+		// empty cache if it's disabled (in case preload plugin filled it)
+		if (!this.options.cache) {
+			this.cache.empty();
+		}
+
+		// Perform in transition
+		this.enterPage({ popstate: popstate || undefined, skipTransition });
+
+		// reset scroll-to element
+		this.scrollToElement = null;
+	});
+};
+
+export default renderPage;

package/src/modules/replaceContent.ts

@@ -0,0 +1,28 @@
+/**
+ * Perform the replacement of content after loading a page.
+ *
+ * This method can be replaced or augmented by plugins to allow pausing.
+ *
+ * It takes an object with the page data as return from `getPageData` and has to
+ * return a Promise that resolves once all content has been replaced and the
+ * site is ready to start animating in the new page.
+ *
+ * @param {object} page The page object
+ * @returns Promise
+ */
+const replaceContent = function ({ blocks, title }: { blocks: string[]; title: string }) {
+	// Replace content blocks
+	blocks.forEach((html, i) => {
+		// we know the block exists at this point
+		const block = document.body.querySelector(`[data-swup="${i}"]`)!;
+		block.outerHTML = html;
+	});
+
+	// Update browser title
+	document.title = title;
+
+	// Return a Promise to allow plugins to defer
+	return Promise.resolve();
+};
+
+export default replaceContent;

package/src/modules/triggerEvent.ts

@@ -0,0 +1,23 @@
+import { EventType } from './on.js';
+import Swup from '../Swup.js';
+
+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);
+};
+
+export default triggerEvent;

package/src/modules/updateTransition.ts

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