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,hashchangeevents when URL is changing - There's no way to debug
history.replaceState(Object.assigndoesn't work onwindow.location)
For scrolling you can:
- Replace every single method in
windowthat 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