swup 3.0.0-rc.2 → 3.0.0-rc.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swup",
   "amdName": "Swup",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.3",
   "description": "Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.",
   "type": "module",
   "source": "src/Swup.ts",
@@ -19,7 +19,10 @@
     "build:module": "microbundle src/index.ts -f modern,esm,cjs",
     "build:bundle": "microbundle src/Swup.ts -f umd --external none",
     "dev": "microbundle src/*.ts -w",
-    "lint": "tsc --noEmit --skipLibCheck && prettier 'src/**/*.ts' --write",
+    "lint": "npm run lint:ts && npm run lint:prettier -- --check",
+    "format": "npm run lint:ts && npm run lint:prettier -- --write",
+    "lint:ts": "tsc --noEmit --skipLibCheck",
+    "lint:prettier": "prettier 'src/**/*.ts'",
     "prepublish": "npm run build",
     "postinstall": "opencollective-postinstall || true",
     "ci": "start-server-and-test test:start 8274 cy:run:record",
@@ -30,7 +33,8 @@
     "test:start": "npm run test:instrument && npm run test:server",
     "cy:run": "cypress run",
     "cy:run:record": "cypress run --record",
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "prepare": "husky install"
   },
   "author": "Georgy Marchuk",
   "license": "MIT",
@@ -51,13 +55,14 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
     "@swup/prettier-config": "^1.0.0",
-    "cypress": "^10.0.2",
+    "cypress": "^12.3.0",
     "http-server": "^14.1.1",
     "istanbul-lib-coverage": "^3.2.0",
     "microbundle": "^0.15.0",
     "nyc": "^15.1.0",
     "prettier": "^2.8.2",
-    "start-server-and-test": "^1.14.0"
+    "start-server-and-test": "^1.14.0",
+    "husky": "^8.0.0"
   },
   "collective": {
     "type": "opencollective",

package/src/Swup.ts

@@ -12,21 +12,21 @@ import {
 } from './helpers.js';
 import { Unsubscribe } from './helpers/delegateEvent.js';
 
-import Cache from './modules/Cache.js';
-import enterPage from './modules/enterPage.js';
-import getAnchorElement from './modules/getAnchorElement.js';
-import getAnimationPromises from './modules/getAnimationPromises.js';
-import getPageData from './modules/getPageData.js';
-import fetchPage from './modules/fetchPage.js';
-import leavePage from './modules/leavePage.js';
-import loadPage from './modules/loadPage.js';
-import replaceContent from './modules/replaceContent.js';
-import off from './modules/off.js';
-import on, { Handlers } from './modules/on.js';
+import { Cache } from './modules/Cache.js';
+import { enterPage } from './modules/enterPage.js';
+import { getAnchorElement } from './modules/getAnchorElement.js';
+import { getAnimationPromises } from './modules/getAnimationPromises.js';
+import { getPageData } from './modules/getPageData.js';
+import { fetchPage } from './modules/fetchPage.js';
+import { leavePage } from './modules/leavePage.js';
+import { loadPage } from './modules/loadPage.js';
+import { replaceContent } from './modules/replaceContent.js';
+import { off } from './modules/off.js';
+import { on, Handlers } from './modules/on.js';
 import { use, unuse, findPlugin, Plugin } from './modules/plugins.js';
-import renderPage from './modules/renderPage.js';
-import triggerEvent from './modules/triggerEvent.js';
-import updateTransition from './modules/updateTransition.js';
+import { renderPage } from './modules/renderPage.js';
+import { triggerEvent } from './modules/triggerEvent.js';
+import { updateTransition } from './modules/updateTransition.js';
 
 import { queryAll } from './utils.js';
 

package/src/helpers/Location.ts

@@ -14,7 +14,7 @@
  *
  */
 
-export default class Location extends URL {
+export class Location extends URL {
 	constructor(url: string, base: string = document.baseURI) {
 		super(url.toString(), base);
 	}

package/src/helpers/classify.ts

@@ -1,4 +1,4 @@
-const classify = (text: string, fallback?: string): string => {
+export const classify = (text: string, fallback?: string): string => {
 	const output = String(text)
 		.toLowerCase()
 		// .normalize('NFD') // split an accented letter in the base letter and the acent
@@ -9,5 +9,3 @@ const classify = (text: string, fallback?: string): string => {
 		.replace(/^-+|-+$/, ''); // trim '-' from edges
 	return output || fallback || '';
 };
-
-export default classify;

package/src/helpers/cleanupAnimationClasses.ts

@@ -1,10 +1,8 @@
-const isSwupClass = (className: string): boolean =>
+export const isSwupClass = (className: string): boolean =>
 	/^to-/.test(className) || ['is-changing', 'is-rendering', 'is-popstate'].includes(className);
 
-const cleanupAnimationClasses = (): void => {
+export const cleanupAnimationClasses = (): void => {
 	const htmlClasses = document.documentElement.className.split(' ');
 	const removeClasses = htmlClasses.filter(isSwupClass);
 	document.documentElement.classList.remove(...removeClasses);
 };
-
-export default cleanupAnimationClasses;

package/src/helpers/createHistoryRecord.ts

@@ -1,6 +1,9 @@
-import { default as getCurrentUrl } from './getCurrentUrl.js';
+import { getCurrentUrl } from './getCurrentUrl.js';
 
-const createHistoryRecord = (url: string, customData: Record<string, unknown> = {}): void => {
+export const createHistoryRecord = (
+	url: string,
+	customData: Record<string, unknown> = {}
+): void => {
 	url = url || getCurrentUrl({ hash: true });
 	const data = {
 		url,
@@ -10,5 +13,3 @@ const createHistoryRecord = (url: string, customData: Record<string, unknown> =
 	};
 	history.pushState(data, '', url);
 };
-
-export default createHistoryRecord;

package/src/helpers/delegateEvent.ts

@@ -4,7 +4,7 @@ import { ParseSelector } from 'typed-query-selector/parser';
 export type Unsubscribe = {
 	destroy: () => void;
 };
-const delegateEvent = <Selector extends string, TEvent extends EventType>(
+export const delegateEvent = <Selector extends string, TEvent extends EventType>(
 	selector: Selector,
 	type: TEvent,
 	callback: delegate.EventHandler<GlobalEventHandlersEventMap[TEvent]>,
@@ -19,5 +19,3 @@ const delegateEvent = <Selector extends string, TEvent extends EventType>(
 	);
 	return { destroy: () => delegation.destroy() };
 };
-
-export default delegateEvent;

package/src/helpers/fetch.ts

@@ -1,7 +1,7 @@
 import { TransitionOptions } from '../modules/loadPage.js';
 import { Options } from '../Swup.js';
 
-const fetch = (
+export const fetch = (
 	options: TransitionOptions & { headers: Options['requestHeaders'] },
 	callback: (request: XMLHttpRequest) => void
 ): XMLHttpRequest => {
@@ -31,5 +31,3 @@ const fetch = (
 
 	return request;
 };
-
-export default fetch;

package/src/helpers/getCurrentUrl.ts

@@ -1,5 +1,3 @@
-const getCurrentUrl = ({ hash }: { hash?: boolean } = {}): string => {
+export const getCurrentUrl = ({ hash }: { hash?: boolean } = {}): string => {
 	return location.pathname + location.search + (hash ? location.hash : '');
 };
-
-export default getCurrentUrl;

package/src/helpers/getDataFromHtml.ts

@@ -7,7 +7,7 @@ export type PageHtmlData = {
 	pageClass?: string;
 };
 
-const getDataFromHtml = (html: string, containers: string[]): PageHtmlData => {
+export const getDataFromHtml = (html: string, containers: string[]): PageHtmlData => {
 	let fakeDom = document.createElement('html');
 	fakeDom.innerHTML = html;
 	let blocks: string[] = [];
@@ -37,5 +37,3 @@ const getDataFromHtml = (html: string, containers: string[]): PageHtmlData => {
 
 	return { title, pageClass, blocks, originalContent: html };
 };
-
-export default getDataFromHtml;

package/src/helpers/markSwupElements.ts

@@ -1,6 +1,6 @@
 import { query, queryAll } from '../utils.js';
 
-const markSwupElements = (element: Element, containers: string[]): void => {
+export const markSwupElements = (element: Element, containers: string[]): void => {
 	let blocks = 0;
 
 	containers.forEach((selector) => {
@@ -14,5 +14,3 @@ const markSwupElements = (element: Element, containers: string[]): void => {
 		}
 	});
 };
-
-export default markSwupElements;

package/src/helpers/updateHistoryRecord.ts

@@ -1,6 +1,6 @@
-import { default as getCurrentUrl } from './getCurrentUrl.js';
+import { getCurrentUrl } from './getCurrentUrl.js';
 
-const updateHistoryRecord = (
+export const updateHistoryRecord = (
 	url: string | null = null,
 	customData: Record<string, unknown> = {}
 ): void => {
@@ -14,5 +14,3 @@ const updateHistoryRecord = (
 	};
 	history.replaceState(data, '', url);
 };
-
-export default updateHistoryRecord;

package/src/helpers/versionSatisfies.ts

@@ -42,5 +42,3 @@ export const versionSatisfies = (installed: string, requirements: string[]) => {
 		return applyComparator(comparisonResult, (comparator as Comparator) || '>=');
 	});
 };
-
-export default versionSatisfies;

package/src/helpers.ts

@@ -1,4 +1,14 @@
 // Re-export all helpers to allow custom package export path
 // e.g. import { getPageData } from 'swup/helpers'
 
-export * from './helpers/index.js';
+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 { versionSatisfies } from './helpers/versionSatisfies.js';

package/src/modules/Cache.ts

@@ -53,5 +53,3 @@ export class Cache {
 		delete this.pages[this.getCacheUrl(url)];
 	}
 }
-
-export default Cache;

package/src/modules/enterPage.ts

@@ -1,7 +1,7 @@
 import { nextTick } from '../utils.js';
 import Swup from '../Swup.js';
 
-const enterPage = function (
+export const enterPage = function (
 	this: Swup,
 	{ popstate, skipTransition }: { popstate?: PopStateEvent; skipTransition?: boolean }
 ) {
@@ -24,5 +24,3 @@ const enterPage = function (
 	});
 	return animationPromises;
 };
-
-export default enterPage;

package/src/modules/fetchPage.ts

@@ -3,7 +3,7 @@ import { fetch } from '../helpers.js';
 import { TransitionOptions } from './loadPage.js';
 import { PageRecord } from './Cache.js';
 
-export default function fetchPage(this: Swup, data: TransitionOptions): Promise<PageRecord> {
+export function fetchPage(this: Swup, data: TransitionOptions): Promise<PageRecord> {
 	const headers = this.options.requestHeaders;
 	const { url } = data;
 

package/src/modules/getAnchorElement.ts

@@ -1,6 +1,6 @@
 import { escapeCssIdentifier, query } from '../utils.js';
 
-const getAnchorElement = (hash: string): Element | null => {
+export const getAnchorElement = (hash: string): Element | null => {
 	if (!hash) {
 		return null;
 	}
@@ -15,5 +15,3 @@ const getAnchorElement = (hash: string): Element | null => {
 	// https://html.spec.whatwg.org/#find-a-potential-indicated-element
 	return query(`#${hash}`) || query(`a[name='${hash}']`);
 };
-
-export default getAnchorElement;

package/src/modules/getAnimationPromises.ts

@@ -17,7 +17,7 @@ if (window.onanimationend === undefined && window.onwebkitanimationend !== undef
 	animationEndEvent = 'webkitAnimationEnd';
 }
 
-export default function getAnimationPromises(
+export function getAnimationPromises(
 	this: Swup,
 	// we don't use this argument, but JS plugin depends on it with
 	// its own version of getAnimationPromises, so it must be specified when

package/src/modules/getPageData.ts

@@ -5,7 +5,7 @@ import { PageHtmlData } from '../helpers/getDataFromHtml.js';
 export type PageData = PageHtmlData & {
 	responseURL: string;
 };
-const getPageData = function (this: Swup, request: XMLHttpRequest): PageData | null {
+export const getPageData = function (this: Swup, request: XMLHttpRequest): PageData | null {
 	// this method can be replaced in case other content than html is expected to be received from server
 	// this function should always return { title, pageClass, originalContent, blocks, responseURL }
 	// in case page has invalid structure - return null
@@ -22,5 +22,3 @@ const getPageData = function (this: Swup, request: XMLHttpRequest): PageData | n
 		responseURL: request.responseURL || window.location.href
 	};
 };
-
-export default getPageData;

package/src/modules/leavePage.ts

@@ -1,7 +1,7 @@
 import Swup from '../Swup.js';
 import { TransitionOptions } from './loadPage.js';
 
-const leavePage = function (
+export const leavePage = function (
 	this: Swup,
 	data: TransitionOptions,
 	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
@@ -29,5 +29,3 @@ const leavePage = function (
 
 	return animationPromises;
 };
-
-export default leavePage;

package/src/modules/loadPage.ts

@@ -7,7 +7,11 @@ export type TransitionOptions = {
 	customTransition?: string;
 };
 
-const loadPage = function (this: Swup, data: TransitionOptions, popstate: PopStateEvent | null) {
+export const loadPage = function (
+	this: Swup,
+	data: TransitionOptions,
+	popstate: PopStateEvent | null
+) {
 	const { url, customTransition } = data;
 	const skipTransition = !!(popstate && !this.options.animateHistoryBrowsing);
 
@@ -51,5 +55,3 @@ const loadPage = function (this: Swup, data: TransitionOptions, popstate: PopSta
 			history.go(-1);
 		});
 };
-
-export default loadPage;

package/src/modules/off.ts

@@ -1,7 +1,7 @@
 import Swup from '../Swup.js';
 import { EventType, Handler } from './on.js';
 
-const off = function off(this: Swup, event?: EventType, handler?: Handler) {
+export const off = function off(this: Swup, event?: EventType, handler?: Handler) {
 	if (event && handler) {
 		// Remove specific handler
 		if (this._handlers[event].includes(handler)) {
@@ -19,5 +19,3 @@ const off = function off(this: Swup, event?: EventType, handler?: Handler) {
 		});
 	}
 };
-
-export default off;

package/src/modules/on.ts

@@ -24,12 +24,10 @@ export type EventType =
 export type Handler = (event?: Event) => void;
 export type Handlers = Record<EventType, Handler[]>;
 
-const on = function on(this: Swup, event: EventType, handler: Handler) {
+export const on = function on(this: Swup, event: EventType, handler: Handler) {
 	if (this._handlers[event]) {
 		this._handlers[event].push(handler);
 	} else {
 		console.warn(`Unsupported event ${event}.`);
 	}
 };
-
-export default on;

package/src/modules/renderPage.ts

@@ -2,7 +2,7 @@ import { Location, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
 import Swup from '../Swup.js';
 import { PageRecord } from './Cache.js';
 
-const renderPage = function (
+export const renderPage = function (
 	this: Swup,
 	page: PageRecord,
 	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
@@ -48,5 +48,3 @@ const renderPage = function (
 		this.scrollToElement = null;
 	});
 };
-
-export default renderPage;

package/src/modules/replaceContent.ts

@@ -10,7 +10,7 @@
  * @param {object} page The page object
  * @returns Promise
  */
-const replaceContent = function ({ blocks, title }: { blocks: string[]; title: string }) {
+export const replaceContent = function ({ blocks, title }: { blocks: string[]; title: string }) {
 	// Replace content blocks
 	blocks.forEach((html, i) => {
 		// we know the block exists at this point
@@ -24,5 +24,3 @@ const replaceContent = function ({ blocks, title }: { blocks: string[]; title: s
 	// Return a Promise to allow plugins to defer
 	return Promise.resolve();
 };
-
-export default replaceContent;

package/src/modules/triggerEvent.ts

@@ -1,7 +1,7 @@
 import { EventType } from './on.js';
 import Swup from '../Swup.js';
 
-const triggerEvent = function (
+export const triggerEvent = function (
 	this: Swup,
 	eventName: EventType,
 	originalEvent?: PopStateEvent | MouseEvent
@@ -19,5 +19,3 @@ const triggerEvent = function (
 	const event = new CustomEvent(`swup:${eventName}`, { detail: eventName });
 	document.dispatchEvent(event);
 };
-
-export default triggerEvent;

package/src/modules/updateTransition.ts

@@ -1,7 +1,10 @@
 import Swup from '../Swup.js';
 
-const updateTransition = function (this: Swup, from: string, to: string, custom?: string): void {
+export const updateTransition = function (
+	this: Swup,
+	from: string,
+	to: string,
+	custom?: string
+): void {
 	this.transition = { from, to, custom };
 };
-
-export default updateTransition;

package/src/helpers/index.ts

@@ -1,11 +0,0 @@
-export { default as classify } from './classify.js';
-export { default as createHistoryRecord } from './createHistoryRecord.js';
-export { default as updateHistoryRecord } from './updateHistoryRecord.js';
-export { default as delegateEvent } from './delegateEvent.js';
-export { default as getDataFromHtml } from './getDataFromHtml.js';
-export { default as fetch } from './fetch.js';
-export { default as getCurrentUrl } from './getCurrentUrl.js';
-export { default as Location } from './Location.js';
-export { default as markSwupElements } from './markSwupElements.js';
-export { default as cleanupAnimationClasses } from './cleanupAnimationClasses.js';
-export { default as versionSatisfies } from './versionSatisfies.js';