swup 3.1.1 → 4.0.0-rc.20

package/src/helpers.ts

@@ -1,13 +1,10 @@
 // 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,42 @@
-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,
+	FromContext,
+	ToContext,
+	AnimationContext,
+	ScrollContext,
+	HistoryContext
+} from './modules/Context.js';
+import type { Plugin } from './modules/plugins.js';
+import type {
+	HookDefinitions,
+	HookName,
+	HookOptions,
+	HookUnregister,
+	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,
+	FromContext,
+	ToContext,
+	AnimationContext,
+	ScrollContext,
+	HistoryContext,
+	HookDefinitions,
+	HookName,
+	HookOptions,
+	HookUnregister,
+	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('cache:set', { 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('cache:clear');
 	}
 
-	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/Classes.ts

@@ -0,0 +1,48 @@
+import Swup from '../Swup.js';
+import { queryAll } from '../utils.js';
+
+export class Classes {
+	public swup: Swup;
+
+	swupClasses = ['to-', 'is-changing', 'is-rendering', 'is-popstate', 'is-animating'];
+
+	constructor(swup: Swup) {
+		this.swup = swup;
+	}
+
+	get selectors(): string[] {
+		const { scope } = this.swup.context.animation;
+		if (scope === 'containers') return this.swup.context.containers;
+		if (scope === 'html') return ['html'];
+		if (Array.isArray(scope)) return scope;
+		return [];
+	}
+
+	get selector(): string {
+		return this.selectors.join(',');
+	}
+
+	get targets(): HTMLElement[] {
+		if (!this.selector.trim()) return [];
+		return queryAll(this.selector) as HTMLElement[];
+	}
+
+	public add(...classes: string[]): void {
+		this.targets.forEach((target) => target.classList.add(...classes));
+	}
+
+	public remove(...classes: string[]): void {
+		this.targets.forEach((target) => target.classList.remove(...classes));
+	}
+
+	public clear(): void {
+		this.targets.forEach((target) => {
+			const remove = target.className.split(' ').filter((c) => this.isSwupClass(c));
+			target.classList.remove(...remove);
+		});
+	}
+
+	private isSwupClass(className: string): boolean {
+		return this.swupClasses.some((c) => className.startsWith(c));
+	}
+}

package/src/modules/Context.ts

@@ -0,0 +1,121 @@
+import Swup, { Options } from '../Swup.js';
+import { HistoryAction, HistoryDirection } from './visit.js';
+
+export interface Context<TEvent = Event> {
+	/** The previous page, about to leave */
+	from: FromContext;
+	/** The next page, about to enter */
+	to: ToContext;
+	/** The content containers, about to be replaced */
+	containers: Options['containers'];
+	/** Information about animated page transitions */
+	animation: AnimationContext;
+	/** What triggered this visit */
+	trigger: TriggerContext<TEvent>;
+	/** Browser history behavior on this visit */
+	history: HistoryContext;
+	/** Scroll behavior on this visit */
+	scroll: ScrollContext;
+}
+
+export interface FromContext {
+	/** The URL of the previous page */
+	url: string;
+}
+
+export interface ToContext {
+	/** The URL of the next page */
+	url?: string;
+	/** The HTML content of the next page */
+	html?: string;
+}
+
+export interface AnimationContext {
+	/** Whether this visit is animated. Default: `true` */
+	animate: boolean;
+	/** Whether to wait for the next page to load before starting the animation. Default: `false` */
+	wait: boolean;
+	/** Name of a custom animation to run. */
+	name?: string;
+	/** Elements on which to add animation classes. Default: `html` element */
+	scope: 'html' | 'containers' | string[];
+	/** Selector for detecting animation timing. Default: `[class*="transition-"]` */
+	selector: Options['animationSelector'];
+}
+
+export interface ScrollContext {
+	/** Whether to reset the scroll position after the visit. Default: `true` */
+	reset: boolean;
+	/** Anchor element to scroll to on the next page. */
+	target?: string;
+}
+
+export interface TriggerContext<TEvent = Event> {
+	/** DOM element that triggered this visit. */
+	el?: Element;
+	/** DOM event that triggered this visit. */
+	event?: TEvent;
+}
+
+export interface HistoryContext {
+	/** History action to perform: `push` for creating a new history entry, `replace` for replacing the current entry. Default: `push` */
+	action: HistoryAction;
+	/** Whether this visit was triggered by a browser history navigation. */
+	popstate: boolean;
+	/** The direction of travel in case of a browser history navigation: backward or forward. */
+	direction: HistoryDirection | undefined;
+}
+
+export interface ContextInitOptions {
+	to: string | undefined;
+	from?: string;
+	hash?: string;
+	animate?: boolean;
+	animation?: string;
+	targets?: string[];
+	el?: Element;
+	event?: Event;
+	action?: HistoryAction;
+	resetScroll?: boolean;
+}
+
+export function createContext(
+	this: Swup,
+	{
+		to,
+		from = this.currentPageUrl,
+		hash: target,
+		animate = true,
+		animation: name,
+		el,
+		event,
+		action = 'push',
+		resetScroll: reset = true
+	}: ContextInitOptions
+): Context {
+	return {
+		from: { url: from },
+		to: { url: to },
+		containers: this.options.containers,
+		animation: {
+			animate,
+			wait: false,
+			name,
+			scope: this.options.animationScope,
+			selector: this.options.animationSelector
+		},
+		trigger: {
+			el,
+			event
+		},
+		history: {
+			action,
+			popstate: false,
+			direction: undefined
+		},
+		scroll: {
+			reset,
+			target
+		}
+	};
+}