swup 4.1.0 → 4.3.0

package/src/modules/animatePageOut.ts

@@ -7,7 +7,7 @@ import { classify } from '../helpers.js';
  */
 export const animatePageOut = async function (this: Swup) {
 	if (!this.visit.animation.animate) {
-		await this.hooks.call('animation:skip');
+		await this.hooks.call('animation:skip', undefined);
 		return;
 	}
 
@@ -26,5 +26,5 @@ export const animatePageOut = async function (this: Swup) {
 		await this.awaitAnimations({ selector: visit.animation.selector });
 	});
 
-	await this.hooks.call('animation:out:end');
+	await this.hooks.call('animation:out:end', undefined);
 };

package/src/modules/awaitAnimations.ts

@@ -150,7 +150,7 @@ export function getTransitionInfo(element: Element, expectedType?: AnimationType
 	};
 }
 
-function isTransitionOrAnimationEvent(event: any): event is TransitionEvent | AnimationEvent {
+function isTransitionOrAnimationEvent(event: Event): event is TransitionEvent | AnimationEvent {
 	return [`${TRANSITION}end`, `${ANIMATION}end`].includes(event.type);
 }
 

package/src/modules/fetchPage.ts

@@ -10,13 +10,11 @@ export interface PageData {
 }
 
 /** Define how a page is fetched. */
-export interface FetchOptions extends RequestInit {
+export interface FetchOptions extends Omit<RequestInit, 'cache'> {
 	/** The request method. */
 	method?: 'GET' | 'POST';
 	/** The body of the request: raw string, form data object or URL params. */
 	body?: string | FormData | URLSearchParams;
-	/** The headers of the request: key/value object. */
-	headers?: Record<string, string>;
 }
 
 export class FetchError extends Error {
@@ -66,8 +64,12 @@ export async function fetchPage(
 	const { url: finalUrl } = Location.fromUrl(responseUrl);
 	const page = { url: finalUrl, html };
 
-	// Only save cache entry for non-redirects
-	if (url === finalUrl) {
+	// Write to cache for safe methods and non-redirects
+	if (
+		this.visit.cache.write &&
+		(!options.method || options.method === 'GET') &&
+		url === finalUrl
+	) {
 		this.cache.set(page.url, page);
 	}
 

package/src/modules/getAnchorElement.ts

@@ -8,7 +8,7 @@ import { escapeCssIdentifier as escape, query } from '../utils.js';
  *
  * @see https://html.spec.whatwg.org/#find-a-potential-indicated-element
  */
-export const getAnchorElement = (hash: string): Element | null => {
+export const getAnchorElement = (hash?: string): Element | null => {
 	if (hash && hash.charAt(0) === '#') {
 		hash = hash.substring(1);
 	}

package/src/modules/navigate.ts

@@ -1,10 +1,12 @@
 import Swup from '../Swup.js';
 import { createHistoryRecord, updateHistoryRecord, getCurrentUrl, Location } from '../helpers.js';
-import { FetchOptions } from './fetchPage.js';
+import { FetchOptions, PageData } from './fetchPage.js';
 import { VisitInitOptions } from './Visit.js';
 
 export type HistoryAction = 'push' | 'replace';
 export type HistoryDirection = 'forwards' | 'backwards';
+export type NavigationToSelfAction = 'scroll' | 'navigate';
+export type CacheControl = Partial<{ read: boolean; write: boolean }>;
 
 /** Define how to navigate to a page. */
 type NavigationOptions = {
@@ -14,6 +16,8 @@ type NavigationOptions = {
 	animation?: string;
 	/** History action to perform: `push` for creating a new history entry, `replace` for replacing the current entry. Default: `push` */
 	history?: HistoryAction;
+	/** Whether this visit should read from or write to the cache. */
+	cache?: CacheControl;
 };
 
 /**
@@ -28,6 +32,10 @@ export function navigate(
 	options: NavigationOptions & FetchOptions = {},
 	init: Omit<VisitInitOptions, 'to'> = {}
 ) {
+	if (typeof url !== 'string') {
+		throw new Error(`swup.navigate() requires a URL parameter`);
+	}
+
 	// Check if the visit should be ignored
 	if (this.shouldIgnoreVisit(url, { el: init.el, event: init.event })) {
 		window.location.href = url;
@@ -36,7 +44,7 @@ export function navigate(
 
 	const { url: to, hash } = Location.fromUrl(url);
 	this.visit = this.createVisit({ ...init, to, hash });
-	this.performNavigation(to, options);
+	this.performNavigation(options);
 }
 
 /**
@@ -52,15 +60,9 @@ export function navigate(
  */
 export async function performNavigation(
 	this: Swup,
-	url: string,
 	options: NavigationOptions & FetchOptions = {}
 ) {
-	if (typeof url !== 'string') {
-		throw new Error(`swup.navigate() requires a URL parameter`);
-	}
-
 	const { el } = this.visit.trigger;
-	this.visit.to.url = Location.fromUrl(url).url;
 	options.referrer = options.referrer || this.currentPageUrl;
 
 	if (options.animate === false) {
@@ -84,21 +86,41 @@ export async function performNavigation(
 		this.visit.animation.name = animation;
 	}
 
+	// Sanitize cache option
+	if (typeof options.cache === 'object') {
+		this.visit.cache.read = options.cache.read ?? this.visit.cache.read;
+		this.visit.cache.write = options.cache.write ?? this.visit.cache.write;
+	} else if (options.cache !== undefined) {
+		this.visit.cache = { read: !!options.cache, write: !!options.cache };
+	}
+	// Delete this so that window.fetch doesn't mis-interpret it
+	delete options.cache;
+
 	try {
-		await this.hooks.call('visit:start');
+		await this.hooks.call('visit:start', undefined);
 
 		// Begin loading page
 		const pagePromise = this.hooks.call('page:load', { options }, async (visit, args) => {
-			const cachedPage = this.cache.get(visit.to.url!);
-			args.page = cachedPage || (await this.fetchPage(visit.to.url!, args.options));
+			// Read from cache
+			let cachedPage: PageData | undefined;
+			if (this.visit.cache.read) {
+				cachedPage = this.cache.get(visit.to.url);
+			}
+
+			args.page = cachedPage || (await this.fetchPage(visit.to.url, args.options));
 			args.cache = !!cachedPage;
+
 			return args.page;
 		});
 
-		// Create history record if this is not a popstate call (with or without anchor)
+		// Create/update history record if this is not a popstate call or leads to the same URL
 		if (!this.visit.history.popstate) {
-			const newUrl = url + (this.visit.scroll.target || '');
-			if (this.visit.history.action === 'replace') {
+			// Add the hash directly from the trigger element
+			const newUrl = this.visit.to.url + this.visit.to.hash;
+			if (
+				this.visit.history.action === 'replace' ||
+				this.visit.to.url === this.currentPageUrl
+			) {
 				updateHistoryRecord(newUrl);
 			} else {
 				const index = this.currentHistoryIndex + 1;
@@ -142,7 +164,7 @@ export async function performNavigation(
 
 		// Rewrite `skipPopStateHandling` to redirect manually when `history.go` is processed
 		this.options.skipPopStateHandling = () => {
-			window.location.href = this.visit.to.url as string;
+			window.location.href = this.visit.to.url + this.visit.to.hash;
 			return true;
 		};
 

package/src/modules/plugins.ts

@@ -21,8 +21,8 @@ export type Plugin = {
 };
 
 const isSwupPlugin = (maybeInvalidPlugin: unknown): maybeInvalidPlugin is Plugin => {
-	// @ts-ignore
-	return maybeInvalidPlugin?.isSwupPlugin;
+	// @ts-ignore: this might be anything, object or no
+	return Boolean(maybeInvalidPlugin?.isSwupPlugin);
 };
 
 /** Install a plugin. */
@@ -72,6 +72,6 @@ export function findPlugin(this: Swup, pluginOrName: Plugin | string) {
 		(plugin) =>
 			plugin === pluginOrName ||
 			plugin.name === pluginOrName ||
-			plugin.name === `Swup${pluginOrName}`
+			plugin.name === `Swup${String(pluginOrName)}`
 	);
 }

package/src/modules/renderPage.ts

@@ -47,14 +47,10 @@ export const renderPage = async function (this: Swup, requestedUrl: string, page
 	});
 
 	// scroll into view: either anchor or top of page
+	// @ts-ignore: not returning a promise is intentional to allow users to pause in handler
 	await this.hooks.call('content:scroll', undefined, () => {
 		return this.scrollToContent();
 	});
 
 	await this.hooks.call('page:view', { 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();
-	}
 };

package/src/modules/replaceContent.ts

@@ -1,4 +1,5 @@
 import Swup, { Options } from '../Swup.js';
+import { query, queryAll } from '../utils.js';
 import { PageData } from './fetchPage.js';
 
 /**
@@ -20,6 +21,9 @@ export const replaceContent = function (
 	const title = incomingDocument.querySelector('title')?.innerText || '';
 	document.title = title;
 
+	// Save persisted elements
+	const persistedElements = queryAll('[data-swup-persist]:not([data-swup-persist=""])');
+
 	// Update content containers
 	const replaced = containers
 		.map((selector) => {
@@ -39,5 +43,14 @@ export const replaceContent = function (
 		})
 		.filter(Boolean);
 
+	// Restore persisted elements
+	persistedElements.forEach((existing) => {
+		const key = existing.getAttribute('data-swup-persist');
+		const replacement = query(`[data-swup-persist="${key}"]`);
+		if (replacement && replacement !== existing) {
+			replacement.replaceWith(existing);
+		}
+	});
+
 	return replaced.length === containers.length;
 };

package/src/modules/scrollToContent.ts

@@ -7,14 +7,16 @@ import Swup from '../Swup.js';
 export const scrollToContent = function (this: Swup): boolean {
 	const options: ScrollIntoViewOptions = { behavior: 'auto' };
 	const { target, reset } = this.visit.scroll;
+	const scrollTarget = target || this.visit.to.hash;
+
 	let scrolled = false;
 
-	if (target) {
+	if (scrollTarget) {
 		scrolled = this.hooks.callSync(
 			'scroll:anchor',
-			{ hash: target, options },
+			{ hash: scrollTarget, options },
 			(visit, { hash, options }) => {
-				const anchor = this.getAnchorElement(hash || '');
+				const anchor = this.getAnchorElement(hash);
 				if (anchor) {
 					anchor.scrollIntoView(options);
 				}

package/src/utils/index.ts

@@ -23,18 +23,19 @@ export const nextTick = (): Promise<void> => {
 };
 
 /** Check if an object is a Promise or a Thenable */
-export function isPromise<T>(obj: any): obj is PromiseLike<T> {
+export function isPromise<T>(obj: unknown): obj is PromiseLike<T> {
 	return (
 		!!obj &&
 		(typeof obj === 'object' || typeof obj === 'function') &&
-		typeof obj.then === 'function'
+		typeof (obj as Record<string, unknown>).then === 'function'
 	);
 }
 
 /** Call a function as a Promise. Resolves with the returned Promsise or immediately. */
-export function runAsPromise(func: Function, args: any[] = []): Promise<any> {
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+export function runAsPromise(func: Function, args: unknown[] = []): Promise<unknown> {
 	return new Promise((resolve, reject) => {
-		const result = func(...args);
+		const result: unknown = func(...args);
 		if (isPromise(result)) {
 			result.then(resolve, reject);
 		} else {