Repository: swup/swup
Pull request #595 (2023-01-19 16:32:55)

Fix ignore visit param
**Description**

Fix `ignoreVisit` param and remove origin from URL since it's never required for swup visits. Keeps query params and hash.

I'll update the docs when this is merged.

Before:

```js
ignoreVisit: (href, { el } = {}) => pattern.test(href.replace(window.location.origin, '')))
```

After:

```js
ignoreVisit: (url, { el } = {}) => pattern.test(url))
```

**Checks**

- [x] The PR is submitted to the `master` 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

**Additional information**

<!--
Any additional information like breaking changes, dependencies added, screenshots, comparisons between new and old behavior, etc.
-->



Patch:
diff --git a/cypress/fixtures/ignore-visits.html b/cypress/fixtures/ignore-visits.html
index 9d4dca6..bf2c557 100644
--- a/cypress/fixtures/ignore-visits.html
+++ b/cypress/fixtures/ignore-visits.html
@@ -11,10 +11,16 @@
     <header class="header">
         <ul>
             <li>
-                <a href="/page-2.html" data-no-swup>Ignored link</a>
+                <a href="/page-2.html" data-no-swup data-cy="ignore-element">Ignored link</a>
             </li>
             <li data-no-swup>
-                <a href="/page-2.html">Ignored link parent</a>
+                <a href="/page-2.html" data-cy="ignore-parent">Ignored link parent</a>
+            </li>
+            <li>
+                <a href="/page-2.html" data-cy="ignore-path-start">Ignored path</a>
+            </li>
+            <li>
+                <a href="/page-2.html#hash" data-cy="ignore-path-end">Ignored path with hash</a>
             </li>
         </ul>
     </header>
diff --git a/src/Swup.ts b/src/Swup.ts
index 1c7ea27..3c0c849 100644
--- a/src/Swup.ts
+++ b/src/Swup.ts
@@ -47,7 +47,7 @@ export type Options = {
 	requestHeaders: Record<string, string>;
 	plugins: Plugin[];
 	skipPopStateHandling: (event: any) => boolean;
-	ignoreVisit: (href: string, { el }: { el?: Element }) => boolean;
+	ignoreVisit: (url: string, { el }: { el?: Element }) => boolean;
 	resolveUrl: (url: string) => string;
 };
 
@@ -120,7 +120,7 @@ export default class Swup {
 		animationSelector: '[class*="transition-"]',
 		cache: true,
 		containers: ['#swup'],
-		ignoreVisit: (href, { el } = {}) => !!el?.closest('[data-no-swup]'),
+		ignoreVisit: (url, { el } = {}) => !!el?.closest('[data-no-swup]'),
 		linkSelector: 'a[href]',
 		plugins: [],
 		resolveUrl: (url) => url,
@@ -214,9 +214,9 @@ export default class Swup {
 	}
 
 	shouldIgnoreVisit(href: string, { el }: { el?: Element } = {}) {
-		const { origin } = Location.fromUrl(href);
+		const { origin, url, hash } = Location.fromUrl(href);
 
-		// Ignore if the new URL's origin doesn't match the current one
+		// Ignore if the new origin doesn't match the current one
 		if (origin !== window.location.origin) {
 			return true;
 		}
@@ -227,7 +227,7 @@ export default class Swup {
 		}
 
 		// Ignore if the visit should be ignored as per user options
-		if (this.options.ignoreVisit(href, { el })) {
+		if (this.options.ignoreVisit(url + hash, { el })) {
 			return true;
 		}
 


Test patch:
diff --git a/cypress/e2e/main.spec.js b/cypress/e2e/main.spec.js
index b100fe8..97008f5 100644
--- a/cypress/e2e/main.spec.js
+++ b/cypress/e2e/main.spec.js
@@ -268,21 +268,38 @@ describe('Link resolution', function () {
 describe('Ignoring visits', function () {
 	beforeEach(() => {
 		cy.visit('/ignore-visits.html');
+		cy.wrapSwupInstance();
 	});
 
 	it('should ignore links with data-no-swup attr', function () {
 		cy.shouldHaveReloadedAfterAction(() => {
-			cy.get(`a[data-no-swup]`).first().click();
+			cy.get('[data-cy="ignore-element"]').first().click();
 		});
 		cy.shouldBeAtPage('/page-2.html');
 	});
 
 	it('should ignore links with data-no-swup parent', function () {
 		cy.shouldHaveReloadedAfterAction(() => {
-			cy.get(`li[data-no-swup] a`).first().click();
+			cy.get('[data-cy="ignore-parent"]').first().click();
+		});
+		cy.shouldBeAtPage('/page-2.html');
+	});
+
+	it('should ignore links via custom ignored path', function () {
+		this.swup.options.ignoreVisit = (url) => url.startsWith('/page-2');
+		cy.shouldHaveReloadedAfterAction(() => {
+			cy.get('[data-cy="ignore-path-start"]').first().click();
 		});
 		cy.shouldBeAtPage('/page-2.html');
 	});
+
+	it('should ignore links via custom ignored path', function () {
+		this.swup.options.ignoreVisit = (url) => url.endsWith('.html#hash');
+		cy.shouldHaveReloadedAfterAction(() => {
+			cy.get('[data-cy="ignore-path-end"]').first().click();
+		});
+		cy.shouldBeAtPage('/page-2.html#hash');
+	});
 });
 
 describe('Link selector', function () {
diff --git a/src/__test__/index.test.ts b/src/__test__/index.test.ts
index 9502f5d..cb59143 100644
--- a/src/__test__/index.test.ts
+++ b/src/__test__/index.test.ts
@@ -4,6 +4,8 @@ console.log = jest.fn();
 console.warn = jest.fn();
 console.error = jest.fn();
 
+const baseUrl = window.location.origin;
+
 describe('exports', () => {
 	it('exports Swup, and Options/Plugin types', () => {
 		class SwupPlugin implements Plugin {
@@ -18,7 +20,7 @@ describe('exports', () => {
 			animationSelector: '[class*="transition-"]',
 			cache: true,
 			containers: ['#swup'],
-			ignoreVisit: (href, { el } = {}) => !!el?.closest('[data-no-swup]'),
+			ignoreVisit: (url, { el } = {}) => !!el?.closest('[data-no-swup]'),
 			linkSelector: 'a[href]',
 			plugins: [new SwupPlugin()],
 			resolveUrl: (url) => url,
@@ -33,4 +35,18 @@ describe('exports', () => {
 
 		expect(swup.version).not.toBeUndefined();
 	});
+
+	it('passes relative URL to ignoreVisit', () => {
+		let ignorableUrl = 'nothing';
+		const swup = new Swup({
+			ignoreVisit: (url, { el } = {}) => {
+				ignorableUrl = url;
+				return false;
+			}
+		});
+
+		swup.shouldIgnoreVisit(baseUrl + '/path/?query#hash');
+
+		expect(ignorableUrl).toEqual('/path/?query#hash');
+	});
 });