Feature: Separate url resolution for cache about swup

[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!

[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.