Feature: Separate url resolution for cache

[jorisnoo]

Hi, and first of all thank you very much for the great work on this library! I've just discovered that there is going to be a v4 — very exciting!

Describe the problem

I'm currently using the resolveUrl option to disable swup for a set of pages, where i do my own transitions (only part of the content is replaced, the other part stays and is filtered based on the url). This works great, except that all these 'ignored' pages now share one entry in the cache — which is the expected behavior, but in my case leads to inconsistent content being rendered (always the content of the first page that was cached).

Describe the proposed solution

My case could be solved by somehow allowing to ignore or overwrite the resolveUrl option in the cache module — or by allowing to only partially enable the cache, depending on the url pattern.

Alternatives considered

I've tried to clear the cache for these urls after various swup events, but unfortunately keep running into the issue. Disabling the cache fully solves it; but it would of course be a bummer to go without this feature.

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Thank you very much for your consideration and all your effort!

[daun]

Hi there! That's a valid point. I haven't used that option too much myself yet so I'd like to get the input of @hirasso who's been using it extensively in some of his projects.

In the meantime, I'll just point you to the demo site for the Fragment Plugin that will be released along with swup 4 next week or so. Sounds like a good fit for your use case — it's meant for targeting smaller page fragments with custom transitions for filter interfaces, overlays, and such.

swup 4 will also come with a cache:set hook you can use to update any cache items after they're created.

[hirasso]

@jorisnoo I've only ever used resolveUrl for URLs that all returned the same data from the server. Basically like a mirror of the canonical link element. I guess you might have tried to clear the cache for your resolved URLs like this?

swup.on("transitionStart", () => {
  const url = swup.getCurrentUrl();
  if (url !== swup.resolveUrl(url)) {
    swup.cache.remove(swup.resolveUrl(url));
  }
});

This might work if navigating using the browsers back/forward buttons, but won't work when clicking on links, due to a limitation in swup@3, that will be fixed in v4.

In swup3, swup.getCurrentUrl() called from inside transitionStart returns the URL before the visit for clicks on links, but the URL after the visit during history visits. This will be more consistent in swup@4. Until then, you could work around this limitation by using two combined handlers:

import Swup, { Location } from 'swup';

const swup = new Swup();

function maybeClearCache(url) {
  if (url !== swup.resolveUrl(url)) { // or some condition that makes sense for your case :)
    console.log(url);
    swup.cache.remove(swup.resolveUrl(url));
  }
}

swup.on("clickLink", (e) => {
    // get the correct URL from the link element instead of the browser for click on links:
    const url = Location.fromElement(e.delegateTarget).url;
    maybeClearCache(url);
});

swup.on("popState", (e) => {
    maybeClearCache(swup.getCurrentUrl());
});

[hirasso]

Alternatively, you could brute-force overwrite swup.cache.getCacheUrl to never resolve cache URLs:

import Swup, { Location } from 'swup';
const swup = new Swup();

swup.cache.getCacheUrl = (urlToResolve) => {
  const { url } = Location.fromUrl(urlToResolve);
  return url;
};

Just keep in mind that this function is not part of the public API and therefor might change without notice. It will be renamed to swup.cache.resolve in swup@4, for example.

[jorisnoo]

Hi @daun and @hirasso,

thanks a lot for the detailed response and for pointing out the fragment plugin; very much appreciated. I'll happily look into all of this, maybe i'll even wait for the v4 release if it's imminent. Thank you both for your help and the work on the library!