swup 3.1.0 → 4.0.0-rc.14

package/src/helpers/__test__/matchPath.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { matchPath } from '../../index.js';
+import { pathToRegexp } from 'path-to-regexp';
+
+describe('matchPath', () => {
+	it('should return false if not matching', () => {
+		const urlMatch = matchPath('/users/:user');
+		const match = urlMatch('/posts/');
+		expect(match).toBe(false);
+	});
+
+	it('should return an object if matching', () => {
+		const urlMatch = matchPath('/users/:user');
+		const match = urlMatch('/users/bob');
+		expect(match).toEqual({
+			path: '/users/bob',
+			index: 0,
+			params: { user: 'bob' }
+		});
+	});
+
+	it('should work with primitive strings', () => {
+		const urlMatch = matchPath<{ user: string }>('/users/:user');
+		const match = urlMatch('/users/bob');
+		const params = !match ? false : match.params;
+		expect(params).toEqual({ user: 'bob' });
+	});
+
+	it('should work with an array of paths', () => {
+		const urlMatch = matchPath<{ user: string }>(['/users/', '/users/:user']);
+
+		const { params: withParams } = urlMatch('/users/bob') || {};
+		expect(withParams).toEqual({ user: 'bob' });
+
+		const { params: withoutParams } = urlMatch('/users/') || {};
+		expect(withoutParams).toEqual({});
+	});
+
+	/**
+	 * When passing a regex to `match`, the params in the response are sorted by appearance.
+	 * Only helpful for falsy/truthy detection
+	 */
+	it('should work with regex', () => {
+		const re = pathToRegexp('/users/:user');
+		const urlMatch = matchPath(re);
+		const { params } = urlMatch('/users/bob') || {};
+		expect(params).toEqual({ '0': 'bob' });
+	});
+
+	it('should throw with malformed paths', () => {
+		// prettier-ignore
+		expect(() => matchPath('/\?user=:user')).toThrowError('[swup] Error parsing path');
+	});
+});

package/src/helpers/delegateEvent.ts

@@ -12,6 +12,7 @@ export const delegateEvent = <Selector extends string, TEvent extends EventType>
 	options?: DelegateOptions
 ): Unsubscribe => {
 	const controller = new AbortController();
+	options = { ...options, signal: controller.signal };
 	delegate<string, ParseSelector<Selector, HTMLElement>, TEvent>(
 		selector,
 		type,

package/src/helpers/matchPath.ts

@@ -0,0 +1,22 @@
+import { match } from 'path-to-regexp';
+
+import type {
+	Path,
+	ParseOptions,
+	TokensToRegexpOptions,
+	RegexpToFunctionOptions,
+	MatchFunction
+} from 'path-to-regexp';
+
+export { Path };
+
+export const matchPath = <P extends object = object>(
+	path: Path,
+	options?: ParseOptions & TokensToRegexpOptions & RegexpToFunctionOptions
+): MatchFunction<P> => {
+	try {
+		return match<P>(path, options);
+	} catch (error) {
+		throw new Error(`[swup] Error parsing path "${path}":\n${error}`);
+	}
+};

package/src/helpers.ts

@@ -1,13 +1,11 @@
 // Re-export all helpers to allow custom package export path
-// e.g. import { getPageData } from 'swup/helpers'
+// e.g. import { updateHistoryRecord } from 'swup'
 
 export { classify } from './helpers/classify.js';
 export { createHistoryRecord } from './helpers/createHistoryRecord.js';
 export { updateHistoryRecord } from './helpers/updateHistoryRecord.js';
 export { delegateEvent } from './helpers/delegateEvent.js';
-export { getDataFromHtml } from './helpers/getDataFromHtml.js';
-export { fetch } from './helpers/fetch.js';
 export { getCurrentUrl } from './helpers/getCurrentUrl.js';
 export { Location } from './helpers/Location.js';
-export { markSwupElements } from './helpers/markSwupElements.js';
 export { cleanupAnimationClasses } from './helpers/cleanupAnimationClasses.js';
+export { matchPath } from './helpers/matchPath.js';

package/src/index.ts

@@ -1,10 +1,13 @@
-import Swup, { Options } from './Swup.js';
-import { Plugin } from './modules/plugins.js';
-import { Handler } from './modules/events.js';
+import Swup, { type Options } from './Swup.js';
+import type { CacheData } from './modules/Cache.js';
+import type { Context, PageContext } from './modules/Context.js';
+import type { Plugin } from './modules/plugins.js';
+import type { HookDefinitions, Handler } from './modules/Hooks.js';
+import type { Path } from 'path-to-regexp';
 
 export default Swup;
 
 export * from './helpers.js';
 export * from './utils.js';
 
-export type { Options, Plugin, Handler };
+export type { Options, Plugin, CacheData, Context, PageContext, HookDefinitions, Handler, Path };

package/src/modules/Cache.ts

@@ -1,55 +1,65 @@
-import { getCurrentUrl, Location } from '../helpers.js';
 import Swup from '../Swup.js';
-import { PageData } from './getPageData.js';
+import { Location } from '../helpers.js';
+import { PageData } from './fetchPage.js';
+
+export interface CacheData extends PageData {}
 
-export interface PageRecord extends PageData {
-	url: string;
-	responseURL: string;
-}
 export class Cache {
-	pages: Record<string, PageRecord> = {};
-	last: PageRecord | null = null;
-	swup: Swup;
+	private swup: Swup;
+	private pages: Map<string, CacheData> = new Map();
 
 	constructor(swup: Swup) {
 		this.swup = swup;
 	}
 
-	getCacheUrl(url: string): string {
-		return this.swup.resolveUrl(Location.fromUrl(url).url);
+	get size() {
+		return this.pages.size;
+	}
+
+	get all() {
+		return this.pages;
+	}
+
+	public has(url: string): boolean {
+		return this.pages.has(this.resolve(url));
+	}
+
+	public get(url: string): CacheData | undefined {
+		return this.pages.get(this.resolve(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);
+	public set(url: string, page: CacheData) {
+		url = this.resolve(url);
+		page = { ...page, url };
+		this.pages.set(url, page);
+		this.swup.hooks.triggerSync('pageCached', { page });
 	}
 
-	getPage(url: string): PageRecord {
-		url = this.getCacheUrl(url);
-		return this.pages[url];
+	public update(url: string, page: CacheData) {
+		url = this.resolve(url);
+		page = { ...this.get(url), ...page, url };
+		this.pages.set(url, page);
 	}
 
-	getCurrentPage(): PageRecord {
-		return this.getPage(getCurrentUrl());
+	public delete(url: string): void {
+		this.pages.delete(this.resolve(url));
 	}
 
-	exists(url: string): boolean {
-		url = this.getCacheUrl(url);
-		return url in this.pages;
+	public clear(): void {
+		this.pages.clear();
+		this.swup.hooks.triggerSync('cacheCleared');
 	}
 
-	empty(): void {
-		this.pages = {};
-		this.last = null;
-		this.swup.log('Cache cleared');
+	public prune(predicate: (url: string, page: CacheData) => boolean): void {
+		this.pages.forEach((page, url) => {
+			if (predicate(url, page)) {
+				this.delete(url);
+			}
+		});
 	}
 
-	remove(url: string): void {
-		delete this.pages[this.getCacheUrl(url)];
+	private resolve(urlToResolve: string): string {
+		const { url } = Location.fromUrl(urlToResolve);
+		return this.swup.resolveUrl(url);
 	}
 }

package/src/modules/Context.ts

@@ -0,0 +1,91 @@
+import Swup, { Options } from '../Swup.js';
+import { HistoryAction } from './loadPage.js';
+
+export interface Context<TEvent = Event> {
+	from: PageContext;
+	to?: PageContext;
+	containers: Options['containers'];
+	transition: TransitionContext;
+	trigger: TriggerContext<TEvent>;
+	history: HistoryContext;
+	scroll: ScrollContext;
+}
+
+export interface PageContext {
+	url: string;
+}
+
+export interface TransitionContext {
+	animate: boolean;
+	name?: string;
+}
+
+export interface ScrollContext {
+	reset: boolean;
+	target?: string;
+}
+
+export interface TriggerContext<TEvent = Event> {
+	el?: Element;
+	event?: TEvent;
+}
+
+export interface HistoryContext {
+	action: HistoryAction;
+	popstate: boolean;
+	// direction: 'forward' | 'backward' | undefined
+}
+
+export interface ContextInitOptions {
+	to: string | undefined;
+	from?: string;
+	hash?: string;
+	containers?: Options['containers'];
+	animate?: boolean;
+	transition?: string;
+	el?: Element;
+	event?: Event;
+	popstate?: boolean;
+	action?: HistoryAction;
+	resetScroll?: boolean;
+}
+
+export function createContext(
+	this: Swup,
+	{
+		to,
+		from = this.currentPageUrl,
+		hash: target,
+		containers = this.options.containers,
+		animate = true,
+		transition,
+		el,
+		event,
+		popstate = false,
+		action = 'push',
+		resetScroll: reset = true
+	}: ContextInitOptions
+): Context {
+	return {
+		from: { url: from },
+		to: to !== undefined ? { url: to } : undefined,
+		containers,
+		transition: {
+			animate,
+			name: transition
+		},
+		trigger: {
+			el,
+			event
+		},
+		history: {
+			action,
+			popstate
+			// direction: undefined
+		},
+		scroll: {
+			reset,
+			target
+		}
+	};
+}