swup / preload-plugin

What did you expect? 🧐

If I am on a website https://example.com and I have an external link on that site, for example:

<a href="https://www.instagram.com/followme">@followme</a>

I'd expect preload plugin to ignore that link when I hover over it.

What actually happened? 😵‍💫

Currently the plugin will attempt to preload this URL:

https://example.com/{{path/of/external/link}}

So based on the example above this: https://example.com/followme

I suspect the problem lies within Location.fromElement that is being used here:

preload-plugin/src/index.ts

Line 260 in 604d381

({ url } = Location.fromElement(input));

That function doesn't check if the provided URL is actually an internal URL or not.

I'll investigate further.

Swup and plugin versions 📝

❯ npm list | grep swup
├── @swup/a11y-plugin@4.5.0
├── @swup/body-class-plugin@3.1.2
├── @swup/debug-plugin@4.0.4
├── @swup/fragment-plugin@0.3.7
├── @swup/head-plugin@2.1.2
├── @swup/preload-plugin@3.2.7
├── @swup/progress-plugin@3.1.2
├── @swup/scroll-plugin@3.3.1
├── swup@4.5.1

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

n/a

Checked all these? 📚

I have read and searched the official docs
I have checked discussions and existing issues for related problems
I agree to follow this project's Code of Conduct
I have provided all necessary information to the best of my knowledge

Good catch, this should probably be href instead of url.

~~I've started a branch for functional tests some time ago in December. Time to finish that so we find these types of issues earlier or avoid them at all.~~ It's already merged. Will need to add a new test for this specific bug.

Since the plugin defers to swup itself for checking whether to ignore a link or not, using href should be enough.

But is that actually really what we want? It seems like pretty unintuitive behavior of Location.url to me. How about we change the Location.url as proposed in this PR?

I'd say that's what we want. The url property is shorthand for path + search, which in a normal URL object also don't care about the origin. I'd suggest a new local getter on the location object and making sure we're using that throughout the codebase, e.g. if (!location.local) return;. Returning a full href from url in one case and a local path in another case would make things more confusing in my opinion.

class Location {
  get local() {
    return this.origin !== window.location.origin;
  }
}

The naming of the url property is a bit unfortunate, but if I remember correctly, we just haven't managed to find the perfect name for it when creating the Location abstraction. The intention was to have the path part including all query params.

[Bug]: External links are not being properly ignored on hover