[go: up one dir, main page]

Skip to content

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:

  1. Use popstate, hashchange events when URL is changing
  2. There's no way to debug history.replaceState (Object.assign doesn't work on window.location)

For scrolling you can:

  1. Replace every single method in window that does scrolling
  2. Patch Element.prototype.scrollIntoView()
  3. 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