swup 4.0.0-rc.21 → 4.0.0-rc.23

package/dist/types/Swup.d.ts

@@ -58,12 +58,12 @@ export default class Swup {
     private clickDelegate?;
     visit: typeof visit;
     performVisit: typeof performVisit;
-    leavePage: (this: Swup) => Promise<void>;
+    animatePageOut: (this: Swup) => Promise<void>;
     renderPage: (this: Swup, requestedUrl: string, page: import("./modules/fetchPage.js").PageData) => Promise<void>;
     replaceContent: (this: Swup, { html }: import("./modules/fetchPage.js").PageData, { containers }?: {
         containers: string[];
     }) => boolean;
-    enterPage: (this: Swup) => Promise<void>;
+    animatePageIn: (this: Swup) => Promise<void>;
     delegateEvent: <Selector extends string, TEvent extends keyof GlobalEventHandlersEventMap>(selector: Selector, type: TEvent, callback: import("delegate-it").DelegateEventHandler<GlobalEventHandlersEventMap[TEvent], Element>, options?: import("delegate-it").DelegateOptions | undefined) => DelegateEventUnsubscribe;
     fetchPage: typeof fetchPage;
     awaitAnimations: typeof awaitAnimations;

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

@@ -2,18 +2,33 @@ import Swup from '../Swup.js';
 import { PageData } from './fetchPage.js';
 export interface CacheData extends PageData {
 }
+/**
+ * In-memory page cache.
+ */
 export declare class Cache {
+    /** Swup instance this cache belongs to */
     private swup;
+    /** Cached pages, indexed by URL */
     private pages;
     constructor(swup: Swup);
+    /** Number of cached pages in memory. */
     get size(): number;
+    /** All cached pages. */
     get all(): Map<string, CacheData>;
+    /** Check if the given URL has been cached. */
     has(url: string): boolean;
+    /** Return the cached page object if cached. */
     get(url: string): CacheData | undefined;
+    /** Create a cache record for the specified URL. */
     set(url: string, page: CacheData): void;
+    /** Update a cache record, overwriting or adding custom data. */
     update(url: string, page: CacheData): void;
+    /** Delete a cache record. */
     delete(url: string): void;
+    /** Empty the cache. */
     clear(): void;
+    /** Remove all cache entries that return true for a given predicate function.  */
     prune(predicate: (url: string, page: CacheData) => boolean): void;
+    /** Resolve URLs by making them local and letting swup resolve them. */
     private resolve;
 }

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

@@ -1,6 +1,6 @@
 import Swup, { Options } from '../Swup.js';
 import { HistoryAction, HistoryDirection } from './visit.js';
-export interface Context<TEvent = Event> {
+export interface Context {
     /** The previous page, about to leave */
     from: FromContext;
     /** The next page, about to enter */
@@ -10,7 +10,7 @@ export interface Context<TEvent = Event> {
     /** Information about animated page transitions */
     animation: AnimationContext;
     /** What triggered this visit */
-    trigger: TriggerContext<TEvent>;
+    trigger: TriggerContext;
     /** Browser history behavior on this visit */
     history: HistoryContext;
     /** Scroll behavior on this visit */
@@ -44,11 +44,11 @@ export interface ScrollContext {
     /** Anchor element to scroll to on the next page. */
     target?: string;
 }
-export interface TriggerContext<TEvent = Event> {
+export interface TriggerContext {
     /** DOM element that triggered this visit. */
     el?: Element;
     /** DOM event that triggered this visit. */
-    event?: TEvent;
+    event?: Event;
 }
 export interface HistoryContext {
     /** History action to perform: `push` for creating a new history entry, `replace` for replacing the current entry. Default: `push` */

package/dist/types/modules/{enterPage.d.ts → animatePageIn.d.ts}

@@ -3,4 +3,4 @@ import Swup from '../Swup.js';
  * Perform the in/enter animation of the next page.
  * @returns Promise<void>
  */
-export declare const enterPage: (this: Swup) => Promise<void>;
+export declare const animatePageIn: (this: Swup) => Promise<void>;

package/dist/types/modules/{leavePage.d.ts → animatePageOut.d.ts}

@@ -3,4 +3,4 @@ import Swup from '../Swup.js';
  * Perform the out/leave animation of the current page.
  * @returns Promise<void>
  */
-export declare const leavePage: (this: Swup) => Promise<void>;
+export declare const animatePageOut: (this: Swup) => Promise<void>;

package/dist/types/utils/index.d.ts

@@ -3,5 +3,11 @@ export declare const queryAll: (selector: string, context?: Document | Element)
 export declare const nextTick: () => Promise<void>;
 export declare function isPromise<T>(obj: any): obj is PromiseLike<T>;
 export declare function runAsPromise(func: Function, args?: any[], ctx?: any): Promise<any>;
+/**
+ * Force a layout reflow, e.g. after adding classnames
+ * @returns The offset height, just here so it doesn't get optimized away by the JS engine
+ * @see https://stackoverflow.com/a/21665117/3759615
+ */
+export declare function forceReflow(element?: HTMLElement): number;
 export declare const escapeCssIdentifier: (ident: string) => string;
 export declare const toMs: (s: string) => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swup",
   "amdName": "Swup",
-  "version": "4.0.0-rc.21",
+  "version": "4.0.0-rc.23",
   "description": "Versatile and extensible page transition library for server-rendered websites",
   "type": "module",
   "source": "./src/Swup.ts",

package/src/Swup.ts

@@ -13,9 +13,9 @@ import { getAnchorElement } from './modules/getAnchorElement.js';
 import { awaitAnimations } from './modules/awaitAnimations.js';
 import { visit, performVisit, HistoryAction } from './modules/visit.js';
 import { fetchPage } from './modules/fetchPage.js';
-import { leavePage } from './modules/leavePage.js';
+import { animatePageOut } from './modules/animatePageOut.js';
 import { replaceContent } from './modules/replaceContent.js';
-import { enterPage } from './modules/enterPage.js';
+import { animatePageIn } from './modules/animatePageIn.js';
 import { renderPage } from './modules/renderPage.js';
 import { use, unuse, findPlugin, Plugin } from './modules/plugins.js';
 import { nextTick } from './utils.js';
@@ -69,10 +69,10 @@ export default class Swup {
 
 	visit = visit;
 	performVisit = performVisit;
-	leavePage = leavePage;
+	animatePageOut = animatePageOut;
 	renderPage = renderPage;
 	replaceContent = replaceContent;
-	enterPage = enterPage;
+	animatePageIn = animatePageIn;
 	delegateEvent = delegateEvent;
 	fetchPage = fetchPage;
 	awaitAnimations = awaitAnimations;
@@ -148,14 +148,15 @@ export default class Swup {
 		// Modify initial history record
 		updateHistoryRecord(null, { index: 1 });
 
+		// Give consumers a chance to hook into enable and page:view
+		await nextTick();
+
 		// Trigger enable hook
 		await this.hooks.trigger('enable', undefined, () => {
 			// Add swup-enabled class to html tag
 			document.documentElement.classList.add('swup-enabled');
 		});
 
-		await nextTick();
-
 		// Trigger page view hook
 		await this.hooks.trigger('page:view', { url: this.currentPageUrl, title: document.title });
 	}
@@ -209,29 +210,12 @@ export default class Swup {
 		const el = event.delegateTarget as HTMLAnchorElement;
 		const { href, url, hash } = Location.fromElement(el);
 
-		// Get the animation name, if specified
-		const animation = el.getAttribute('data-swup-animation') || undefined;
-
-		// Get the history action, if specified
-		let historyAction: HistoryAction | undefined;
-		const historyAttr = el.getAttribute('data-swup-history');
-		if (historyAttr && ['push', 'replace'].includes(historyAttr)) {
-			historyAction = historyAttr as HistoryAction;
-		}
-
 		// Exit early if the link should be ignored
 		if (this.shouldIgnoreVisit(href, { el, event })) {
 			return;
 		}
 
-		this.context = this.createContext({
-			to: url,
-			hash,
-			animation,
-			el,
-			event,
-			action: historyAction
-		});
+		this.context = this.createContext({ to: url, hash, el, event });
 
 		// Exit early if control key pressed
 		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {

package/src/modules/Cache.ts

@@ -4,30 +4,41 @@ import { PageData } from './fetchPage.js';
 
 export interface CacheData extends PageData {}
 
+/**
+ * In-memory page cache.
+ */
 export class Cache {
+	/** Swup instance this cache belongs to */
 	private swup: Swup;
+
+	/** Cached pages, indexed by URL */
 	private pages: Map<string, CacheData> = new Map();
 
 	constructor(swup: Swup) {
 		this.swup = swup;
 	}
 
-	get size() {
+	/** Number of cached pages in memory. */
+	get size(): number {
 		return this.pages.size;
 	}
 
+	/** All cached pages. */
 	get all() {
 		return this.pages;
 	}
 
+	/** Check if the given URL has been cached. */
 	public has(url: string): boolean {
 		return this.pages.has(this.resolve(url));
 	}
 
+	/** Return the cached page object if cached. */
 	public get(url: string): CacheData | undefined {
 		return this.pages.get(this.resolve(url));
 	}
 
+	/** Create a cache record for the specified URL. */
 	public set(url: string, page: CacheData) {
 		url = this.resolve(url);
 		page = { ...page, url };
@@ -35,21 +46,25 @@ export class Cache {
 		this.swup.hooks.triggerSync('cache:set', { page });
 	}
 
+	/** Update a cache record, overwriting or adding custom data. */
 	public update(url: string, page: CacheData) {
 		url = this.resolve(url);
 		page = { ...this.get(url), ...page, url };
 		this.pages.set(url, page);
 	}
 
+	/** Delete a cache record. */
 	public delete(url: string): void {
 		this.pages.delete(this.resolve(url));
 	}
 
+	/** Empty the cache. */
 	public clear(): void {
 		this.pages.clear();
 		this.swup.hooks.triggerSync('cache:clear');
 	}
 
+	/** Remove all cache entries that return true for a given predicate function.  */
 	public prune(predicate: (url: string, page: CacheData) => boolean): void {
 		this.pages.forEach((page, url) => {
 			if (predicate(url, page)) {
@@ -58,6 +73,7 @@ export class Cache {
 		});
 	}
 
+	/** Resolve URLs by making them local and letting swup resolve them. */
 	private resolve(urlToResolve: string): string {
 		const { url } = Location.fromUrl(urlToResolve);
 		return this.swup.resolveUrl(url);

package/src/modules/Context.ts

@@ -1,7 +1,7 @@
 import Swup, { Options } from '../Swup.js';
 import { HistoryAction, HistoryDirection } from './visit.js';
 
-export interface Context<TEvent = Event> {
+export interface Context {
 	/** The previous page, about to leave */
 	from: FromContext;
 	/** The next page, about to enter */
@@ -11,7 +11,7 @@ export interface Context<TEvent = Event> {
 	/** Information about animated page transitions */
 	animation: AnimationContext;
 	/** What triggered this visit */
-	trigger: TriggerContext<TEvent>;
+	trigger: TriggerContext;
 	/** Browser history behavior on this visit */
 	history: HistoryContext;
 	/** Scroll behavior on this visit */
@@ -50,11 +50,11 @@ export interface ScrollContext {
 	target?: string;
 }
 
-export interface TriggerContext<TEvent = Event> {
+export interface TriggerContext {
 	/** DOM element that triggered this visit. */
 	el?: Element;
 	/** DOM event that triggered this visit. */
-	event?: TEvent;
+	event?: Event;
 }
 
 export interface HistoryContext {

package/src/modules/Hooks.ts

@@ -1,6 +1,6 @@
 import { DelegateEvent } from 'delegate-it';
 
-import Swup, { Options } from '../Swup.js';
+import Swup from '../Swup.js';
 import { isPromise, runAsPromise } from '../utils.js';
 import { Context } from './Context.js';
 import { FetchOptions, PageData } from './fetchPage.js';

package/src/modules/{enterPage.ts → animatePageIn.ts}

@@ -5,7 +5,7 @@ import { nextTick } from '../utils.js';
  * Perform the in/enter animation of the next page.
  * @returns Promise<void>
  */
-export const enterPage = async function (this: Swup) {
+export const animatePageIn = async function (this: Swup) {
 	if (!this.context.animation.animate) {
 		return;
 	}

package/src/modules/{leavePage.ts → animatePageOut.ts}

@@ -5,7 +5,7 @@ import { classify } from '../helpers.js';
  * Perform the out/leave animation of the current page.
  * @returns Promise<void>
  */
-export const leavePage = async function (this: Swup) {
+export const animatePageOut = async function (this: Swup) {
 	if (!this.context.animation.animate) {
 		await this.hooks.trigger('animation:skip');
 		return;

package/src/modules/visit.ts

@@ -58,21 +58,28 @@ export async function performVisit(
 		throw new Error(`swup.visit() requires a URL parameter`);
 	}
 
+	const { el } = this.context.trigger;
 	this.context.to.url = Location.fromUrl(url).url;
-	const { animation, animate, history: historyAction } = options;
 	options.referrer = options.referrer || this.currentPageUrl;
 
-	if (animate === false) {
+	if (options.animate === false) {
 		this.context.animation.animate = false;
 	}
-	if (historyAction) {
-		this.context.history.action = historyAction;
-	}
 
-	// Clean up old animation classes and set custom animation name
+	// Clean up old animation classes
 	if (!this.context.animation.animate) {
 		this.classes.clear();
-	} else if (animation) {
+	}
+
+	// Get history action from option or attribute on trigger element
+	const history = options.history || el?.getAttribute('data-swup-history') || undefined;
+	if (history && ['push', 'replace'].includes(history)) {
+		this.context.history.action = history as HistoryAction;
+	}
+
+	// Get custom animation name from option or attribute on trigger element
+	const animation = options.animation || el?.getAttribute('data-swup-animation') || undefined;
+	if (animation) {
 		this.context.animation.name = animation;
 	}
 
@@ -106,14 +113,14 @@ export async function performVisit(
 		}
 
 		// Wait for page to load and leave animation to finish
-		const animationPromise = this.leavePage();
+		const animationPromise = this.animatePageOut();
 		const [page] = await Promise.all([pagePromise, animationPromise]);
 
 		// Render page: replace content and scroll to top/fragment
 		await this.renderPage(this.context.to.url, page);
 
 		// Wait for enter animation
-		await this.enterPage();
+		await this.animatePageIn();
 
 		// Finalize visit
 		await this.hooks.trigger('visit:end', undefined, () => this.classes.clear());
@@ -138,6 +145,6 @@ export async function performVisit(
 		};
 
 		// Go back to the actual page we're still at
-		history.go(-1);
+		window.history.go(-1);
 	}
 }

package/src/utils/index.ts

@@ -38,6 +38,16 @@ export function runAsPromise(func: Function, args: any[] = [], ctx: any = {}): P
 	});
 }
 
+/**
+ * Force a layout reflow, e.g. after adding classnames
+ * @returns The offset height, just here so it doesn't get optimized away by the JS engine
+ * @see https://stackoverflow.com/a/21665117/3759615
+ */
+export function forceReflow(element?: HTMLElement) {
+	element = element || document.body;
+	return element?.offsetHeight;
+}
+
 export const escapeCssIdentifier = (ident: string) => {
 	// @ts-ignore this is for support check, so it's correct that TS complains
 	if (window.CSS && window.CSS.escape) {