swup 4.2.0 → 4.3.1

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/navigate.ts

@@ -1,11 +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 = {
@@ -15,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;
 };
 
 /**
@@ -83,14 +86,30 @@ 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;
 		});
 

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,7 +7,7 @@ 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;
+	const scrollTarget = target ?? this.visit.to.hash;
 
 	let scrolled = false;
 

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 {