swup 2.0.19 → 3.0.0-rc.1

package/src/modules/getPageData.ts

@@ -0,0 +1,26 @@
+import { getDataFromHtml } from '../helpers.js';
+import Swup from '../index.js';
+import { PageHtmlData } from '../helpers/getDataFromHtml.js';
+
+export type PageData = PageHtmlData & {
+	responseURL: string;
+};
+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
+	const html = request.responseText;
+	const pageHtmlData = getDataFromHtml(html, this.options.containers);
+
+	if (!pageHtmlData) {
+		console.warn('[swup] Received page is invalid.');
+		return null;
+	}
+
+	return {
+		...pageHtmlData,
+		responseURL: request.responseURL || window.location.href
+	};
+};
+
+export default getPageData;

package/src/modules/leavePage.ts

@@ -0,0 +1,33 @@
+import Swup from '../index.js';
+import { TransitionOptions } from './loadPage.js';
+
+const leavePage = function(
+	this: Swup,
+	data: TransitionOptions,
+	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
+		popstate: null
+	}
+) {
+	if (skipTransition) {
+		this.triggerEvent('animationSkipped');
+		return [Promise.resolve()];
+	}
+
+	this.triggerEvent('animationOutStart');
+
+	// handle classes
+	document.documentElement.classList.add('is-changing', 'is-leaving', 'is-animating');
+	if (popstate) {
+		document.documentElement.classList.add('is-popstate');
+	}
+
+	// animation promise stuff
+	const animationPromises: Promise<void>[] = this.getAnimationPromises('out');
+	Promise.all(animationPromises).then(() => {
+		this.triggerEvent('animationOutDone');
+	});
+
+	return animationPromises;
+};
+
+export default leavePage;

package/src/modules/loadPage.ts

@@ -0,0 +1,54 @@
+import { classify, createHistoryRecord, getCurrentUrl } from '../helpers.js';
+import Swup from '../index.js';
+
+export type TransitionOptions = {
+	url: string;
+	customTransition?: string;
+};
+
+const loadPage = function(this: Swup, data: TransitionOptions, popstate: PopStateEvent | null) {
+	const { url, customTransition } = data;
+	const skipTransition = !!(popstate && !this.options.animateHistoryBrowsing);
+
+	this.triggerEvent('transitionStart', popstate || undefined);
+
+	// set transition object
+	this.updateTransition(getCurrentUrl(), url, customTransition);
+	if (customTransition != null) {
+		document.documentElement.classList.add(`to-${classify(customTransition)}`);
+	}
+
+	// start/skip animation
+	const animationPromises = this.leavePage(data, { popstate, skipTransition });
+
+	// create history record if this is not a popstate call (with or without anchor)
+	if (!popstate) {
+		createHistoryRecord(url + (this.scrollToElement || ''));
+	}
+
+	this.currentPageUrl = getCurrentUrl();
+
+	// Load page data
+	const fetchPromise = this.fetchPage(data);
+
+	// when everything is ready, render the page
+	Promise.all([fetchPromise, ...animationPromises])
+		.then(([pageData]) => {
+			this.renderPage(pageData, { popstate, skipTransition });
+		})
+		.catch((errorUrl) => {
+			// Return early if errorUrl is not defined (probably aborted preload request)
+			if (errorUrl === undefined) return;
+
+			// Rewrite `skipPopStateHandling` to redirect manually when `history.go` is processed
+			this.options.skipPopStateHandling = () => {
+				window.location = errorUrl;
+				return true;
+			};
+
+			// Go back to the actual page we're still at
+			history.go(-1);
+		});
+};
+
+export default loadPage;

package/src/modules/off.ts

@@ -0,0 +1,23 @@
+import Swup from '../index.js';
+import { EventType, Handler } from './on.js';
+
+const off = function off(this: Swup, event?: EventType, handler?: Handler) {
+	if (event && handler) {
+		// Remove specific handler
+		if (this._handlers[event].includes(handler)) {
+			this._handlers[event] = this._handlers[event].filter((h) => h !== handler);
+		} else {
+			console.warn(`Handler for event '${event}' not found.`);
+		}
+	} else if (event) {
+		// Remove all handlers for specific event
+		this._handlers[event] = [];
+	} else {
+		// Remove all handlers for all events
+		Object.keys(this._handlers).forEach((event) => {
+			this._handlers[event as EventType] = [];
+		});
+	}
+};
+
+export default off;

package/src/modules/on.ts

@@ -0,0 +1,35 @@
+import Swup from '../index.js';
+
+export type EventType =
+	| 'animationInDone'
+	| 'animationInStart'
+	| 'animationOutDone'
+	| 'animationOutStart'
+	| 'animationSkipped'
+	| 'clickLink'
+	| 'contentReplaced'
+	| 'disabled'
+	| 'enabled'
+	| 'openPageInNewTab'
+	| 'pageLoaded'
+	| 'pageRetrievedFromCache'
+	| 'pageView'
+	| 'popState'
+	| 'samePage'
+	| 'samePageWithHash'
+	| 'serverError'
+	| 'transitionStart'
+	| 'transitionEnd'
+	| 'willReplaceContent';
+export type Handler = (event?: Event) => void;
+export type Handlers = Record<EventType, Handler[]>;
+
+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/plugins.ts

@@ -0,0 +1,58 @@
+import Swup from '../index.js';
+
+// this should probably just be imported from @swup/plugin, but it doesn't have type defs now
+export type Plugin = {
+	name: string;
+	mount: () => void;
+	unmount: () => void;
+	isSwupPlugin: true;
+	swup?: Swup;
+
+	// these are possibly undefined for backward compatibility
+	_beforeMount?: () => void;
+	_afterUnmount?: () => void;
+	_checkRequirements?: () => boolean;
+};
+
+export const use = function(this: Swup, plugin: Plugin) {
+	if (!plugin.isSwupPlugin) {
+		console.error('Not a swup plugin instance', plugin);
+		return;
+	}
+
+	plugin.swup = this;
+	if (plugin._checkRequirements) {
+		if (!plugin._checkRequirements()) {
+			return;
+		}
+	}
+	if (plugin._beforeMount) {
+		plugin._beforeMount();
+	}
+	plugin.mount();
+
+	this.plugins.push(plugin);
+
+	return this.plugins;
+};
+
+export function unuse(this: Swup, pluginOrName: Plugin | string) {
+	const plugin = this.findPlugin(pluginOrName);
+	if (!plugin) {
+		console.error('No such plugin', plugin);
+		return;
+	}
+
+	plugin.unmount();
+	if (plugin._afterUnmount) {
+		plugin._afterUnmount();
+	}
+
+	this.plugins = this.plugins.filter((p) => p !== plugin);
+
+	return this.plugins;
+}
+
+export function findPlugin(this: Swup, pluginOrName: Plugin | string) {
+	return this.plugins.find((plugin) => plugin === pluginOrName || plugin.name === pluginOrName);
+}

package/src/modules/renderPage.ts

@@ -0,0 +1,52 @@
+import { Location, updateHistoryRecord, getCurrentUrl } from '../helpers.js';
+import Swup from '../index.js';
+import { PageRecord } from './Cache.js';
+
+const renderPage = function(
+	this: Swup,
+	page: PageRecord,
+	{ popstate, skipTransition }: { popstate: PopStateEvent | null; skipTransition?: boolean } = {
+		popstate: null
+	}
+) {
+	document.documentElement.classList.remove('is-leaving');
+
+	// do nothing if another page was requested in the meantime
+	if (!this.isSameResolvedUrl(getCurrentUrl(), page.url)) {
+		return;
+	}
+
+	const { url } = Location.fromUrl(page.responseURL);
+
+	// update cache and state if the url was redirected
+	if (!this.isSameResolvedUrl(getCurrentUrl(), url)) {
+		this.cache.cacheUrl({ ...page, url });
+		this.currentPageUrl = getCurrentUrl();
+		updateHistoryRecord(url);
+	}
+
+	// only add for page loads with transitions
+	if (!skipTransition) {
+		document.documentElement.classList.add('is-rendering');
+	}
+
+	this.triggerEvent('willReplaceContent', popstate || undefined);
+
+	this.replaceContent(page).then(() => {
+		this.triggerEvent('contentReplaced', popstate || undefined);
+		this.triggerEvent('pageView', popstate || undefined);
+
+		// empty cache if it's disabled (in case preload plugin filled it)
+		if (!this.options.cache) {
+			this.cache.empty();
+		}
+
+		// Perform in transition
+		this.enterPage({ popstate: popstate || undefined, skipTransition });
+
+		// reset scroll-to element
+		this.scrollToElement = null;
+	});
+};
+
+export default renderPage;

package/src/modules/replaceContent.ts

@@ -0,0 +1,28 @@
+/**
+ * Perform the replacement of content after loading a page.
+ *
+ * This method can be replaced or augmented by plugins to allow pausing.
+ *
+ * It takes an object with the page data as return from `getPageData` and has to
+ * return a Promise that resolves once all content has been replaced and the
+ * site is ready to start animating in the new page.
+ *
+ * @param {object} page The page object
+ * @returns Promise
+ */
+const replaceContent = function({ blocks, title }: { blocks: string[]; title: string }) {
+	// Replace content blocks
+	blocks.forEach((html, i) => {
+		// we know the block exists at this point
+		const block = document.body.querySelector(`[data-swup="${i}"]`)!;
+		block.outerHTML = html;
+	});
+
+	// Update browser title
+	document.title = title;
+
+	// Return a Promise to allow plugins to defer
+	return Promise.resolve();
+};
+
+export default replaceContent;

package/src/modules/triggerEvent.ts

@@ -0,0 +1,23 @@
+import { EventType } from './on.js';
+import Swup from '../index.js';
+
+const triggerEvent = function(
+	this: Swup,
+	eventName: EventType,
+	originalEvent?: PopStateEvent | MouseEvent
+): void {
+	// call saved handlers with "on" method and pass originalEvent object if available
+	this._handlers[eventName].forEach((handler) => {
+		try {
+			handler(originalEvent);
+		} catch (error) {
+			console.error(error);
+		}
+	});
+
+	// trigger event on document with prefix "swup:"
+	const event = new CustomEvent(`swup:${eventName}`, { detail: eventName });
+	document.dispatchEvent(event);
+};
+
+export default triggerEvent;

package/src/modules/updateTransition.ts

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

package/src/utils/index.ts

@@ -0,0 +1,32 @@
+export const query = (selector: string, context: Document | Element = document) => {
+	return context.querySelector<HTMLElement>(selector);
+};
+
+export const queryAll = (
+	selector: string,
+	context: Document | Element = document
+): HTMLElement[] => {
+	return Array.from(context.querySelectorAll(selector));
+};
+
+export const nextTick = (callback: () => void) => {
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			callback();
+		});
+	});
+};
+
+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) {
+		return CSS.escape(ident);
+	} else {
+		return ident;
+	}
+};
+
+// Fix for Chrome below v61 formatting CSS floats with comma in some locales
+export const toMs = (s: string) => {
+	return Number(s.slice(0, -1).replace(',', '.')) * 1000;
+};

package/src/utils.ts

@@ -0,0 +1,4 @@
+// Re-export all utils to allow custom package export path
+// e.g. import { queryAll } from 'swup/utils'
+
+export * from './utils/index.js';

package/.editorconfig

@@ -1,19 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-max_line_length = 100
-
-[*.{js,mjs}]
-indent_style = tab
-indent_size = 4
-
-[*.{json,md,yaml,yml}]
-indent_style = space
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false

package/cypress.config.js

@@ -1,14 +0,0 @@
-const { defineConfig } = require('cypress')
-
-module.exports = defineConfig({
-  projectId: 'dpucip',
-  e2e: {
-    baseUrl: 'http://localhost:8274',
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-    chromeWebSecurity: false,
-    setupNodeEvents(on, config) {
-      require('@cypress/code-coverage/task')(on, config)
-      return config
-    }
-  }
-})