Add SSOT Facades for scrolling and URL management
Debugging scroll and URL changes can be quite a pain sometimes, especially if you don't know what caused the change.
For URLs you should:
- Use
popstate
,hashchange
events when URL is changing - There's no way to debug
history.replaceState
(Object.assign
doesn't work onwindow.location
)
For scrolling you can:
- Replace every single method in
window
that does scrolling - Patch
Element.prototype.scrollIntoView()
- Patch
Element.prototype.focus()
(yes.focus()
also causes scrolling)
All of these actions hamper debugging experience.
To solve that we could create our own proxy API for these methods, so there's a single entry point where you should put a debugger
statement.
Example API
Below are examples of a proxy API, details might be changed later.
Scrolling
scroll({
element,
to,
by,
intoView,
behaviour,
duration,
})
Our scrolling functions already handle sticky elements, we should incorporate that into this new API.
This later can be used for ad-hoc functions: scrollToElement
, scrollBy
, scrollIntoView
, focus
(just bypass), etc.
URLs update
updateLocation({
path,
hash,
title,
state,
replace,
reload,
assign,
})
// support providing an URL object
// use second argument to determine the replace mode: replace or push
updateLocation(new URL(window.location), true)
After these functions are provided we can enforce the SSOT with ESlint rules.
Edited by Stanislav Lashmanov