Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persisting/restoring data between navigation #5

Closed
FluffyDiscord opened this issue Sep 9, 2023 · 5 comments
Closed

Persisting/restoring data between navigation #5

FluffyDiscord opened this issue Sep 9, 2023 · 5 comments

Comments

@FluffyDiscord
Copy link

Right now this SPA router components lose their state when going backwards in history which makes it behave differently than most browsers, where going backwards shows page's last state, eg. with filled form fields, different opened tabs, changed element positions or states, the page scroll position, etc (theres a lot to consider!)

Currently we have to implement this logic ourself - creating history store, with derived stores per page/component/path, track path/url changes, then manage the page state/history by cloning, pushing and restoring the states from this history store.

It would be nice if this library provided it's own build store/logic that does that that we can use.

@howesteve
Copy link
Owner

What kind of logic do you think it should be implemented? Isn't what you want just a $path subscription?

let state = {}
path.subscribe(x=>{
  state[path] = saveState()
})

... or just a popstate event handler?

 addEventListener('popstate', (event: PopStateEvent) => {
   saveFormState()
  // ... or restoreFormState()
  });

For the specific tabs situation and other small state changes, you can use hash method as shown in the demo.

Personally, if form state has changed, I'm more for denying user navigation until they decide if they want to save or discard changes. Otherwise, user keeps navigating,do not realize changes are pending, and ands up forgetting about them. I'd say most applications follow this guidelines, too.
That's why I implemented preventChange() and preventUnload().

I hope you do not mean Elegua should infer all parameters of a page's state by itself and restore them. That would be way off it's scope.

@FluffyDiscord
Copy link
Author

Maybe PR or, better yet, REPL with an eample would help to explain myself. I'll see what I can do.

Side note - would be nice to be able to listen/react to popstate.

Also it seems you are missing listener for searchParams.append() https://github.com/howesteve/elegua/blob/master/src/lib/Elegua.ts#L43 Is that intentional?

@howesteve
Copy link
Owner

howesteve commented Sep 11, 2023

Maybe PR or, better yet, REPL with an eample would help to explain myself. I'll see what I can do

Ok, I'll be waiting.

Side note - would be nice to be able to listen/react to popstate.

But you can, nothing blocks you from doing that:

document.addEventListener('popstate', (event: PopStateEvent) => {
   //...
  });

Also it seems you are missing listener for searchParams.append()

Indeed, thanks for pointing it! I've just released v.2.21 with support for it.

@FluffyDiscord
Copy link
Author

FluffyDiscord commented Sep 16, 2023

Would this be considered as "out of scope"? #6 It's incredibly simple state persisting/restoring

@howesteve
Copy link
Owner

Ops, forgot to answer this issue. Thanks for the PR, but I'm declining it this since it's so easy to implement through stores, and it's a very particular use case. I'm not getting this into the core. Btw, there was no need to be offended over the "out of scope" thing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants