swup 4.0.0-rc.30 → 4.0.0

package/dist/types/Swup.d.ts

@@ -1,16 +1,13 @@
 import { DelegateEvent } from 'delegate-it';
-import { delegateEvent, getCurrentUrl } from './helpers.js';
 import { DelegateEventUnsubscribe } from './helpers/delegateEvent.js';
 import { Cache } from './modules/Cache.js';
 import { Classes } from './modules/Classes.js';
 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 { fetchPage } from './modules/fetchPage.js';
-import { replaceContent } from './modules/replaceContent.js';
-import { use, unuse, findPlugin, Plugin } from './modules/plugins.js';
+import { unuse, findPlugin, Plugin } from './modules/plugins.js';
 import { isSameResolvedUrl, resolveUrl } from './modules/resolveUrl.js';
 /** Options for customizing swup's behavior. */
 export type Options = {
@@ -40,18 +37,18 @@ export type Options = {
     /** Callback for telling swup to ignore certain popstate events.  */
     skipPopStateHandling: (event: any) => boolean;
 };
-/** Interface for Swup page transition library. */
-export interface SwupCore {
+/** Swup page transition library. */
+export default class Swup {
     /** Library version */
     readonly version: string;
     /** Options passed into the instance */
     options: Options;
     /** Default options before merging user options */
-    readonly defaults: Readonly<Options>;
+    readonly defaults: Options;
     /** Registered plugin instances */
-    readonly plugins: Plugin[];
+    plugins: Plugin[];
     /** Data about the current visit */
-    readonly visit: Visit;
+    visit: Visit;
     /** Cache instance */
     readonly cache: Cache;
     /** Hook registry */
@@ -60,12 +57,12 @@ export interface SwupCore {
     readonly classes: Classes;
     /** URL of the currently visible page */
     currentPageUrl: string;
-    /** Enable the instance */
-    enable(): Promise<void>;
-    /** Disable the instance and clean up */
-    destroy(): Promise<void>;
+    /** Index of the current history entry */
+    protected currentHistoryIndex: number;
+    /** Delegated event subscription handle */
+    protected clickDelegate?: DelegateEventUnsubscribe;
     /** Install a plugin */
-    use: typeof use;
+    use: (this: Swup, plugin: unknown) => Plugin[] | undefined;
     /** Uninstall a plugin */
     unuse: typeof unuse;
     /** Find a plugin by name or instance */
@@ -74,59 +71,34 @@ export interface SwupCore {
     log: (message: string, context?: any) => void;
     /** Navigate to a new URL */
     navigate: typeof navigate;
-    /** Replace the content after page load */
-    replaceContent: typeof replaceContent;
+    /** Actually perform a navigation */
+    protected performNavigation: typeof performNavigation;
+    /** Create a new context for this visit */
+    protected createVisit: typeof createVisit;
     /** Register a delegated event listener */
-    delegateEvent: typeof delegateEvent;
+    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;
     /** Fetch a page from the server */
     fetchPage: typeof fetchPage;
     /** Resolve when animations on the page finish */
     awaitAnimations: typeof awaitAnimations;
-    /** Find the anchor element for a given hash */
-    getAnchorElement: typeof getAnchorElement;
-    /** Get the current page URL */
-    getCurrentUrl: typeof getCurrentUrl;
-    /** Resolve a URL to its final location */
-    resolveUrl(url: string): string;
-}
-/** Swup page transition library. */
-export default class Swup implements SwupCore {
-    version: string;
-    options: Options;
-    plugins: Plugin[];
-    cache: Cache;
-    hooks: Hooks;
-    visit: Visit;
-    classes: Classes;
-    currentPageUrl: string;
-    getCurrentUrl: ({ hash }?: {
-        hash?: boolean | undefined;
-    }) => string;
-    use: (this: Swup, plugin: unknown) => Plugin[] | undefined;
-    unuse: typeof unuse;
-    findPlugin: typeof findPlugin;
-    log: () => void;
-    getAnchorElement: (hash: string) => Element | null;
-    navigate: typeof navigate;
-    protected performNavigation: typeof performNavigation;
-    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;
     protected renderPage: (this: Swup, requestedUrl: string, page: import("./modules/fetchPage.js").PageData) => Promise<void>;
+    /** Replace the content after page load */
     replaceContent: (this: Swup, { html }: import("./modules/fetchPage.js").PageData, { containers }?: {
         containers: string[];
     }) => boolean;
     protected animatePageIn: (this: Swup) => Promise<void>;
     protected animatePageOut: (this: Swup) => Promise<void>;
     protected scrollToContent: (this: Swup) => boolean;
-    protected createVisit: typeof createVisit;
+    /** Find the anchor element for a given hash */
+    getAnchorElement: (hash: string) => Element | null;
+    /** Get the current page URL */
+    getCurrentUrl: ({ hash }?: {
+        hash?: boolean | undefined;
+    }) => string;
+    /** Resolve a URL to its final location */
     resolveUrl: typeof resolveUrl;
+    /** Check if two URLs resolve to the same location */
     protected isSameResolvedUrl: typeof isSameResolvedUrl;
-    readonly defaults: Options;
-    /** Index of the current history entry */
-    protected currentHistoryIndex: number;
-    /** Delegated event subscription handle */
-    protected clickDelegate?: DelegateEventUnsubscribe;
     constructor(options?: Partial<Options>);
     protected checkRequirements(): boolean;
     /** Enable this instance, adding listeners and classnames. */

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { Path } from 'path-to-regexp';
 import Swup from './Swup.js';
-import type { SwupCore, Options } from './Swup.js';
+import type { Options } from './Swup.js';
 import type { CacheData } from './modules/Cache.js';
 import type { Visit, VisitFrom, VisitTo, VisitAnimation, VisitScroll, VisitHistory } from './modules/Visit.js';
 import type { HookDefinitions, HookName, HookOptions, HookUnregister, Handler } from './modules/Hooks.js';
@@ -8,4 +8,4 @@ import type { Plugin } from './modules/plugins.js';
 export default Swup;
 export * from './helpers.js';
 export * from './utils.js';
-export { SwupCore, Options, Plugin, CacheData, Visit, VisitFrom, VisitTo, VisitAnimation, VisitScroll, VisitHistory, HookDefinitions, HookName, HookOptions, HookUnregister, Handler, Path };
+export type { Swup, Options, Plugin, CacheData, Visit, VisitFrom, VisitTo, VisitAnimation, VisitScroll, VisitHistory, HookDefinitions, HookName, HookOptions, HookUnregister, Handler, Path };

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

@@ -7,9 +7,9 @@ export interface CacheData extends PageData {
  */
 export declare class Cache {
     /** Swup instance this cache belongs to */
-    private swup;
+    protected swup: Swup;
     /** Cached pages, indexed by URL */
-    private pages;
+    protected pages: Map<string, CacheData>;
     constructor(swup: Swup);
     /** Number of cached pages in memory. */
     get size(): number;
@@ -30,5 +30,5 @@ export declare class Cache {
     /** 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;
+    protected resolve(urlToResolve: string): string;
 }

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

@@ -1,13 +1,13 @@
 import Swup from '../Swup.js';
 export declare class Classes {
-    swup: Swup;
-    swupClasses: string[];
+    protected swup: Swup;
+    protected swupClasses: string[];
     constructor(swup: Swup);
-    get selectors(): string[];
-    get selector(): string;
-    get targets(): HTMLElement[];
+    protected get selectors(): string[];
+    protected get selector(): string;
+    protected get targets(): HTMLElement[];
     add(...classes: string[]): void;
     remove(...classes: string[]): void;
     clear(): void;
-    private isSwupClass;
+    protected isSwupClass(className: string): boolean;
 }

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

@@ -213,13 +213,13 @@ export declare class Hooks {
      * @param registrations The registrations (handler + options) to execute
      * @param args Arguments to pass to the handler
      */
-    private run;
+    protected run<T extends HookName>(registrations: HookRegistration<T>[], args?: HookArguments<T>): Promise<any>;
     /**
      * Execute the handlers for a hook, in order, without `await`ing any returned `Promise`s.
      * @param registrations The registrations (handler + options) to execute
      * @param args Arguments to pass to the handler
      */
-    private runSync;
+    protected runSync<T extends HookName>(registrations: HookRegistration<T>[], args?: HookArguments<T>): any[];
     /**
      * Get all registered handlers for a hook, sorted by priority and registration order.
      * @param hook Name of the hook
@@ -227,18 +227,24 @@ export declare class Hooks {
      * @returns An object with the handlers sorted into `before` and `after` arrays,
      *          as well as a flag indicating if the original handler was replaced
      */
-    private getHandlers;
+    protected getHandlers<T extends HookName>(hook: T, defaultHandler?: Handler<T>): {
+        found: boolean;
+        before: HookRegistration<T>[];
+        handler: HookRegistration<T>[];
+        after: HookRegistration<T>[];
+        replaced: boolean;
+    };
     /**
      * Sort two hook registrations by priority and registration order.
      * @param a The registration object to compare
      * @param b The other registration object to compare with
      * @returns The sort direction
      */
-    private sortRegistrations;
+    protected sortRegistrations<T extends HookName>(a: HookRegistration<T>, b: HookRegistration<T>): number;
     /**
      * Dispatch a custom event on the `document` for a hook. Prefixed with `swup:`
      * @param hook Name of the hook.
      */
-    private dispatchDomEvent;
+    protected dispatchDomEvent<T extends HookName>(hook: T, args?: HookArguments<T>): void;
 }
 export {};

package/package.json

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

package/src/Swup.ts

@@ -48,18 +48,35 @@ export type Options = {
 	skipPopStateHandling: (event: any) => boolean;
 };
 
-/** Interface for Swup page transition library. */
-export interface SwupCore {
+const defaults: Options = {
+	animateHistoryBrowsing: false,
+	animationSelector: '[class*="transition-"]',
+	animationScope: 'html',
+	cache: true,
+	containers: ['#swup'],
+	ignoreVisit: (url, { el, event } = {}) => !!el?.closest('[data-no-swup]'),
+	linkSelector: 'a[href]',
+	plugins: [],
+	resolveUrl: (url) => url,
+	requestHeaders: {
+		'X-Requested-With': 'swup',
+		'Accept': 'text/html, application/xhtml+xml'
+	},
+	skipPopStateHandling: (event) => event.state?.source !== 'swup'
+};
+
+/** Swup page transition library. */
+export default class Swup {
 	/** Library version */
-	readonly version: string;
+	readonly version: string = version;
 	/** Options passed into the instance */
 	options: Options;
 	/** Default options before merging user options */
-	readonly defaults: Readonly<Options>;
+	readonly defaults: Options = defaults;
 	/** Registered plugin instances */
-	readonly plugins: Plugin[];
+	plugins: Plugin[] = [];
 	/** Data about the current visit */
-	readonly visit: Visit;
+	visit: Visit;
 	/** Cache instance */
 	readonly cache: Cache;
 	/** Hook registry */
@@ -67,101 +84,50 @@ export interface SwupCore {
 	/** Animation class manager */
 	readonly classes: Classes;
 	/** URL of the currently visible page */
-	currentPageUrl: string;
-
-	/** Enable the instance */
-	enable(): Promise<void>;
-	/** Disable the instance and clean up */
-	destroy(): Promise<void>;
+	currentPageUrl: string = getCurrentUrl();
+	/** Index of the current history entry */
+	protected currentHistoryIndex = 1;
+	/** Delegated event subscription handle */
+	protected clickDelegate?: DelegateEventUnsubscribe;
 
 	/** Install a plugin */
-	use: typeof use;
+	use = use;
 	/** Uninstall a plugin */
-	unuse: typeof unuse;
+	unuse = unuse;
 	/** Find a plugin by name or instance */
-	findPlugin: typeof findPlugin;
+	findPlugin = findPlugin;
 
 	/** Log a message. Has no effect unless debug plugin is installed */
-	log: (message: string, context?: any) => void;
+	log: (message: string, context?: any) => void = () => {};
 
 	/** Navigate to a new URL */
-	navigate: typeof navigate;
-	/** Replace the content after page load */
-	replaceContent: typeof replaceContent;
-	/** Register a delegated event listener */
-	delegateEvent: typeof delegateEvent;
-	/** Fetch a page from the server */
-	fetchPage: typeof fetchPage;
-	/** Resolve when animations on the page finish */
-	awaitAnimations: typeof awaitAnimations;
-	/** Find the anchor element for a given hash */
-	getAnchorElement: typeof getAnchorElement;
-
-	/** Get the current page URL */
-	getCurrentUrl: typeof getCurrentUrl;
-	/** Resolve a URL to its final location */
-	resolveUrl(url: string): string;
-}
-
-/** Swup page transition library. */
-export default class Swup implements SwupCore {
-	version = version;
-	options: Options;
-	plugins: Plugin[] = [];
-	cache: Cache;
-	hooks: Hooks;
-	visit: Visit;
-	classes: Classes;
-
-	currentPageUrl = getCurrentUrl();
-	getCurrentUrl = getCurrentUrl;
-
-	use = use;
-	unuse = unuse;
-	findPlugin = findPlugin;
-
-	log = () => {};
-
-	getAnchorElement = getAnchorElement;
-
 	navigate = navigate;
+	/** Actually perform a navigation */
 	protected performNavigation = performNavigation;
+	/** Create a new context for this visit */
+	protected createVisit = createVisit;
+	/** Register a delegated event listener */
 	delegateEvent = delegateEvent;
+	/** Fetch a page from the server */
 	fetchPage = fetchPage;
+	/** Resolve when animations on the page finish */
 	awaitAnimations = awaitAnimations;
 	protected renderPage = renderPage;
+	/** Replace the content after page load */
 	replaceContent = replaceContent;
 	protected animatePageIn = animatePageIn;
 	protected animatePageOut = animatePageOut;
 	protected scrollToContent = scrollToContent;
+	/** Find the anchor element for a given hash */
+	getAnchorElement = getAnchorElement;
 
-	protected createVisit = createVisit;
+	/** Get the current page URL */
+	getCurrentUrl = getCurrentUrl;
+	/** Resolve a URL to its final location */
 	resolveUrl = resolveUrl;
+	/** Check if two URLs resolve to the same location */
 	protected isSameResolvedUrl = isSameResolvedUrl;
 
-	readonly defaults: Options = {
-		animateHistoryBrowsing: false,
-		animationSelector: '[class*="transition-"]',
-		animationScope: 'html',
-		cache: true,
-		containers: ['#swup'],
-		ignoreVisit: (url, { el, event } = {}) => !!el?.closest('[data-no-swup]'),
-		linkSelector: 'a[href]',
-		plugins: [],
-		resolveUrl: (url) => url,
-		requestHeaders: {
-			'X-Requested-With': 'swup',
-			'Accept': 'text/html, application/xhtml+xml'
-		},
-		skipPopStateHandling: (event) => event.state?.source !== 'swup'
-	};
-
-	/** Index of the current history entry */
-	protected currentHistoryIndex = 1;
-
-	/** Delegated event subscription handle */
-	protected clickDelegate?: DelegateEventUnsubscribe;
-
 	constructor(options: Partial<Options> = {}) {
 		// Merge defaults and options
 		this.options = { ...this.defaults, ...options };

package/src/index.ts

@@ -1,7 +1,7 @@
 import type { Path } from 'path-to-regexp';
 
 import Swup from './Swup.js';
-import type { SwupCore, Options } from './Swup.js';
+import type { Options } from './Swup.js';
 import type { CacheData } from './modules/Cache.js';
 import type {
 	Visit,
@@ -23,8 +23,8 @@ import type { Plugin } from './modules/plugins.js';
 export default Swup;
 export * from './helpers.js';
 export * from './utils.js';
-export {
-	SwupCore,
+export type {
+	Swup,
 	Options,
 	Plugin,
 	CacheData,

package/src/modules/Cache.ts

@@ -9,10 +9,10 @@ export interface CacheData extends PageData {}
  */
 export class Cache {
 	/** Swup instance this cache belongs to */
-	private swup: Swup;
+	protected swup: Swup;
 
 	/** Cached pages, indexed by URL */
-	private pages: Map<string, CacheData> = new Map();
+	protected pages: Map<string, CacheData> = new Map();
 
 	constructor(swup: Swup) {
 		this.swup = swup;
@@ -29,17 +29,17 @@ export class Cache {
 	}
 
 	/** Check if the given URL has been cached. */
-	public has(url: string): boolean {
+	has(url: string): boolean {
 		return this.pages.has(this.resolve(url));
 	}
 
 	/** Return the cached page object if cached. */
-	public get(url: string): CacheData | undefined {
+	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) {
+	set(url: string, page: CacheData) {
 		url = this.resolve(url);
 		page = { ...page, url };
 		this.pages.set(url, page);
@@ -47,25 +47,25 @@ export class Cache {
 	}
 
 	/** Update a cache record, overwriting or adding custom data. */
-	public update(url: string, page: CacheData) {
+	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 {
+	delete(url: string): void {
 		this.pages.delete(this.resolve(url));
 	}
 
 	/** Empty the cache. */
-	public clear(): void {
+	clear(): void {
 		this.pages.clear();
 		this.swup.hooks.callSync('cache:clear');
 	}
 
 	/** Remove all cache entries that return true for a given predicate function.  */
-	public prune(predicate: (url: string, page: CacheData) => boolean): void {
+	prune(predicate: (url: string, page: CacheData) => boolean): void {
 		this.pages.forEach((page, url) => {
 			if (predicate(url, page)) {
 				this.delete(url);
@@ -74,7 +74,7 @@ export class Cache {
 	}
 
 	/** Resolve URLs by making them local and letting swup resolve them. */
-	private resolve(urlToResolve: string): string {
+	protected resolve(urlToResolve: string): string {
 		const { url } = Location.fromUrl(urlToResolve);
 		return this.swup.resolveUrl(url);
 	}

package/src/modules/Classes.ts

@@ -2,15 +2,14 @@ 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'];
+	protected swup: Swup;
+	protected swupClasses = ['to-', 'is-changing', 'is-rendering', 'is-popstate', 'is-animating'];
 
 	constructor(swup: Swup) {
 		this.swup = swup;
 	}
 
-	get selectors(): string[] {
+	protected get selectors(): string[] {
 		const { scope } = this.swup.visit.animation;
 		if (scope === 'containers') return this.swup.visit.containers;
 		if (scope === 'html') return ['html'];
@@ -18,31 +17,31 @@ export class Classes {
 		return [];
 	}
 
-	get selector(): string {
+	protected get selector(): string {
 		return this.selectors.join(',');
 	}
 
-	get targets(): HTMLElement[] {
+	protected get targets(): HTMLElement[] {
 		if (!this.selector.trim()) return [];
 		return queryAll(this.selector) as HTMLElement[];
 	}
 
-	public add(...classes: string[]): void {
+	add(...classes: string[]): void {
 		this.targets.forEach((target) => target.classList.add(...classes));
 	}
 
-	public remove(...classes: string[]): void {
+	remove(...classes: string[]): void {
 		this.targets.forEach((target) => target.classList.remove(...classes));
 	}
 
-	public clear(): void {
+	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 {
+	protected isSwupClass(className: string): boolean {
 		return this.swupClasses.some((c) => className.startsWith(c));
 	}
 }

package/src/modules/Hooks.ts

@@ -326,7 +326,7 @@ export class Hooks {
 	 * @param registrations The registrations (handler + options) to execute
 	 * @param args Arguments to pass to the handler
 	 */
-	private async run<T extends HookName>(
+	protected async run<T extends HookName>(
 		registrations: HookRegistration<T>[],
 		args?: HookArguments<T>
 	): Promise<any> {
@@ -346,7 +346,7 @@ export class Hooks {
 	 * @param registrations The registrations (handler + options) to execute
 	 * @param args Arguments to pass to the handler
 	 */
-	private runSync<T extends HookName>(
+	protected runSync<T extends HookName>(
 		registrations: HookRegistration<T>[],
 		args?: HookArguments<T>
 	): any[] {
@@ -374,7 +374,7 @@ export class Hooks {
 	 * @returns An object with the handlers sorted into `before` and `after` arrays,
 	 *          as well as a flag indicating if the original handler was replaced
 	 */
-	private getHandlers<T extends HookName>(hook: T, defaultHandler?: Handler<T>) {
+	protected getHandlers<T extends HookName>(hook: T, defaultHandler?: Handler<T>) {
 		const ledger = this.get(hook);
 		if (!ledger) {
 			return { found: false, before: [], handler: [], after: [], replaced: false };
@@ -422,7 +422,7 @@ export class Hooks {
 	 * @param b The other registration object to compare with
 	 * @returns The sort direction
 	 */
-	private sortRegistrations<T extends HookName>(
+	protected sortRegistrations<T extends HookName>(
 		a: HookRegistration<T>,
 		b: HookRegistration<T>
 	): number {
@@ -435,7 +435,7 @@ export class Hooks {
 	 * Dispatch a custom event on the `document` for a hook. Prefixed with `swup:`
 	 * @param hook Name of the hook.
 	 */
-	private dispatchDomEvent<T extends HookName>(hook: T, args?: HookArguments<T>): void {
+	protected dispatchDomEvent<T extends HookName>(hook: T, args?: HookArguments<T>): void {
 		const detail = { hook, args, visit: this.swup.visit };
 		document.dispatchEvent(new CustomEvent(`swup:${hook}`, { detail }));
 	}

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

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { describe, expect, it, vi, afterEach } from 'vitest';
 import Swup from '../../Swup.js';
 import type { PageData } from '../fetchPage.js';
 import { JSDOM } from 'jsdom';