Keep some pages alive

[iluuu1994]

Thanks for your work on this library! I'm not using it yet but it looks much much better than anything I've used so far for Svelte. ✨

Is your feature request related to a problem? Please describe.
Our website contains multiple pages with a list and detail view. Actually, it's a dashboard page with multiple list views. A requirement is that visiting the detail view of an item and navigating back should result in the same view, same scroll position, same filters of the list elements, etc.

This is possible with saving and restoring state in the history api but it's very time consuming to do that for all types of state.

Describe the solution you'd like
It would be much easier if routify kept these pages alive until the user navigates back. That definitively comes with a memory cost but shouldn't be much of a problem for a single page. Maybe on navigation it could be configured if the page is "stacked". If so, it goes onto the stack and is popped back on browser back navigation. If some link is visited that isn't pushed on the stack the stack can be discarded.

This isn't completely thought through, just a general idea.

Do you think this is feasible? I'm not familiar with the internals of this library yet but if you think it's feasible I'm ready to give it a shot.

[Tormak9970]

I think this could potentially be done by keeping a config per page, and having the user specify a config for attributes to save, which would take very little memory. The issue is differentiating between going back and just navigating to it, which is an issue that I have run into in one of my own current projects. I think this could be good feature though.

[jakobrosenberg]

I kinda like this idea. Sounds a little bit like this https://example.routify.dev/example/modal/animated.

If you're only looking to preserve state on the dashboard, you could do a bit of magic like this in your _layout.svelte

<!-- src/pages/dashboard/_layout.svelte -->

<script>
  $: hideDashboard = isOnChildPage()
</script>

<!-- show dashboard if we're on /dashboard, but hide it on /dashboard/anypage -->
<div class:hideDashboard>
  <Dashboard />
</div>

<!-- show /dashboard/anypage here -->
<slot />

<style>
  .hideDashboard {
    visibility: hidden;
    position: absolute;
  }
</style>

It would work the same as the modal example, except the dashboard would be completely hidden and `<slot />` isn't displayed in a modal.

[iluuu1994]

@jakobrosenberg Thanks for the suggestion! We're planning on migrating to routify in a few weeks, I'll see if it's possible to something like the feature I suggested. If not, it's good to know there's a backup plan 🙂

[iluuu1994]

@Tormak9970 That would probably work well enough in most cases. Unfortunately, some of our state is not managed by Svelte. We're using ag-grid where you can do a lot of stuff like filtering, hiding/showing columns, resizing columns, infinite loading, etc). Some of these would not be a deal-breaker if lost but other would. These could probably be implemented somehow but it sounds complicated and very specific. Keeping the page around just sounds a lot easier.

[iluuu1994]

Sorry for the lack of feedback. The client keeps moving this story back. The workaround by @jakobrosenberg also seemed to work very well when I tried it really quickly. Anyway, thanks for your help!

[jakobrosenberg]

Happy you got something working :D