swup 4.0.1 → 4.2.0

package/dist/types/modules/navigate.d.ts

@@ -3,6 +3,7 @@ import { FetchOptions } from './fetchPage.js';
 import { VisitInitOptions } from './Visit.js';
 export type HistoryAction = 'push' | 'replace';
 export type HistoryDirection = 'forwards' | 'backwards';
+export type NavigationToSelfAction = 'scroll' | 'navigate';
 /** Define how to navigate to a page. */
 type NavigationOptions = {
     /** Whether this visit is animated. Default: `true` */
@@ -30,5 +31,5 @@ export declare function navigate(this: Swup, url: string, options?: NavigationOp
  * @param options Options for how to perform this visit.
  * @returns Promise<void>
  */
-export declare function performNavigation(this: Swup, url: string, options?: NavigationOptions & FetchOptions): Promise<void>;
+export declare function performNavigation(this: Swup, options?: NavigationOptions & FetchOptions): Promise<void>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swup",
   "amdName": "Swup",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "description": "Versatile and extensible page transition library for server-rendered websites",
   "type": "module",
   "source": "./src/Swup.ts",
@@ -11,9 +11,9 @@
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/Swup.cjs",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/Swup.modern.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/Swup.cjs"
     }
   },
   "files": [

package/src/Swup.ts

@@ -11,7 +11,7 @@ import { Visit, createVisit } from './modules/Visit.js';
 import { Hooks } from './modules/Hooks.js';
 import { getAnchorElement } from './modules/getAnchorElement.js';
 import { awaitAnimations } from './modules/awaitAnimations.js';
-import { navigate, performNavigation } from './modules/navigate.js';
+import { navigate, performNavigation, NavigationToSelfAction } from './modules/navigate.js';
 import { fetchPage } from './modules/fetchPage.js';
 import { animatePageOut } from './modules/animatePageOut.js';
 import { replaceContent } from './modules/replaceContent.js';
@@ -38,6 +38,8 @@ export type Options = {
 	ignoreVisit: (url: string, { el, event }: { el?: Element; event?: Event }) => boolean;
 	/** Selector for links that trigger visits. Default: `'a[href]'` */
 	linkSelector: string;
+	/** How swup handles links to the same page. Default: `scroll` */
+	linkToSelf: NavigationToSelfAction;
 	/** Plugins to register on startup. */
 	plugins: Plugin[];
 	/** Custom headers sent along with fetch requests. */
@@ -56,6 +58,7 @@ const defaults: Options = {
 	containers: ['#swup'],
 	ignoreVisit: (url, { el, event } = {}) => !!el?.closest('[data-no-swup]'),
 	linkSelector: 'a[href]',
+	linkToSelf: 'scroll',
 	plugins: [],
 	resolveUrl: (url) => url,
 	requestHeaders: {
@@ -138,7 +141,7 @@ export default class Swup {
 		this.cache = new Cache(this);
 		this.classes = new Classes(this);
 		this.hooks = new Hooks(this);
-		this.visit = this.createVisit({ to: undefined });
+		this.visit = this.createVisit({ to: '' });
 
 		if (!this.checkRequirements()) {
 			return;
@@ -259,16 +262,24 @@ export default class Swup {
 
 			event.preventDefault();
 
-			// Handle links to the same page: with or without hash
+			// Handle links to the same page
 			if (!url || url === from) {
 				if (hash) {
+					// With hash: scroll to anchor
 					this.hooks.callSync('link:anchor', { hash }, () => {
 						updateHistoryRecord(url + hash);
 						this.scrollToContent();
 					});
 				} else {
+					// Without hash: scroll to top or load/reload page
 					this.hooks.callSync('link:self', undefined, () => {
-						this.scrollToContent();
+						switch (this.options.linkToSelf) {
+							case 'navigate':
+								return this.performNavigation();
+							case 'scroll':
+							default:
+								return this.scrollToContent();
+						}
 					});
 				}
 				return;
@@ -280,7 +291,7 @@ export default class Swup {
 			}
 
 			// Finally, proceed with loading the page
-			this.performNavigation(url);
+			this.performNavigation();
 		});
 	}
 
@@ -297,11 +308,6 @@ export default class Swup {
 			return;
 		}
 
-		// Exit early if the link should be ignored
-		if (this.shouldIgnoreVisit(href, { event })) {
-			return;
-		}
-
 		const { url, hash } = Location.fromUrl(href);
 		const animate = this.options.animateHistoryBrowsing;
 		const resetScroll = this.options.animateHistoryBrowsing;
@@ -330,7 +336,7 @@ export default class Swup {
 		// }
 
 		this.hooks.callSync('history:popstate', { event }, () => {
-			this.performNavigation(url);
+			this.performNavigation();
 		});
 	}
 

package/src/helpers/delegateEvent.ts

@@ -6,19 +6,18 @@ export type DelegateEventUnsubscribe = {
 };
 
 /** Register a delegated event listener. */
-export const delegateEvent = <Selector extends string, TEvent extends EventType>(
+export const delegateEvent = <
+	Selector extends string,
+	TElement extends Element = ParseSelector<Selector, HTMLElement>,
+	TEvent extends EventType = EventType
+>(
 	selector: Selector,
 	type: TEvent,
-	callback: DelegateEventHandler<GlobalEventHandlersEventMap[TEvent]>,
+	callback: DelegateEventHandler<GlobalEventHandlersEventMap[TEvent], TElement>,
 	options?: DelegateOptions
 ): DelegateEventUnsubscribe => {
 	const controller = new AbortController();
 	options = { ...options, signal: controller.signal };
-	delegate<string, ParseSelector<Selector, HTMLElement>, TEvent>(
-		selector,
-		type,
-		callback,
-		options
-	);
+	delegate<Selector, TElement, TEvent>(selector, type, callback, options);
 	return { destroy: () => controller.abort() };
 };

package/src/modules/Cache.ts

@@ -25,7 +25,11 @@ export class Cache {
 
 	/** All cached pages. */
 	get all() {
-		return this.pages;
+		const copy = new Map();
+		this.pages.forEach((page, key) => {
+			copy.set(key, { ...page });
+		});
+		return copy;
 	}
 
 	/** Check if the given URL has been cached. */
@@ -33,9 +37,11 @@ export class Cache {
 		return this.pages.has(this.resolve(url));
 	}
 
-	/** Return the cached page object if cached. */
+	/** Return a shallow copy of the cached page object if available. */
 	get(url: string): CacheData | undefined {
-		return this.pages.get(this.resolve(url));
+		const result = this.pages.get(this.resolve(url));
+		if (!result) return result;
+		return { ...result };
 	}
 
 	/** Create a cache record for the specified URL. */
@@ -47,9 +53,9 @@ export class Cache {
 	}
 
 	/** Update a cache record, overwriting or adding custom data. */
-	update(url: string, page: CacheData) {
+	update(url: string, payload: Record<string, any>) {
 		url = this.resolve(url);
-		page = { ...this.get(url), ...page, url };
+		const page = { ...this.get(url), ...payload, url } as CacheData;
 		this.pages.set(url, page);
 	}
 

package/src/modules/Visit.ts

@@ -26,7 +26,9 @@ export interface VisitFrom {
 
 export interface VisitTo {
 	/** The URL of the next page */
-	url?: string;
+	url: string;
+	/** The hash of the next page */
+	hash?: string;
 	/** The HTML content of the next page */
 	html?: string;
 }
@@ -68,7 +70,7 @@ export interface VisitHistory {
 }
 
 export interface VisitInitOptions {
-	to: string | undefined;
+	to: string;
 	from?: string;
 	hash?: string;
 	animate?: boolean;
@@ -86,7 +88,7 @@ export function createVisit(
 	{
 		to,
 		from = this.currentPageUrl,
-		hash: target,
+		hash,
 		animate = true,
 		animation: name,
 		el,
@@ -97,7 +99,7 @@ export function createVisit(
 ): Visit {
 	return {
 		from: { url: from },
-		to: { url: to },
+		to: { url: to, hash },
 		containers: this.options.containers,
 		animation: {
 			animate,
@@ -117,7 +119,7 @@ export function createVisit(
 		},
 		scroll: {
 			reset,
-			target
+			target: undefined
 		}
 	};
 }

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

@@ -116,6 +116,23 @@ describe('Cache', () => {
 		expect(cache.has(page2.url)).toBe(true);
 		expect(cache.has(page3.url)).toBe(false);
 	});
+
+	it('should return a copy from cache.get()', () => {
+		cache.set(page1.url, page1);
+		const page = cache.get(page1.url);
+		page!.html = 'new';
+		expect(cache.get(page1.url)?.html).toEqual(page1.html);
+	});
+
+	it('should return a new Map with shallow copies from cache.all', () => {
+		cache.set(page1.url, page1);
+		cache.set(page2.url, page2);
+
+		const all = cache.all;
+		all.get(page1.url)!.html = 'new';
+
+		expect(cache.get(page1.url)?.html).toEqual(page1.html);
+	});
 });
 
 describe('Types', () => {

package/src/modules/__test__/delegateEvent.ts

@@ -0,0 +1,36 @@
+import { DelegateEvent } from 'delegate-it';
+import { describe, it } from 'vitest';
+
+import { delegateEvent } from '../../helpers/delegateEvent.js';
+
+describe('delegateEvent', () => {
+	it('should return correct types', () => {
+		delegateEvent('form', 'submit', (event) => {});
+
+		// @ts-expect-no-error
+		delegateEvent('form', 'submit', (event: SubmitEvent) => {});
+		// @ts-expect-error
+		delegateEvent('form', 'submit', (event: MouseEvent) => {});
+
+		// @ts-expect-no-error
+		delegateEvent('form', 'submit', (event: DelegateEvent<SubmitEvent>) => {});
+		// @ts-expect-error
+		delegateEvent('form', 'submit', (event: DelegateEvent<MouseEvent>) => {});
+
+		// @ts-expect-no-error
+		delegateEvent('form', 'submit', (event: DelegateEvent<SubmitEvent, HTMLFormElement>) => {});
+		delegateEvent(
+			'form',
+			'submit',
+			// @ts-expect-error
+			(event: DelegateEvent<MouseEvent, HTMLAnchorElement>) => {}
+		);
+
+		delegateEvent('form', 'submit', (event) => {
+			// @ts-expect-no-error
+			const el: HTMLFormElement = event.delegateTarget;
+		});
+		// @ts-expect-error
+		delegateEvent('form', 'submit', (event: MouseEvent) => {});
+	});
+});

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

@@ -5,6 +5,7 @@ import { VisitInitOptions } from './Visit.js';
 
 export type HistoryAction = 'push' | 'replace';
 export type HistoryDirection = 'forwards' | 'backwards';
+export type NavigationToSelfAction = 'scroll' | 'navigate';
 
 /** Define how to navigate to a page. */
 type NavigationOptions = {
@@ -28,6 +29,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 +41,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 +57,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) {
@@ -95,10 +94,14 @@ export async function performNavigation(
 			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 +145,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/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);
 				}