Repository: swup/swup
Pull request #710 (2023-07-06 15:03:19)

Rename visit method
**Description**

- Rename `loadPage` → `visit` to better communicate intent

**Checks**

- [x] The PR is submitted to the `next` branch
- [x] The code was linted before pushing (`npm run lint`)
- [x] All tests are passing (`npm run test`)
- [x] New or updated tests are included
- [ ] The documentation was updated as required


Patch:
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 14ad84f..6c96c81 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -119,7 +119,7 @@ Cypress.Commands.add('shouldAnimateWithDuration', function (durationInMs, url =
 		this.swup.hooks.on('animationSkipped', () => (durationIn = 0));
 		this.swup.hooks.on('animationSkipped', () => (durationOut = 0));
 		url = url || window.location.href;
-		this.swup.loadPage(url);
+		this.swup.visit(url);
 	});
 
 	cy.window().should(() => {
diff --git a/src/Swup.ts b/src/Swup.ts
index 70e9527..0542d46 100644
--- a/src/Swup.ts
+++ b/src/Swup.ts
@@ -11,13 +11,12 @@ import { Context, createContext } from './modules/Context.js';
 import { Hooks } from './modules/Hooks.js';
 import { getAnchorElement } from './modules/getAnchorElement.js';
 import { getAnimationPromises } from './modules/getAnimationPromises.js';
-import { loadPage } from './modules/loadPage.js';
+import { visit, performVisit, HistoryAction } from './modules/visit.js';
 import { fetchPage } from './modules/fetchPage.js';
 import { leavePage } from './modules/leavePage.js';
 import { replaceContent } from './modules/replaceContent.js';
 import { enterPage } from './modules/enterPage.js';
 import { renderPage } from './modules/renderPage.js';
-import { performPageLoad, HistoryAction } from './modules/loadPage.js';
 import { use, unuse, findPlugin, Plugin } from './modules/plugins.js';
 
 export type Options = {
@@ -54,15 +53,15 @@ export default class Swup {
 	// subscription handle for delegated event listener
 	private clickDelegate?: DelegateEventUnsubscribe;
 
-	loadPage = loadPage;
-	performPageLoad = performPageLoad;
+	visit = visit;
+	performVisit = performVisit;
 	leavePage = leavePage;
 	renderPage = renderPage;
 	replaceContent = replaceContent;
 	enterPage = enterPage;
 	delegateEvent = delegateEvent;
-	getAnimationPromises = getAnimationPromises;
 	fetchPage = fetchPage;
+	getAnimationPromises = getAnimationPromises;
 	getAnchorElement = getAnchorElement;
 	use = use;
 	unuse = unuse;
@@ -262,7 +261,7 @@ export default class Swup {
 			}
 
 			// Finally, proceed with loading the page
-			this.performPageLoad(url);
+			this.performVisit(url);
 		});
 	}
 
@@ -309,7 +308,7 @@ export default class Swup {
 		// }
 
 		this.hooks.triggerSync('popState', { event }, () => {
-			this.performPageLoad(url);
+			this.performVisit(url);
 		});
 	}
 
diff --git a/src/modules/Context.ts b/src/modules/Context.ts
index 91501e0..cc6a85a 100644
--- a/src/modules/Context.ts
+++ b/src/modules/Context.ts
@@ -1,5 +1,5 @@
 import Swup, { Options } from '../Swup.js';
-import { HistoryAction } from './loadPage.js';
+import { HistoryAction } from './visit.js';
 
 export interface Context<TEvent = Event> {
 	from: FromContext;
diff --git a/src/modules/loadPage.ts b/src/modules/visit.ts
similarity index 93%
rename from src/modules/loadPage.ts
rename to src/modules/visit.ts
index b7c3e1f..79d25e0 100755
--- a/src/modules/loadPage.ts
+++ b/src/modules/visit.ts
@@ -1,6 +1,6 @@
 import Swup from '../Swup.js';
 import { createHistoryRecord, updateHistoryRecord, getCurrentUrl, Location } from '../helpers.js';
-import { FetchOptions } from '../modules/fetchPage.js';
+import { FetchOptions } from './fetchPage.js';
 import { ContextInitOptions } from './Context.js';
 
 export type HistoryAction = 'push' | 'replace';
@@ -11,7 +11,7 @@ export type PageLoadOptions = {
 	history?: HistoryAction;
 };
 
-export function loadPage(
+export function visit(
 	this: Swup,
 	url: string,
 	options: PageLoadOptions & FetchOptions = {},
@@ -23,17 +23,17 @@ export function loadPage(
 	} else {
 		const { url: to, hash } = Location.fromUrl(url);
 		this.context = this.createContext({ ...context, to, hash });
-		this.performPageLoad(to, options);
+		this.performVisit(to, options);
 	}
 }
 
-export async function performPageLoad(
+export async function performVisit(
 	this: Swup,
 	url: string,
 	options: PageLoadOptions & FetchOptions = {}
 ) {
 	if (typeof url !== 'string') {
-		throw new Error(`loadPage requires a URL parameter`);
+		throw new Error(`swup.visit() requires a URL parameter`);
 	}
 
 	this.context.to.url = Location.fromUrl(url).url;


Test patch:
diff --git a/cypress/e2e/_plugins.spec.js b/cypress/e2e/_plugins.spec.js
index 532de74..f473bd8 100644
--- a/cypress/e2e/_plugins.spec.js
+++ b/cypress/e2e/_plugins.spec.js
@@ -70,7 +70,7 @@ describe('Body Class Plugin', function () {
 
 	it('should update the body class', function () {
 		cy.get('body').should('have.class', 'body-1');
-		this.swup.loadPage('/plugins/body-class-plugin-2.html');
+		this.swup.visit('/plugins/body-class-plugin-2.html');
 		cy.get('body').should('have.class', 'body-2');
 		cy.get('body').should('not.have.class', 'body-1');
 	});
diff --git a/cypress/e2e/main.spec.js b/cypress/e2e/main.spec.js
index ce04d0b..31d3f21 100644
--- a/cypress/e2e/main.spec.js
+++ b/cypress/e2e/main.spec.js
@@ -33,7 +33,7 @@ describe('Request', function () {
 	it('should force-load on server error', function () {
 		cy.intercept('/error-500.html', { statusCode: 500, times: 1 });
 		cy.shouldHaveReloadedAfterAction(() => {
-			this.swup.loadPage('/error-500.html');
+			this.swup.visit('/error-500.html');
 		});
 		cy.shouldBeAtPage('/error-500.html');
 	});
@@ -41,7 +41,7 @@ describe('Request', function () {
 	it('should force-load on network error', function () {
 		cy.intercept('/error-network.html', { times: 1 }, { forceNetworkError: true });
 		cy.shouldHaveReloadedAfterAction(() => {
-			this.swup.loadPage('/error-network.html');
+			this.swup.visit('/error-network.html');
 		});
 		cy.shouldBeAtPage('/error-network.html');
 	});
@@ -57,7 +57,7 @@ describe('Fetch', function () {
 		this.swup.hooks.replace('loadPage', (context, args, originalHandler) => {
 			return originalHandler(context, args);
 		});
-		this.swup.loadPage('/page-2.html');
+		this.swup.visit('/page-2.html');
 
 		cy.shouldBeAtPage('/page-2.html');
 		cy.shouldHaveH1('Page 2');
@@ -75,7 +75,7 @@ describe('Fetch', function () {
 				html: '<html><body><div id="swup"><h1>Page 3</h1></div></body></html>'
 			};
 		});
-		this.swup.loadPage('/page-2.html');
+		this.swup.visit('/page-2.html');
 
 		cy.shouldBeAtPage('/page-3.html');
 		cy.shouldHaveH1('Page 3');
@@ -88,7 +88,7 @@ describe('Fetch', function () {
 		this.swup.hooks.replace('loadPage', () => {
 			return this.swup.fetchPage('page-3.html');
 		});
-		this.swup.loadPage('/page-2.html');
+		this.swup.visit('/page-2.html');
 
 		cy.shouldBeAtPage('/page-3.html');
 		cy.shouldHaveH1('Page 3');
@@ -102,13 +102,13 @@ describe('Cache', function () {
 	});
 
 	it('should cache pages', function () {
-		this.swup.loadPage('/page-2.html');
+		this.swup.visit('/page-2.html');
 		cy.shouldBeAtPage('/page-2.html');
 		cy.shouldHaveCacheEntry('/page-2.html');
 	});
 
 	it('should cache pages from absolute URLs', function () {
-		this.swup.loadPage(`${baseUrl}/page-2.html`);
+		this.swup.visit(`${baseUrl}/page-2.html`);
 		cy.shouldBeAtPage('/page-2.html');
 		cy.shouldHaveCacheEntry('/page-2.html');
 	});
@@ -379,10 +379,10 @@ describe('Ignoring visits', function () {
 		cy.shouldBeAtPage('/page-2.html#hash');
 	});
 
-	it('should ignore visits via loadPage', function () {
+	it('should ignore visits in swup.visit', function () {
 		this.swup.options.ignoreVisit = (url) => true;
 		cy.shouldHaveReloadedAfterAction(() => {
-			this.swup.loadPage('/page-2.html');
+			this.swup.visit('/page-2.html');
 		});
 		cy.shouldBeAtPage('/page-2.html');
 	});
@@ -488,11 +488,11 @@ describe('History', function () {
 
 	it('should replace the current history state via API', function () {
 		cy.window().then(() => {
-			this.swup.loadPage('/page-2.html');
+			this.swup.visit('/page-2.html');
 		});
 		cy.shouldBeAtPage('/page-2.html');
 		cy.window().then(() => {
-			this.swup.loadPage('/page-3.html', { history: 'replace' });
+			this.swup.visit('/page-3.html', { history: 'replace' });
 		});
 		cy.shouldBeAtPage('/page-3.html');
 		cy.window().then((window) => {
@@ -576,7 +576,7 @@ describe('API', function () {
 	});
 
 	it('should navigate to pages using swup API', function () {
-		this.swup.loadPage('/page-2.html');
+		this.swup.visit('/page-2.html');
 		cy.shouldBeAtPage('/page-2.html');
 		cy.shouldHaveH1('Page 2');
 	});
@@ -645,7 +645,7 @@ describe('Context', function () {
 			historyVisit = context.history.popstate;
 		});
 		cy.window().then(() => {
-			this.swup.loadPage('/page-2.html');
+			this.swup.visit('/page-2.html');
 		});
 		cy.shouldBeAtPage('/page-2.html');
 		cy.window().then((window) => {
@@ -693,7 +693,7 @@ describe('Containers', function () {
 		this.swup.hooks.before('transitionStart', (context) => {
 			context.containers = ['#aside'];
 		});
-		this.swup.loadPage('/containers-2.html', { animate: false });
+		this.swup.visit('/containers-2.html', { animate: false });
 		cy.get('h1').should('contain', 'Containers 1');
 		cy.get('h2').should('contain', 'Heading 2');
 	});
@@ -702,14 +702,14 @@ describe('Containers', function () {
 		this.swup.hooks.before('replaceContent', (context) => {
 			context.containers = ['#main'];
 		});
-		this.swup.loadPage('/containers-2.html', { animate: false });
+		this.swup.visit('/containers-2.html', { animate: false });
 		cy.get('h1').should('contain', 'Containers 2');
 		cy.get('h2').should('contain', 'Heading 1');
 	});
 
 	it('should force-load on container mismatch', function () {
 		cy.shouldHaveReloadedAfterAction(() => {
-			this.swup.loadPage('/containers-missing.html');
+			this.swup.visit('/containers-missing.html');
 		});
 		cy.shouldBeAtPage('/containers-missing.html');
 	});
diff --git a/src/__test__/index.test.ts b/src/__test__/index.test.ts
index be10c29..3ce715c 100644
--- a/src/__test__/index.test.ts
+++ b/src/__test__/index.test.ts
@@ -84,10 +84,10 @@ describe('ignoreVisit', () => {
 		);
 	});
 
-	it('should be called from loadPage method', () => {
+	it('should be called from visit method', () => {
 		const ignoreVisit = vi.fn(() => true);
 		const swup = new Swup({ ignoreVisit });
-		swup.loadPage('/path/');
+		swup.visit('/path/');
 
 		expect(ignoreVisit.mock.calls).toHaveLength(1);
 	});