(window) url slice

[sashafirsov]

Goal

• make URL properties available in slice( hash, url params, etc. )
• watch for window.location changes
• change window.location
• change hash and navigate in-window
• ?

APIs to be exposed:

• window.location
• new URL(document.location).searchParams
• Navigate to a new page
• Reloading the current page
• reload with hash

Non-goals

history API

data slice

would populate URI props

URL change

To invoke the URL change, the property from URI defined as attribute would trigger the window.location change:

• <location href="abc"/> would change the page URL. Due to page reload, the state of custom element would be lost.
• <location hash="abc"/> would navigate the page to #hash
• <location href="."/> would reload the page, the state of custom element would be lost.
• ?

non-window URLs

src attribute would bind the element to given URL instead of window.location

[sashafirsov]

How to detect when window.location changed to update the data slice?

stackoverflow suggest to use heavy weaponry of MutationObserver on body. 😧

On other hand, it also suggest to hook to hashchange and the popstate events of the window. Which is straight and light.

Unnecessary updates prevention. popstate event can be emitted or not during the page load. To avoid transformation on value which is already in place during page(DCE) load, the check against current slot value has to be in place.

[sashafirsov]

in 0.0.10 release location-element implements read to slice capabilities, no update.