swup 3.1.0 → 4.0.0-rc.14

package/src/modules/loadPage.ts

@@ -1,81 +1,99 @@
-import { classify, createHistoryRecord, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
 import Swup from '../Swup.js';
-import { PageRecord } from './Cache.js';
+import { createHistoryRecord, updateHistoryRecord, getCurrentUrl, Location } from '../helpers.js';
+import { FetchOptions } from '../modules/fetchPage.js';
+import { ContextInitOptions } from './Context.js';
 
 export type HistoryAction = 'push' | 'replace';
 
-export type TransitionOptions = {
-	url: string;
-	customTransition?: string;
-	history?: HistoryAction;
-};
-
 export type PageLoadOptions = {
-	url: string;
-	customTransition?: string;
+	animate?: boolean;
+	transition?: string;
 	history?: HistoryAction;
-	event?: PopStateEvent;
 };
 
-export function loadPage(this: Swup, data: TransitionOptions) {
-	const { url } = data;
-
+export function loadPage(
+	this: Swup,
+	url: string,
+	options: PageLoadOptions & FetchOptions = {},
+	context: Omit<ContextInitOptions, 'to'> = {}
+) {
 	// Check if the visit should be ignored
 	if (this.shouldIgnoreVisit(url)) {
 		window.location.href = url;
 	} else {
-		this.performPageLoad(data);
+		const { url: to, hash } = Location.fromUrl(url);
+		this.context = this.createContext({ ...context, to, hash });
+		this.performPageLoad(to, options);
 	}
 }
 
-export function performPageLoad(this: Swup, data: PageLoadOptions) {
-	const { url, event, customTransition, history: historyAction = 'push' } = data ?? {};
+export async function performPageLoad(
+	this: Swup,
+	url: string,
+	options: PageLoadOptions & FetchOptions = {}
+) {
+	if (typeof url !== 'string') {
+		throw new Error(`loadPage requires a URL parameter`);
+	}
 
-	const isHistoryVisit = event instanceof PopStateEvent;
-	const skipTransition = this.shouldSkipTransition({ url, event });
+	const { url: requestedUrl } = Location.fromUrl(url);
+	const { transition, animate, history: historyAction } = options;
+	options.referrer = options.referrer || this.currentPageUrl;
 
-	this.triggerEvent('transitionStart', event);
+	if (animate === false) {
+		this.context.transition.animate = false;
+	}
+	if (historyAction) {
+		this.context.history.action = historyAction;
+	}
 
-	// set transition object
-	this.updateTransition(getCurrentUrl(), url, customTransition);
-	if (customTransition != null) {
-		document.documentElement.classList.add(`to-${classify(customTransition)}`);
+	if (!this.context.transition.animate) {
+		document.documentElement.classList.remove('is-animating');
+		this.cleanupAnimationClasses();
+	} else if (transition) {
+		this.context.transition.name = transition;
 	}
 
-	// start/skip animation
-	const animationPromises = this.leavePage({ event, skipTransition });
+	try {
+		await this.hooks.trigger('transitionStart');
+		const animationPromise = this.leavePage();
+		const pagePromise = this.hooks.trigger(
+			'loadPage',
+			{ url, options },
+			async (context, { url, options, page }) => await (page || this.fetchPage(url, options))
+		);
+
+		// create history record if this is not a popstate call (with or without anchor)
+		if (!this.context.history.popstate) {
+			const newUrl = url + (this.context.scroll.target || '');
+			if (this.context.history.action === 'replace') {
+				updateHistoryRecord(newUrl);
+			} else {
+				createHistoryRecord(newUrl);
+			}
+		}
 
-	// Load page data
-	const fetchPromise = this.fetchPage(data);
+		this.currentPageUrl = getCurrentUrl();
 
-	// 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);
+		// when everything is ready, render the page
+		const [page] = await Promise.all([pagePromise, animationPromise]);
+		this.renderPage(requestedUrl, page);
+	} catch (error: unknown) {
+		// Return early if error is undefined (probably aborted preload request)
+		if (!error) {
+			return;
 		}
-	}
 
-	this.currentPageUrl = getCurrentUrl();
+		// Log to console as we swallow almost all hook errors
+		console.error(error);
 
-	// 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.href = requestedUrl;
+			return true;
+		};
 
-			// 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);
-		});
+		// Go back to the actual page we're still at
+		history.go(-1);
+	}
 }

package/src/modules/renderPage.ts

@@ -1,53 +1,62 @@
-import { Location, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
+import { updateHistoryRecord, getCurrentUrl } from '../helpers.js';
 import Swup from '../Swup.js';
-import { PageRecord } from './Cache.js';
+import { PageData } from './fetchPage.js';
 
-export type PageRenderOptions = {
-	event?: PopStateEvent;
-	skipTransition?: boolean;
-};
+export const renderPage = async function (this: Swup, requestedUrl: string, page: PageData) {
+	const { url } = page;
 
-export const renderPage = function (
-	this: Swup,
-	page: PageRecord,
-	{ event, skipTransition }: PageRenderOptions = {}
-) {
 	document.documentElement.classList.remove('is-leaving');
 
 	// do nothing if another page was requested in the meantime
-	if (!this.isSameResolvedUrl(getCurrentUrl(), page.url)) {
+	if (!this.isSameResolvedUrl(getCurrentUrl(), requestedUrl)) {
 		return;
 	}
 
-	const { url } = Location.fromUrl(page.responseURL);
-
-	// update cache and state if the url was redirected
+	// update state if the url was redirected
 	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
-		this.cache.cacheUrl({ ...page, url });
-		this.currentPageUrl = getCurrentUrl();
 		updateHistoryRecord(url);
+		this.currentPageUrl = getCurrentUrl();
+		this.context.to!.url = this.currentPageUrl;
 	}
 
 	// only add for page loads with transitions
-	if (!skipTransition) {
+	if (this.context.transition.animate) {
 		document.documentElement.classList.add('is-rendering');
 	}
 
-	this.triggerEvent('willReplaceContent', event);
-
-	this.replaceContent(page).then(() => {
-		this.triggerEvent('contentReplaced', event);
-		this.triggerEvent('pageView', event);
-
-		// empty cache if it's disabled (in case preload plugin filled it)
-		if (!this.options.cache) {
-			this.cache.empty();
+	// replace content: allow handlers and plugins to overwrite paga data and containers
+	await this.hooks.trigger(
+		'replaceContent',
+		{ page, containers: this.context.containers },
+		(context, { page, containers }) => {
+			this.replaceContent(page, { containers });
+		}
+	);
+
+	await this.hooks.trigger(
+		'scrollToContent',
+		{ options: { behavior: 'auto' } },
+		(context, { options }) => {
+			if (this.context.scroll.target) {
+				const target = this.getAnchorElement(this.context.scroll.target);
+				if (target) {
+					target.scrollIntoView(options);
+					return;
+				}
+			}
+			if (this.context.scroll.reset) {
+				window.scrollTo(0, 0);
+			}
 		}
+	);
 
-		// Perform in transition
-		this.enterPage({ event, skipTransition });
+	await this.hooks.trigger('pageView', { url: this.currentPageUrl, title: document.title });
+
+	// empty cache if it's disabled (in case preload plugin filled it)
+	if (!this.options.cache) {
+		this.cache.clear();
+	}
 
-		// reset scroll-to element
-		this.scrollToElement = null;
-	});
+	// Perform in transition
+	this.enterPage();
 };

package/src/modules/replaceContent.ts

@@ -1,26 +1,35 @@
+import Swup, { Options } from '../Swup.js';
+import { PageData } from './fetchPage.js';
+
 /**
  * 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
+ * It takes an object with the page data as returned from `fetchPage` and a list
+ * of container selectors to replace.
  */
-export 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;
-	});
+export const replaceContent = function (
+	this: Swup,
+	{ html }: PageData,
+	{ containers }: { containers: Options['containers'] } = this.options
+): void {
+	const doc = new DOMParser().parseFromString(html, 'text/html');
 
 	// Update browser title
+	const title = doc.querySelector('title')?.innerText || '';
 	document.title = title;
 
-	// Return a Promise to allow plugins to defer
-	return Promise.resolve();
+	// Update content containers
+	containers.forEach((selector) => {
+		const currentEl = document.querySelector(selector);
+		const incomingEl = doc.querySelector(selector);
+		if (!currentEl) {
+			console.warn(`[swup] Container missing in current document: ${selector}`);
+			return;
+		}
+		if (!incomingEl) {
+			console.warn(`[swup] Container missing in incoming document: ${selector}`);
+			return;
+		}
+		currentEl.replaceWith(incomingEl);
+	});
 };

package/src/utils/index.ts

@@ -9,14 +9,35 @@ export const queryAll = (
 	return Array.from(context.querySelectorAll(selector));
 };
 
-export const nextTick = (callback: () => void) => {
-	requestAnimationFrame(() => {
+export const nextTick = (): Promise<void> => {
+	return new Promise((resolve) => {
 		requestAnimationFrame(() => {
-			callback();
+			requestAnimationFrame(() => {
+				resolve();
+			});
 		});
 	});
 };
 
+export function isPromise<T>(obj: any): obj is PromiseLike<T> {
+	return (
+		!!obj &&
+		(typeof obj === 'object' || typeof obj === 'function') &&
+		typeof obj.then === 'function'
+	);
+}
+
+export function runAsPromise(func: Function, args: any[] = [], ctx: any = {}): Promise<any> {
+	return new Promise((resolve, reject) => {
+		const result = func.apply(ctx, args);
+		if (isPromise(result)) {
+			result.then(resolve, reject);
+		} else {
+			resolve(result);
+		}
+	});
+}
+
 export const escapeCssIdentifier = (ident: string) => {
 	// @ts-ignore this is for support check, so it's correct that TS complains
 	if (window.CSS && window.CSS.escape) {

package/src/helpers/fetch.ts

@@ -1,33 +0,0 @@
-import { TransitionOptions } from '../modules/loadPage.js';
-import { Options } from '../Swup.js';
-
-export const fetch = (
-	options: TransitionOptions & { headers: Options['requestHeaders'] },
-	callback: (request: XMLHttpRequest) => void
-): XMLHttpRequest => {
-	const defaults = {
-		url: window.location.pathname + window.location.search,
-		method: 'GET',
-		data: null,
-		headers: {}
-	};
-
-	const { url, method, headers, data } = { ...defaults, ...options };
-
-	const request = new XMLHttpRequest();
-
-	request.onreadystatechange = function () {
-		if (request.readyState === 4) {
-			// if (request.status === 500) {} else {}
-			callback(request);
-		}
-	};
-
-	request.open(method, url, true);
-	Object.entries(headers).forEach(([key, header]) => {
-		request.setRequestHeader(key, header);
-	});
-	request.send(data);
-
-	return request;
-};

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