Force change: data-swup-force="unique-key"

[ionurboz]

Describe the problem 🧐

Especially in complex projects, nested different situations and scenarios can occur. Even though it is mostly used as a main wrapper modifier like <main>, we can set them as "containers" with special conditions, especially for floating elements like "Drawers, Modals, Pop-ups". When we say "Pop-up" should be opened without changing anything else, there may be small areas that you want to force to change. Apart from this, we can apply an exception inside an element that we set as data-swup-persist and force a child to change.

Yes, I know the Swup Morp plugin and I tried it. But "Morph" is a plugin that works outside the lifecycle of Swup. Swup's hooks are disabled and this causes additional problems. It is possible to overcome this with updateCallbacks, but this is a static callback, it does not offer the flexibility of a "hook", which is also a listener. But when we include this situation in the built-in Swup with "force", the whole lifecycle is with you.

I later realized that this topic was opened on a similar feature, if you want I can move the topic content there as a comment and close this.

Describe the propsed solution 😎

Welcome to data-swup-force="unique-key".

With such a markup, Swup will definitely replace this match with a new one, even if it is not inside the container but inside data-swup-persist.

Alternatives considered 🤔

Alternatively, I have another suggestion for both:

Setting data-swup-persist and data-swup-force flags dynamically with hooks.

For example:

swup.hooks.on('page:view', (visit) => {
  if(window.blabla === "BlaBla") {
      visit.persists.push(document.getElementById("blabla")); // we can use id selector' value to unique identifier.
      visit.forces.push(document.querySelector("#blabla > #hohoho")); // we can use id selector' value to unique identifier.
  }
});

How important is this feature to you? 🧭

Would make my life a lot easier

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

[daun]

Hi, and thanks for the suggestion!

When we say "Pop-up" should be opened without changing anything else, there may be small areas that you want to force to change.

The recommended way of solving these scenarios is with the Fragment Plugin. It's built for handling situations where small parts of the page will change, but only on certain routes or interactions, like the popups and drawers you mention. It's not as simple as setting an attribute on a container, but it's really powerful and can help solve many rather tricky interactions.

With such a markup, Swup will replace this match even if it is not inside the container but inside data-swup-persist.

If you're using the persist attribute for managing content replacement, you're probably "using it wrong". It's meant for persisting the local state of single elements across navigations, e.g. videos that continue playing, animations that keep running, a shopping cart icon, etc. Whole containers of content are not a good fit as it's a rather crude tool for that.

That's why we the suggested API likely won't land on the roadmap in the near future — nesting "persist" and "force" doesn't seem like the right abstraction. Especially since these scenarios can already be better handled with the Fragment Plugin.

Yes, I know the Swup Morp plugin and I tried it. But "Morph" is a plugin that works outside the lifecycle of Swup. Swup's hooks are disabled and this causes additional problems.

The Morph Plugin doesn't really work outside the lifecycle — it works inside the lifecycle. It's also triggered by and run inside a hook. None of swup's hooks are disabled by it. But please elaborate on the "additional problems".

But when we include this situation in the built-in Swup with "force", the whole lifecycle is with you.

I'd love to know which callbacks you're missing inside the Morph Plugin implementation. Maybe there's room for optimization there.

document.querySelector("#blabla > #hohoho")

I frankly find the examples rather confusing. Maybe you could post an actual use case of yours here so people can chime in on the best way of solving it. All the blabla and and hohoho makes this look like a theoretical exercise, which I'm sure it isn't. The more concrete, the better.

[ionurboz]

Thank you for your answer.
Think of it this way:

<div id="card" data-swup-persist="card">
   {X} item in your session,
   <div id="status" data-swup-force="status">
      {"All saved your profile" or "An error occour to save items to profile"} 
      <!-- here we depend the server response -->
   </div> 
</div>

I'm sorry that such a ridiculous example came to my mind, it's normally quite difficult to explain.