[Bug]: Undefined link href on Safari 13.1 and lower about swup

[MrCaumartin]

I got the same result as you. Safari seems to force the custom class on the extends.

I did a non elegant fix by forcing the class to use the current class :

/**
 * A helper for creating a Location from either an element
 * or a URL object/string
 *
 */
export class Location extends URL {
	constructor(url: URL | string, base: string = document.baseURI) {
		super(url.toString(), base);
		Object.setPrototypeOf(this, Location.prototype);
	}

	/**
	 * The full local path including query params.
	 */
	get url(): string {
		return this.pathname + this.search;
	}

	/**
	 * Instantiate a Location from an element's href attribute
	 * @param el
	 * @returns new Location instance
	 */
	static fromElement(el: Element): Location {
		const href = el.getAttribute('href') || el.getAttribute('xlink:href') || '';
		return new Location(href);
	}

	/**
	 * Instantiate a Location from a URL object or string
	 * @param url
	 * @returns new Location instance
	 */
	static fromUrl(url: URL | string): Location {
		return new Location(url);
	}
}

[daun]

@MrCaumartin I've gone ahead and released the fix as 4.4.3. Thanks again for reporting and let us know if upgrading doesn't solve the issue on your end.

[daun]

I can confirm this is happening in Safari 13.1 and below. Safari 14.1 is working fine. What seems to be happening is that the href is never picked up correctly. Thanks for reporting! We'll do some investigating.

[hirasso]

This is great work guys! I'm just curious why you keep talking about tomorrow when actually you just keep on keeping on in the night 🦉😄

[daun]

This seems to be an issue with Safari not accessing the Location.url getter. Strangely, class getters have been supported since Safari 9 if MDN is to be believed.

[daun]

Looks like Safari below 13 doesn't fully support extending custom classes from built-in classes. I'm not sure there's an elegant solution here. We might switch to using Proxy, but from quick testing this seems impossible to type safely in TS:

export class Location {
	url: URL;
	constructor(url: Location | URL | string, base = document.baseURI) {
		this.url = new URL(url.toString(), base);
		return new Proxy(this.url, {
			get(target, prop) {
				if (prop === 'url') {
					return target.pathname + target.search;
				}
				return Reflect.get(...arguments);
			}
		});
	}

	toString(): string {
		return this.url.toString();
	}

	static fromElement(el: Element): Location {
		const href = el.getAttribute('href') || el.getAttribute('xlink:href') || '';
		return new Location(href);
	}

	static fromUrl(url: Location | URL | string): Location {
		return new Location(url);
	}
}

[daun]

@MrCaumartin Nice, your solution looks pretty elegant to me! Especially compared to my nasty proxy version. I'll give this a spin tomorrow and add some unit tests to make sure there's no regressions, but I'm optimistic :)

[MrCaumartin]

Thank you @daun ! I'm just not sure what problem could cause overriding the prototype.

You will probably not be able to extends this class without overriding the prototype again, but I don't think it's a use case that is needed.

Maybe checking if the prototype is already the good one could be a good idea. I will do some testing on that tomorrow morning.

[daun]

@MrCaumartin Working great in local testing and end-to-end tests keep passing. Created a PR with your fix. I wouldn't know of any negatives of overriding the prototype as we're not extending that class further.

[hirasso]

Also, I love our new issue templates 😍